2012
03/02
10:12

10分でわかるjadeテンプレートエンジン

[node.js][jade]

[前回の内容](/4f46c726e683783819000001/title/jade%E3%81%A7%E3%81%A4%E3%81%8F%E3%82%8B%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88)では実際にサイトは作れなかったので、 今回は実際にjadeを使ってHTMLを生成するところをやりたいと思います。 読むだけなら5分、手を動かして10分くらいです。 まずはインストール ``` npm install -g jade jade --version ``` バージョン情報が表示されれば使えるようになっています。 ######jadeでコードを書く際のポイント * HTMLタグを < > 無しで書きます * 閉じタグの代わりにインデントで親子関係を表します * CSSと同様idとclassの表記が使えます * デフォルトのタグはdivです * 先頭が英文字の場合はエスケープ では実際のコード例です。 ``` !!! html head body ようこそJadeへ! ``` 一番最初の`!!!`がdoctypeになります。`!!! 5`と書くとHTML5のdoctypeになります。 次にhtmlタグが来て、次にスペース4つでインデントしてheadとbodyが並んでいます。 これをjade_test.jadeという名前で保存してコンパイルしてみましょう。 ``` jade jade_test.jade ``` すると次のようなHTMLになります。 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><body>ようこそJadeへ! </body></head></html>``` 非常に見づらいですね。jadeではデフォルトでインデントが全部なくなります。 このままでは文章構造を理解するにも一苦労なのでインデントを保持してコンパイルするようにします。 ``` jade -o {pretty:true} jade_test.jade ``` これで無事見やすいHTMLファイルが生成されました。 ** 2012/04/10 更新:jade@0.22.1で試したところ、prettyオプションが効かなくなっていました。どうやら廃止されたようです、何ということでしょう・・・。 ** ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> </head> <body>ようこそJadeへ! </body> </html> ``` bodyタグの間に挟まっている日本語の位置がおかしな気がしますが気にしないことにします。 prettyオプションは他にもおかしな所があるので確認時だけ使って、最終的には外すようにしましょう。 試しにbodyの前にスペースを1つ足してインデントをずらしてみましょう。 コンパイルするとheadタグの中にbodyが入ってしまい、何も表示されなくなります。 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <body>ようこそJadeへ </body> </head> </html> ``` インデントを常に意識するようにしましょう。 ここでは4つ字下げをしていますが、インデントの数は幾つでも大丈夫です。 以前はインデントの数を間違えるとコンパイルエラーになっていましたが、 最近のバージョンでは2が3になっても4が5になってもちゃんとコンパイルできます。 ようは字下げがあれば入れ子になると解釈されます。 以降の例ではコンパイル後のHTMLを省きます。 自分でコンパイルして結果を確認してみてください。 コメントはjavascriptと同じ先頭にスラッシュ2つです。 //の後にインデントすると以降すべてコメントになります。 ``` !!! html head body //コメント // コメント コメント コメント ``` クラスやIDはcssのように書けます。 ``` !!! html head body .hello ようこそJadeへ! #greeting こんにちは p.hey よくきたな! \jadeへようこそ ``` タグ名をつけずにclassとidだけを指定するとdivタグになります その他のタグも>と<を省いてそのまま使えます。 気をつけないといけないのは先頭が英文字になる場合です。 インデントの後にエスケープなしでabcと書くと``<abc></abc>``というタグだと解釈されます 文頭にアルファベットが来る場合は忘れず\abcと書くようにしましょう aタグやlinkタグのほか、HTMLタグの属性を書くときには注意が必要です。 HTMLではスペースで区切りますが、jadeではカンマで区切ります。 ``` !!! html head script(src="/js/jquery-1.7.js", type="text/javascript") link(href="/css/style.css", rel="stylesheet") body a(href="/", target="_blank") トップページ ``` HTMLがあるのになぜテンプレートエンジンを使うのか、 その理由の1つが変数と制御構造が使えることです。 ``` !!! html head body str = 'こんにちは' p= str p 変数の展開「#{str}」もできます ``` イコールの前後に注意してください。 前後にスペースがある場合、変数の宣言と代入になります。 後ろにだけスペースがある場合はタグになり、その中に変数の内容が表示されます。 他の文字列の中に変数を入れたい場合は#{str}のようにします。 先程の例では変数は常にエスケープされます。 変数内のタグをそのまま出力したい場合は次のようにします。 ``` !!! html head body str = '<b>こんにちは</b>' p!= str p 変数の展開「!{str}」もできます ``` 次は配列、繰り返し、条件分岐の例です。 ``` !!! html head body list = ['a','b','c'] ul for item, index in list if(index % 2) == 0 li.even= item else li.odd= item ``` forの代わりに``each item in list``と書くこともできます。 そのほか繰り返しは``until`` ``while`` 条件分岐は``unless`` ``switch`` などが使えます。 テンプレート継承もHTMLにない便利な機能です。 これを使うと他のファイルの内容をそのまま引き継いで、好きなところだけ変更して再利用できます。 ``` !!! html head body block welcome ようこそJadeへ! block main メインコンテンツ ``` block というのがポイントです。 次に以下の一行だけを書いたファイルをjade_test2.jadeという名前で保存して、コンパイルしてください。 ``` extends jade_test ``` 出来上がったファイルjade_test2.htmlはjade_test.htmlと全く同じ内容になっています。 コピペしたりせずに、一行書くだけでもとのファイルの内容をまるまる再利用できるわけです。 つぎに、jade_test2.jadeで元のファイルの内容を上書きしてみます。 ``` extends jade_test block welcome \jadeへいらっしゃーい ``` 再度コンパイルしましょう、「ようこそjadeへ!」が「jadeへいらっしゃーい」に変わっています。 block main で指定した「メインコンテンツ」が変わっていないことに注意してください。 次に以下のようにしてみましょう。 ``` extends jade_test append welcome \jadeへいらっしゃーい ``` blockがappendに変わっています。コンパイルすると「ようこそjadeへ!」と「jadeへいらっしゃーい」の両方が表示されます。blockの代わりにappendを使うと上書きするのではなく、付け足しすることができます。 appendはページによってメニューを変えたり、読み込むスクリプトやCSSファイルを変えたりするのに便利な機能です。 最後に、他のファイルの内容を読み込む機能としてincludeというのがあります。 ``` !!! html html head body form(action="/", method="post") include form_input ``` これでformタグの中にform_input.jadeに書かれた内容が読み込まれます。 これはフォームの入力フィールドを共通化したい時などに使えるでしょう。 以上の内容を知っていればjadeでテンプレートを書くのに困ることはないと思います。 1つ紹介してない機能でMixinというのがあります。これは私自身使っていないので説明を省きました。 そのうち使うことがあれば補足したいと思います。