Nodeで動くテンプレートエンジンJadeを使ってみる

JavaScript

2013.09.30

あまちゃんのブルーレイBOXが欲しいminamiです。

Node.js上で動くテンプレートエンジン、Jadeを使ってみました。

Jadeってなに

Jade - Template Engine

JadeはJST（JavaScript Templates）の一つでHamlなどに影響を受けています。Node.jsで動かすことができます。Express.js のような、Webアプリケーション用フレームワークのテンプレートエンジンとして採用されていますが、静的なコンテンツを作る際にも便利かも？ということで使ってみました。

インストールする

Nodeとnpmがインストールされている環境なら

$ npm install -g jade

というコマンドをたたくだけでインストールできます。

$ jade --version

でバージョン情報が表示されれば準備完了です。

Jadeでテンプレートを書く

Jadeの記法にはいくつかポイントがあります。

doctype宣言は "!!!" というショートハンドで書ける
インデントで階層構造を表す
閉じタグ不要
属性は（）で付与、,で区切る
CSSセレクタと同様の書き方ができる

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; chaeset=utf-8">
    <meta name="description" content="コンテンツの説明です。コンテンツの説明です。コンテンツの説明です。コンテンツの説明です。コンテンツの説明です。">
    <meta name="keywords" content="キーワード1です,キーワード2です,キーワード3です">
    <meta http-equiv="imagetoolbar" content="no">
    <title>タイトルです</title>
  </head>
  <body>
    <h1>ここが大見出しです</h1>
    <h2>次の見出しです</h2>
    <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
  </body>
</html>

上のようなHTMLを出力するにはJadeでは以下のように書きます。

!!!
html
  head
    meta(http-equiv="content-type",content="text/html; chaeset=utf-8")
    meta(name="description",content= "コンテンツの説明です。コンテンツの説明です。コンテンツの説明です。コンテンツの説明です。コンテンツの説明です。")
    meta(name="keywords",content= "キーワード1です,キーワード2です,キーワード3です")
    meta(http-equiv="imagetoolbar",content="no")
    title タイトルです
  body
    h1 ここが多見出しです
    h2 次の見出しです
    p 文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

先ほど説明した特長がでていますね。Jadeではインデントで階層を判断するため、インデント合わせは重要です。文書内で統一されていればインデント数自体は特に決まっていません。

Jadeをコンパイルする。

Jadeの記法で書いたファイルを.jade の形式で保存します。これをコンパイルしてみます。

$ jade index.jade

するとindex.html が出力されます。

<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; chaeset=utf-8"><meta name="description" content="コンテンツの説明です。コンテンツの説明です。コンテンツの説明です。コンテンツの説明です。コンテンツの説明です。"><meta name="keywords" content="キーワード1です,キーワード2です,キーワード3です"><meta http-equiv="imagetoolbar" content="no"><title>タイトルです</title></head><body><h1>ここが多見出しです</h1><h2>次の見出しです</h2><p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p></body></html>

出力されましたがとても見にくいです。コンパイル時に --pretty オプションをつけるとインデントを保持したままHTMLに出力してくれます。