LoginSignup
7
7

More than 5 years have passed since last update.

javascript HTML templateエンジン Jade の4つの呪文を使いこなそうの巻

Last updated at Posted at 2013-06-22

jadeの文法ドキュメント、githubのreadme読めってちょっと雑なのでは…
なんか読みにくいので、日常的にテンプレートエンジンを使ってるよって人向けに、特徴的なところだけ把握しやすいようにまとめておく。

ここで一通りの機能がサンプルコードと共にライブデモで触れるようになってるらしいのでこちらもオススメ。
http://naltatis.github.io/jade-syntax-docs/


extends filename

上位テンプレートを指定して継承するための呪文。
多重継承もできる。

block blockname, block prepend blockname, block append blockname

継承した先でblockを上書きしたり、前後に内容を追加したりするための呪文。
上位テンプレートでblock hogeと指定しておいた部分に、下位テンプレートでblock hogeを呼び出して上書きなどができる。

include filename

部分テンプレートを指定して取り込むための呪文。

変数のスコープが暗黙的に継承されるのが特徴。

include指定されたファイルの拡張子に応じてmarkdownとかcssとかまったく別の文法のファイルや、生のHTMLファイルもincludeできるらしく、なんか便利なことができそうだと思った。
手動で更新するテキストまわりだけmarkdownファイルに分離しておけばプログラマ以外でも手軽に文言を更新できそうとかね。

mixin name(arg1, arg2, ...)

任意の数の引数を持つ、名前付きの部分テンプレートをその場で定義するための呪文

引数は持たないことも可能。その場合単なるその場で定義できる名前付き部分テンプレートになる。

includeが変数のスコープを勝手に呼び出された場所のコンテキストにしてしまうのに対して、テンプレートに明示的に変数を引数として渡したいときに便利そう。

繰り返し部分の中身をpartial templateにしたい、みたいな要求は、ほとんどその場でのmixinに分けておく、で足りるんじゃないだろうか。
他のファイルでも使いまわしたい共通部分だけincludeを使うのがよさそうですね。

mixinを含むテンプレートをextendsやincludeしたらそのテンプレートでもmixinが使えるのかとか気になるけどそういう複雑なシチュエーションは特にドキュメントに書いてないのね。


ほかにもcaseとかifとかeachとか色々あるけどそのへんは他のテンプレートでもよくある物なので割愛です。


7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7