pug/jade HTMLテンプレートエンジンに関するメモ

2016-03-26-jade.md

pug/jade HTMLテンプレートエンジンに関するメモ

pug/jadeはHTMLテンプレートエンジンで、Express.jsなどと組み合わせるとかなり強力な ツールになりそうです。今回初見で感じた簡単な覚書です。（すでに使いこなしてる方に は意味のない情報と思います）

JadeなのかPugなのか

Issue 2184にある通り、商標権の問題で 、JadeからPugへ改名している途中のようです。

ウェブサイトなどもhttp://www.pug-lang.com/ がまだ完成していないのに、リンクだけ は移行していたり、ちょっと混乱してる様相で、情報を探すなら、現時点ではjadeのほ うが探しやすいと思います。

今のところ、情報は http://jade-lang.com/ にまとめられていますが、今後のために以 下の通り内容をpugに読み替えて利用した方が良いと思います。

npm install jade -> npm install pug

• http://jade-lang.com/
• http://www.pug-lang.com/ (まだ未完成)

なぜpugなのかは、短い事、親しみやすい動物だからだとか。特に深い意味はないようで す。

気になった間違いやすい点

• 基本的にオフサイドルールで記述していく感じですがインデントはtabでなくてもホワ イトスペースでOKでした。
• input (...)はダメで、スペースを入れてはいけない点に注意してください。正しく はinput(...)とします。
• input(value="#{variable}")はダメで、input(value=variable)とします。
  • 逆にコンテンツ内で変数を展開したい場合は#{variable}とくくらないと、ただ の文字列として認識されてしまいます。
• 属性はa(href = https ? "https://example.com" : "http://example.com")というふ うに三項演算子で場合分けができます。
  • class属性に限り{class1: condition1, class2, condition2}と条件分けで複数の判 定ができます。conditionの箇所にはjavascript同等の評価演算子がつかえます。た だし、クラス名にハイフンなどjavascriptの変数名に使用できない文字を含む場合 は引用符でくくって{"class1": condition1 ...とします。ちなみに、クラス属性 以外に同様の構文を指定した場合はただのオブジェクトして文字列化されてしまう ようです。
• class属性の条件分けなどが不要な場合はdiv.classnameと短く記述も出来ます
  • idの場合はdiv#identifierとも書けます
  • classとidを組み合わせdiv.className#identifierもしくは div#identifier.classNameと記述も可能です。
  • 複数のクラスを指定したい場合はdiv.class1.class2.class3などつなげていくこ とも可能でした。
  • 当然そのまま属性も記述出来ます。input#id1.class1(name='name1')
• ちょっと原因が特定しづらいエラーとしてThe end of the string was reached with no closing bracket foundに遭遇しがちですが、たいてい引用符を閉じてないか input (とスペースを空けてしまっている、もしくは単に閉じてなかったかなので、 エラーが出ればそこを重点的にチェックしてください。
  • また、属性と属性の間の,を忘れていても同様のエラーになったと思うのでエラー 時はここもチェックします。
• |や.を使えば長いコンテンツを続けて打ち込めるようです。
• input(...)の括弧は以下のように改行できました。{}なども改行できるようです。

tag (a, b, c, d) content
tag (a, b,
   c, d) content