Jade チュートリアル

[Home] | [Back]

2015/07/26 更新


Jadeとは

JadeはNode.jsのHTMLテンプレートエンジンで、Slimによく似ているが異なる部分もある。

Jade GitHub |  Jade Lang


インストール

Node.jsをインストールすると、npmコマンドが利用できるようになる。
その後、下のようにしてインストールする。
$ npm install jade

HTMLへの変換

jadeソースをHTMLに変換するには、次の例のようにする。-Pを省略したときは、uglyソースに変換される。
jade -P sample1.jade

使用例

レイアウトを使わない例

doctype
html
  head
    meta(charset="utf-8")
    title サンプル
    link(rel="stylesheet", href="sample.css")
  body
    h1= title
    p
      a(href="/index.html") HOME
    p

レイアウトを使う例

レイアウトを使うとヘッダ部分などをレイアウトファイルに移して、コンテンツだけを書けばいいようにる。

layout.jade

doctype
html
  head
    meta(charset="utf-8")
    title サンプル
    link(rel="stylesheet", href="sample.css")
  body
    block content

extendsディレクティブを使ってレイアウトファイルを指定する。このファイル内容が "block content" 部分に挿入される。

extends layout

h1= title
  p
    a(href="/index.html") HOME
  p

Node.jsでの使用方法

次の関数は、./viewsフォルダにあるファイル名 filename で与えられるファイルをレンダーするものです。varsは動的に埋め込む変数の連想配列です。
exports.jade = function(filename, vars) {
  jade = require 'jade'
  htm = fs.readFileSync("./views/" + filename, 'utf-8')
  fn = jade.compile(htm)
  return fn(vars)
}

文法

doctype

HTML5 の場合は最初の記法を使用します。

(注意) 旧バージョンの!!!は使えなくなりました。


タグの書き方

一般的な注意:Jadeではインデントでタグの内容かどうかを区別するので、インデントが間違っているとエラーになる。インデントはタブ文字などを使う。

タグ名の後に文字列を書くとそのタグで囲まれる。

p この部分はタグpで囲まれる。

タグの入れ子はインデントによる。(注意) 誤動作の原因はインデントが正しくないことが多い。

ul
  li
    a(href="#link1") Link1
  li
    a(href="#link2") Link2

複数行の場合は、インデントを入れて次の行に書いてもよい。タグの内容が継続していることを示すため|を入れて示す。

p
 | この部分はタグpで囲まれる。
 | この部分はタグpで囲まれる。
 | この部分はタグpで囲まれる。

あるいはタグの後にドットを付けると、上と同じように複数行の内容を表現できる。

p.
 この部分はタグpで囲まれる。
 この部分はタグpで囲まれる。
 この部分はタグpで囲まれる。

scriptタグやstyleタグの中身は複数行になることが多いので、この方法が見やすく便利である。

script.
 function test(x) {
  ...
  ...
 }

属性は()の中に書く。

h1(style="text-align:center") Title
 中央に表示
html(ng-app="app1", lang="ja_jp")
 複数属性を指定する場合。区切りはカンマの他、空白や改行でも問題ない。

Boolean 属性は true / false も使用できる。

<input type="checkbox", name="check1", checked=true />

style 属性は JSON 風の書き方ができる。

<div(style={color:"red", margin-left:5%})

識別名は#、クラスはドットで指定できる。

div.range1 あるクラスで指定する領域
div#name1 IDで指定する領域

div 要素で識別名やクラスを指定するときは "div" 自体を省略できる。

.range1 あるクラスで指定する領域
#name1 IDで指定する領域

コメント

コメントは'//'で開始する。
// これはコメントです。
// + 改行で開始したはインデントブロックはブロックコメントになる。
//
   これはブロックコメントです。
   これはブロックコメントです。

動的変数

動的変数 (HTMLに埋め込むNode.jsの変数) はタグの後に=を付けて変数名を書く。
p= name

変数の内容に'&'や'<'が含まれている場合、デフォルトでは'&amp;'や'&lt;'に変換される。これを避けるには=の代わりに!=を使用する。
p!= name

#{ }を使用して変数をドキュメントに埋め込むこともできる。
img(src="images/#{circle}")

!{ } は < や & をエスケープしない。

- code = "<br>";
!{code}

フィルタ

フィルタは Jade に他の言語 (JavaScript は使用しなくてよい) を埋め込むとき使用する。

script.
  :coffee-script
    console.log 'This is CoffeeScript.'

JavaScript の埋め込み

行の先頭を "-" にすると JavaScript コードとみなされる。

- var i = 0;
- while (i < 10) {
p Current i #{i}
-  i++;
- }

制御文

Slimでは - で制御文を開始していたが、Jadeではこれは不要である。ただし、JavaScriptのコードは - を先頭に付ける。

if文

if foo == 'x'
  p!= x
else
  p= x

case文

case code
  when 0
    p zero
  when 1
    p one
  when 2
    p two
  default
    p  

each文

- var items = [1, 2, 3]
each item in items
  li= item

あるいは
- var items = [1, 2, 3]
for item in items
  li= item

mixin

Mixin機能は再利用可能なブロックを定義して使用可能にする。
mixin list
  ul
    li foo
    li bar
    li baz

+list()
+list()

include

Include機能は、他ファイルを読み込んでincludeの場所に挿入する。
include other.jade

サンプル

リンクのリスト

a(name="Top")
h1(style="color:crimson;padding:5px;")= title

a(href="/") [Home]

ul
  li
    a(href="/a") anchor
  li
     a(href="/b") block
  li
     a(href="/c") code
  li
     a(href="/f") form
  li
     a(href="/i") image
  li
     a(href="/l") list
  li
     a(href="/s") style
  li
     a(href="/t") table
  li
     a(href="/it") iteration
  li
     a(href="/co") conditional
  li
     a(href="/fi") filter
  li
     a(href="/mi") mixin
  li
     a(href="/in") include


p  
a(href="#Top") [Top]
p  

ブロック

h1= title

p
  a(href="/") [Home]

h2 jade command line
p(style="font-size: large; color:teal")
  $ jade [options] [dir|file ...]
pre(style="font-size: medium")
  |-h, --help         output usage information
  |-V, --version      output the version number
  |-O, --obj <str>    javascript options object
  |-o, --out <dir>    output the compiled html to <dir>
  |-p, --path <path>  filename used to resolve includes
  |-P, --pretty       compile pretty html output
  |-c, --client       compile function for client-side runtime.js
  |-D, --no-debug     compile without debugging (smaller functions)
  |-w, --watch        watch files for changes and automatically re-render

h2 inline tag
p 
  |ブロック内に直接タグを書くことができる。<br />
  |<b>太字</b>なども簡単に書ける。

p.
  タグ名の後にドットを付けるとタグブロックとして扱われる。<br />
  (例)<br />
    p.<br />

|タグ名を何も書かなくてもブロックになる。<br />
|その場合は、divタグとして扱われる。

p!= '!=を使うと、HTMLタグが<u>変換されず</u>内容に反映される。'


JavaScriptのコードを使う例

- var hostname = "hostname = " + os.hostname();
- var tmpdir = "tmpdir = " + os.tmpdir();
- var platform = "platform=" + os.platform();


h1= title

p
 a(href="/") [Home]

h2(style="color: green") os 名前空間
ul
 li= hostname
 li= tmpdir
 li= platform

br

h2(style="color: green") process 名前空間
ul
 each val, index in process.config.variables
  li= index + ":" + val

この例でosは外部のjsファイルで定義する必要がある。例えば、Expressの場合、次のようにする。

var os = require('os');

exports.c = function(req, res) {
  res.render('c', { title: 'code', os:os })
};


フォーム

// f: form
h1(style="color:#5030f0; padding:5px;")= title

p
 a(href="/") [Home]

form(method="post", action="/f2")
 |Name: 
 input(type="text", name="Name", size="60")
 br
 |Yes/No: 
 input(type="checkbox", name="Yes")
 br
 br
 input(type="submit", value="Submit")



画像

// i: image
h1= title

p
 a(href="/") [Home]

img(src="images/#{pic1}")


// table
h1= title

p
 a(href="/") [Home]

table(border="1")
 - for (i = 0; i < rows; i++)
  tr
   - for (j = 0; j < cols; j++)
    - s = i.toString() + ", " + j.toString();
    td= s


リスト

// list
h1(style="color: #404080")= title

p
 a(href="/") [Home]

h2 eachを使う例
ol
 each val in ['池袋', '目白', '高田馬場', '新大久保', '新宿']
  li= val
p  

h2 JavaScriptのforを使う場合
ul
 - for (i = 1; i < 5; i++)
  - y = 2 * i * i - 4 * i + 10
  li= y

p  

スタイル


// style
h1(style="color: darkgreen;")= title

p
 a(href="/") [Home]

- for (p = min; p <= max; p++)
 div(style="font-size:#{p}pt")= "Point " + p

上の例でminとmaxは外部のjsファイルで下のように定義している(Expressを使用する場合)。

exports.s = function(req, res) {
  res.render('s', { title: 'style', min:10, max:24 })
};