Edited at

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

More than 3 years have passed since last update.


事前準備

nodenpmgrunt-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/

includemixin用のパーツ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で一括管理しています。

p1.png


手順



  1. Gruntfile.js12〜44行目で、jade→HTML書き出しの設定をしています。


  2. dataプロパティにオブジェクトデータを渡すとjade内で使えるようになります。

p1_2.jpg

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

p1_3.jpg

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

p1_4.jpg

スクリーンショットc



include:コードの分割管理

ページ共通要素のhead.header.footerを分割し、それぞれのページに

読み込んでいます。

p3.png


手順



  1. include 【読み込み先jadeパス】でjadeを読み込む

  2. Gruntで設定したdataは読み込み先も読み込み元と同じに使える


extends:コードの差分変更

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

p4.png


手順


  1. 継承元PC版jadeファイルの変更したい場所にblock 【任意の名前】を記述

  2. 継承先SP版jadeファイル先頭にextends 【継承元PC版jadeパス】と記述。

  3. 継承先SP版jadeファイルでblock 【継承元PC版で記述した名前】を記述、改行しインデントを下げて記述した内容が上書きされます。


  4. extendsincludeなどと併用はできないので注意が必要です

p5.png



mixin:引数による動的生成

ヘッダのナビゲーションリストを生成しています。

繰り返すコード、includeにするほどでもない小さいコードを分割するときにmixinを使用します。

p6.png


手順


  1. mixinは全て1ファイル(src/jade/components/_mixins.jade)にまとめ、includeしています


  2. mixin 【mixin名】(【引数】)+改行+1インデント+【生成したいコード】
    を記述します。【生成したいコード】内で引数を使用できます。引数は【,】で区切って複数指定できます

p6_3.png

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

p6_2.png


:zap:まとめ

JadeのJSONデータ読み込みとincludeextendsmixin機能によって

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