生のNode.jsからjadeを使う #Jade

ExpressなどのWebフレームワークを使わずに、生のNode.jsからjadeをテンプレートエンジンとして使うのはあまり見ないので（日本語では）自分用の覚え書き。

まずは、jadeファイル。

hello.jade

doctype html
html(lang='ja')
  body
    h1= title
    p!= content
    p access : #{n}

タグ名= 以降をnode.jsとして動作させる。（変数の中身はタグごとそのまま表示される。タグはエスケープされてて安全。）
タグ名!= 以降をnode.jsとして動作させる。（変数の中身のタグはちゃんと機能する。なるべく使わないほうがいい。XSS対策の知識が必要。）
#{変数名} 普通の文字列の中に#{}で変数を扱える（タグもそのまま表示される。）
!{変数名} ソースには書いてないけどタグがエスケープされない方。（XSS対策が必要な方。）

これらの変数に対してNode.jsから値を渡したい。↓

server.coffee

http = require 'http'
settings = require './settings'
server = http.createServer()

jade = require 'jade'
pages = {}
pages.hello = jade.compileFile __dirname + '/hello.jade', 
  pretty: true

n = 0
server.on 'request', (req, res) ->
  n++
  res.writeHead 200, 'Content-Type': 'text/html'
  res.write pages.hello
    title: "Hello World!"
    content: jade.render('string of jade')
    n: n
  res.end()

server.listen(settings.port, settings.host)
console.log 'server listening ...'

settings.coffee

exports.port = 1337
exports.host = '192.168.1.適当'

jadeに関するところは２箇所。まずはココ↓。

jade = require 'jade'
pages = {}
pages.hello = jade.compileFile __dirname + '/hello.jade', 
  pretty: true

まずは'jade'をrequireする。

jade.compileFile()関数はjadeファイルをHTMLにコンパイルする。その際、コンパイル元の変数の部分にはまだ何も値が反映されていない状態。後でそれらを代入できるように、生のHTML文字列ではなく、関数として返す。
使い方は以下。

jade.compileFile(<FILENAME>[, OPTIONS])

オプションにpretty: trueを指定すると、生成されたHTMLがちゃんと改行やインデントされて見やすくなる。
デフォルトでは全てを１行に纏めて記述されたHTMLの文字列が生成されるので注意。
jadeの記述ミスがあって、HTMLを読まなきゃいけない時とかメンドイから。
あとはこのHTML文を返す関数をpages.helloで保持する。

次にココ↓。

  res.write pages.hello
    title: "Hello World!"
    content: jade.render('string of jade')
    n: n

res.wirteでpage.hello()関数の結果（さっきの翻訳結果のHTMLが返る）をクライアントに送信する。
でpage.hello()関数に引数としてローカルオプションを渡してる。
ここでjadeで変数を書いていた部分に値を代入できる。
オブジェクトの各プロパティがそれぞれjadeに書いていた変数を指す。
content:のjade.render('string of jade')関数はその場でjadeを書くためのAPI。
この例だと、<string>of jade</string>が生成される。
使い方は以下。

jade.render(STRING[, LOCALS])

Expressのres.render()と似ているが、ファイルを渡すのではなく、その場でjadeを書く。
jade.compile()と違ってHTML文を返す関数を返すのではなく、HTML文を文字列で返す。
jade.compile()でもらった関数は後で何度でもローカル変数の値を変更してそれを反映させて表示させることができるが、jade.render()は文字列を返すので後でローカル変数の値を変更してももはや意味はない。
毎度毎度コンパイルしてレンダリングさせればローカル変数を与えられるが、コンパイル1回でHTMLを保持してあとはレンダリングするだけのjade.compile()のほうパフォーマンスがよさそう？