Node.jsでのHello worldを済ませて、expressコマンドでアプリの雛形を自動生成できるようになったので、自分がNode.jsに興味を持った当初の目的である以下について実行してみる。 普段自分がRubyで使っているSinatra+Slim+Sassと似たような開発環境を、Node.jsでもExpress(CoffeeScript)+Jade+Sassを使えば実現できるかも？
個人的には、上記の憶測がなかったらNode.jsをやってみようと思わなかったと言っても過言ではないので、できるだけ早い段階でこの組み合わせをやってみたくて、まずはCoffeeScriptを触ってみた。
Node.jsアプリの雛形を自動生成
まずはNode.jsアプリの雛形を自動生成する。-cオプションでCSSにはSassを使うことを指定する。HTMLはデフォルトでJadeが選ばれるので指定はなし。
$ express -c sass
destination is not empty, continue? y
create : .
create : ./package.json
create : ./app.js
create : ./public/stylesheets
create : ./public/stylesheets/style.sass
create : ./public/images
create : ./public/javascripts
create : ./pids
create : ./views
create : ./views/layout.jade
create : ./views/index.jade
create : ./logs既にExpress, Jade, Sassはインストール済みなので、それらへのリンクを貼る。
$ npm link express jade sass
./node_modules/sass -> /Users/ruedap/.node/v0.4.5/lib/node_modules/sass
./node_modules/express -> /Users/ruedap/.node/v0.4.5/lib/node_modules/express
./node_modules/jade -> /Users/ruedap/.node/v0.4.5/lib/node_modules/jadeこれでNode.js雛形アプリを起動できるようになったはず。
$ node-dev app.js
21 Jun 18:28:03 - [INFO] Started
Express server listening on port 3000ExpressをCoffeeScriptで
ExpressのコードをCoffeeScriptで書くための手順について。
CoffeeScriptのインストール
CoffeeScriptをまだインストールしてなかったら、まずはインストール。
$ npm install -g coffee-script
/Users/ruedap/.node/v0.4.5/bin/coffee -> /Users/ruedap/.node/v0.4.5/lib/node_modules/coffee-script/bin/coffee
/Users/ruedap/.node/v0.4.5/bin/cake -> /Users/ruedap/.node/v0.4.5/lib/node_modules/coffee-script/bin/cake
coffee-script@1.1.1 /Users/ruedap/.node/v0.4.5/lib/node_modules/coffee-script これでcoffeeコマンドが利用可能になる。
$ coffee -v
CoffeeScript version 1.1.1app.jsをapp.coffeeに変換
次に、既存のJavaScriptをCoffeeScriptのコードに自動変換できるツールjs2coffeeをインストールする。これは、先ほどexpressコマンドを使って自動生成したapp.jsを、わざわざ手書きでCoffeeScriptに書き直すのではなく、機械的に一発変換するため。
$ npm install -g js2coffee
/Users/ruedap/.node/v0.4.5/bin/js2coffee -> /Users/ruedap/.node/v0.4.5/lib/node_modules/js2coffee/bin/js2coffee
js2coffee@0.1.0 /Users/ruedap/.node/v0.4.5/lib/node_modules/js2coffee インストールできたら、js2coffeeコマンドを使って、app.jsをCoffeeScriptのコードに変換してapp.coffeeとして保存する。
$ js2coffee app.js > app.coffeeするとapp.coffeeはこんな感じになった。
express = require("express")
app = module.exports = express.createServer()
app.configure ->
app.set "views", __dirname + "/views"
app.set "view engine", "jade"
app.use express.bodyParser()
app.use express.methodOverride()
app.use express.compiler(
src: __dirname + "/public"
enable: [ "sass" ]
)
app.use app.router
app.use express.static(__dirname + "/public")
app.configure "development", ->
app.use express.errorHandler(
dumpExceptions: true
showStack: true
)
app.configure "production", ->
app.use express.errorHandler()
app.get "/", (req, res) ->
res.render "index", title: "Express"
app.listen 3000
console.log "Express server listening on port %d", app.address().portコメント行は消されちゃうんだね。
app.coffeeを自動変換
今作成したapp.coffeeをベースにしてコーディングしていくんだけど、更新(保存)したらapp.jsを自動で書き出すように設定する。ターミナルをもう1枚立ち上げておいて、coffeeコマンドでapp.coffeeが更新されてるかどうかを監視しておく。
$ coffee -wc app.coffee
20:14:15 - compiled app.coffeeこうしておくと、以降app.coffeeが更新されるたびに自動でコンパイルされてapp.jsが上書き保存される。
JadeとSass
HTMLをJadeで記述するのと、CSSをSassで記述するのは、expressコマンドの自動生成時に指定してあるので、基本的には何も設定することはないかな。
- views/layout.jade と views/index.jade
- public/stylesheets/style.sass
それぞれjadeファイルとsassファイルを適当に編集していけば良さそう。…と思ったら！ なんとExpressで使えるSassは、Sinatraで使えるSassとは違うシロモノだった！
以降、次回に続く。