nodeで遊ぶ -jadeのマナー-

少し間が空いてしまいましたが、node.jsを使って遊んでみます。

前回は、npmを使ってexpressというフレームワークとjadeというテンプレートエンジンをインストールし、触りだけ使ってみました。
まぁ、あれだけじゃなんなので、今回はjadeというテンプレートエンジンのマナーを探っていこうと思います。

今回は前回のコードを流用する形で、jade用のテンプレートをいじってみました。 テスト用に使ったサンプルのコードは以下のとおり。

h1= title
p Welcome to #{title}
p Author is #{name}
p test #{test}

table
  tbody
    tr
      td(colspan='2') table test
    tr
      td column1
      td colmun2

dl
 dt your name
 dd
  input(type='text', name='username', value=name)
 dt your sex
 dd
 select(name='sex')
  option(value='male') male
        option(value='female') female
      
#id
          この部分のHTMLはdivタグです
          p この部分は#idの中のpタグです
     この部分は#idの中ではありません

6行目から12行目までは、tableタグのようなネストして使うことが前提のタグの出力をテストしています。

閉じタグに対応するものは書きませんので、どうやってネストを表現するかというと、インデントの数です。
インデントの数というのは語弊がありますが、ネストするタグは親のタグより1文字以上スペースを多くインデントします。
インデントする時、タブと半角を混在させるのはダメ！　半角スペースかタブかで統一しないとエラーが発生します。

9行目のtdタグはcolspan="2"という属性を入れました。属性は（）で括ってカンマ区切りで複数入力できます（17行目参照）。

12行目のtdタグより少ないインデントの行が出てきた段階でtrの閉じタグが出力されます。その次のtbodyタグ、tableタグも同じ要領です。ちょっと分かりにくいですが、14行目のdlタグはインデントなしなのでtableタグもここで閉じられます。

14行目から新しいネストが始まります。15行目にはスペース1つのインデントしかないですが、1つでも文法的にはOKです。

15行目のdtタグの後ろにはdtタグ内のテキストがありますが、タグとテキストの間はタブで区切ってみましたが問題なく動きました。

インデントにはスペースとタブが混在できないがタグの区切りにはスペース、テキストの区切りにはタブ、これはOK（逆も可）

ややこしいな・・・。

17行目のinputタグには3つの属性が設定されていますが、最後のvalueだけプリセットする文字列がクォーテーションで囲まれていません。
この状態で実行すると、「ystream」という文字列がプリセットされていました。

文章の中の変数は#{変数}とする。  属性で利用する場合は変数名だけでいい。

このマナーは重要です。inputタグなんかでは多用するマナーです。

21行目より22行目の方がインデントの数が多いですが出力されたHTML上では両方ともselectタグに囲まれた状態で出力されます。
これは単純にoptionタグが内容を含まない空要素タグだからでしょう。

24行目にいきなり#idと書いていますが、#idは名前の通りIDとして出力されます。
タグの記述がなく「#」から書き始めた場合はID付きのdivタグとして出力されるようです。

25行目はidというidを持ったdivタグの内容です。
26行目はidというidを持ったdivタグにネストされたpタグです。
27行目はタグに囲まれず出力されました。


以上、ザックリテンプレートの記述について解説してみました。
ちなみに1つだけHTMLのマークアップが間違っている部分があるんですが、jadeのテンプレートを修正してみてください！