CoffeeScriptでExpress | kichij.org アーカイブ

［画像：未回収（アーカイブ未収録）］
Coffee Scriptで静的HTMLを表示するExpressサーバを書いた。

CoffeeScriptの概要

CoffeeScriptはJavascriptを生成するためのコンパイラである。
VisualStudio Codeのプラグインに「Coffee Lint」などが用意されており、Javascriptmにおける関数やjQueryなどで多用するクロージャーなどを簡潔に記述できる仕組みが備わっている。
Javascriptのコード

$(function() {
  // 初期化のためのコード
});

CoffeeScriptのコード

$ ->
  # 初期化のためのコード

CoffeeScriptを記述した後、デバッグ実行するためのコマンドや、コンパイルするためのコマンドが用意されているので、非常にスピーディな記述が可能となっている。

Hello World

$ vi hello.coffee

console.log "Hello World!"

デバッグ実行

$ coffee sample.coffee
Hello World!

CoffeeScriptのデメリット

デメリットとしては、コンパイル後に生成されるJavascripは一辺倒になりがちで、どんどん変化していくJavascriptの言語特性についていけない可能性がある。負債としてのJavascriptコードが生まれやすく、記述こそ簡潔にできるものの、読解のコストは高くなってしまうというものがある。

俄然見直されるTypeScript

静的型付け言語であるTypeScriptがやはり注目を集めているが、大規模開発においてテストコードで拾わなくていいところは事前に型を定義して、設計することで余計なテストコストを低くしてしまおうと考えるのは至極当然のことと思える。
しかし、大規模開発でない場合はCoffeeScriptで開発スピードを上げても良いと個人的には思います。

Node.jsのExpressくらいはCoffeeScriptで書いてもいいじゃないか

そう思って、静的なHTMLのスニペットはそのままに、nodejsサーバで簡単に表示できる部分はCoffeeScriptでスニペット化してしまおうというのがこの記事の主旨です。

実際に書いたコード

ほとんど参考にしたURLからのコピペですが、以下のファイルを用意しました。
app.coffee

app = require('express')()
http = require('http').Server(app)
port = 3000

app.get '/', (req, res) ->
  res.status 200
  res.json '{"status":"200"}'

app.get '/error', (req, res) ->
  res.status 404
  res.json '{"status":"404"}'

http.listen port, ->
  console.log "listening on *:", port

これだけで、以下のcoffeeコマンドでデバッグ実行ができます。

$ coffee app.coffee
listening on *: 3000

ブラウザで「 http://localhost:3000 」を開くと、ブラウザに以下のように表示されます。

"{\"status\":\"200\"}"

/error を開くと、
“{”status”:”404”}”
となります。
res.status、return res.jsonの箇所を以下のように編集して、index.htmlを適当に用意してやると、静的HTMLの表示ができるようになります。

  app.get('/', function(req, res) {
    return res.sendfile('index.html');
  });

app.getのブロックをコピーして、ルーティングとして、/aboutなどを追加していけば、静的なページを増やしていくことができます。

  app.get('/about', function(req, res) {
    return res.sendfile('about.html');
  });

ソースコード

今回使ったソースコードは以下のGithubに上げています。
https://github.com/fk2000/coffee-snippet