Jadeを使用した静的HTMLコーディング実践

• Jade は JST (JavaScript Templates) の一つであり、HTML を書くための軽量マークアップ言語 である Haml に影響を受けた JavaScript テンプレートエンジンでもあります。
• 日本語でJadeのリファレンス的な記事はみかけますが、一般的な静的HTMLサイト制作でJadeの機能を実際どのように使うかという所に踏み込んだものはなかったと思うので、本エントリーではそれをサンプルを通して解説します。
• Jadeの基本的な仕様は参考 > Jadeを参照ください。

事前準備

node、npm、grunt-cliが動作する環境を準備ください。
詳しくは参考 > Gruntを参照ください。

サンプルについて

以下構成で実案件制作を想定したサンプルを作成しました。

• PC版、SP版の2種類
• 各環境ごとに5ページのHTML
• ページの構成・内容はPC、SP版とも同じ。レイアウトのみ異なる

一式(Github) | Download / Demo

ROOT	説明
deploy	サイト書き出し環境
src	jade・jsonを格納
Gruntfile.js	Gruntファイル
package.json

SITE ROOT (deploy/)
css/	【PC版 CSSファイル】
img/	【PC版 画像ファイル】
js/	【PC版 JSファイル】
sp/	css/	【SP版 CSSファイル】
	font/	【SP版 アイコンフォントファイル】
	img/	【SP版 画像ファイル】
	js/	【SP版 JSファイル】
	extends.html	【SP版 extendsページ】
	include.html	【SP版 includeページ】
	index.html	【SP版 indexページ】
	json.html	【SP版 jsonページ】
	mixin.html	【SP版 mixinページ】
extends.html	【PC版 extendsページ】
include.html	【PC版 includeページ】
index.html	【PC版 indexページ】
json.html	【PC版 jsonページ】
mixin.html	【PC版 mixinページ】

src/jade/	説明
components/	include、mixin用のパーツjadeファイル格納ディレクトリ
pc/	PC版 jadeファイル格納ディレクトリ
sp/	SP版 jadeファイル格納ディレクトリ

手順

1. コマンドライン（Terminalなど）でダウンロードした解凍ファイルのROOTディレクトリに移動
2. npm install
3. grunt deployでHTML書き出し、grunt watch:deployでjadeの変更を監視し、HTML自動書き出し可能

---

JSON読み込み

全ページの

• メタ要素、シェアテキスト
• サイト共通のリンク

などをsrc/json/_common.jsonで一括管理しています。

手順

1. Gruntfile.js12〜44行目で、jade→HTML書き出しの設定をしています。
2. dataプロパティにオブジェクトデータを渡すとjade内で使えるようになります。

3.jadeDataFunc関数ではsrc/json/_common.jsonデータに加えてenv(環境)、page(HTMLファイル名)をマージしてからオブジェクトデータを渡しています

4. src/jade/components/head.jadeにてdataプロパティから渡された変数を指定します

---

include：コードの分割管理

ページ共通要素のhead、.header、.footerを分割し、それぞれのページに
読み込んでいます。

手順

1. include 【読み込み先jadeパス】でjadeを読み込む
2. Gruntで設定したdataは読み込み先も読み込み元と同じに使える

extends：コードの差分変更

先にPC版をコーディング後、extends（継承）機能を使用して、SP版を差分のみの変更で作成しています。

手順

1. 継承元PC版jadeファイルの変更したい場所にblock 【任意の名前】を記述
2. 継承先SP版jadeファイル先頭にextends 【継承元PC版jadeパス】と記述。
3. 継承先SP版jadeファイルでblock 【継承元PC版で記述した名前】を記述、改行しインデントを下げて記述した内容が上書きされます。
4. extendsはincludeなどと併用はできないので注意が必要です

---

mixin：引数による動的生成

ヘッダのナビゲーションリストを生成しています。
繰り返すコード、includeにするほどでもない小さいコードを分割するときにmixinを使用します。

手順

1. mixinは全て1ファイル（src/jade/components/_mixins.jade）にまとめ、includeしています
2. mixin 【mixin名】(【引数】)+改行+1インデント+【生成したいコード】 を記述します。【生成したいコード】内で引数を使用できます。引数は【,】で区切って複数指定できます

3. mixinの使用は+【mixin名】(【引数】)でできます。

まとめ

JadeのJSONデータ読み込みとinclude、extends、mixin機能によって
HTMLを分割・整理できコードの記述量を最小限にできます。
独自の記法を覚える必要があるので大変かと思ったのですが、一瞬で覚えられます。
普通のHTMLタグも使えるし混ぜて使っても問題になりません。

Jadeを使う前に本記事のサンプルと同じような構成のサイトを作るときはPC版とSP版で同じHTMLを使い、開発中はワンソースで作り、納品時にGruntでPC用、SP用で別々のデータを切り出していました。PC版とSP版のHTML差分はajaxで追加するようにしてたのですが、なぜそうしたかというと、RequireJS(r.js、text.js)のビルドシステムを使ってHTMLのテンプレート化が簡単にできるからでした。ajaxではなく静的なHTMLでそういうことができないかということでJadeを導入することにしました。

参考

Grunt

Web制作の作業を効率化するための自動化ツールGruntの導入方法とおすすめプラグインまとめ
http://liginc.co.jp/web/programming/node-js/102803

Jade

Jade について。
https://gist.github.com/japboy/5402844

Jadeの記法について（あまりまとまっていない）
http://qiita.com/sasaplus1/items/189560f80cf337d40fdf