jadeといえばnode.jsのテンプレートエンジンでexpressなどのフレームワークと組み合わせて使うことが多いと思うが、単に静的ページを作るときにも使うことができる。jadeを使えば、HTMLを素でコーディングする場合と比べて次のような利点がある。なお、jadeと似たようなものでHamlやzen codingがある。
-
<div>のとじ忘れによるレイアウト崩れで悩まない - 変数が使えるので、文言の置き換えが簡単
- ループができるので、HTMLが繰り返しになる部分が簡単
jadeコマンドをインストールしておく:
npm install -g jade
jadeでページを作る:
src/index.jade
//- 変数定義
title = "ぺーじのたいとる"
//- 以下HTML
doctype 5
html
head
meta(charset="utf-8")
title= title
body
h1= title
p コンテンツ
あとはコマンド叩くだけ:
jade -P src/*.jade -O public/
できあがり:
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ぺーじのたいとる</title>
</head>
<body>
<h1>ぺーじのたいとる</h1>
<p>コンテンツ</p>
</body>
</html>