こんにちは。中川です。みなさまご無沙汰です。お元気でしょうか。
さて新しい案件で、何か新しいことをしてみようかと思い、jadeを使ってみようかと思いました。
で、ひと通り調べたことをメモしていきます。（注：以下は全てMacでの操作になります）
■jade（http://jade-lang.com/(外部サイトに飛びます)）
githubのページには、
「Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node. 」
（Hamlに影響を受けた、Node.jsのHTMLテンプレートエンジン。）
と書かれています。
これだけはいまいちピンとこないので、さっそく使ってみることにしました。
■インストール
jadeはnode.jsで動くので、node.jsがインストールされている状態で（インストールしていない場合はhttp://nodejs.org/からインストール）、ターミナルから
npm install -g jade
でインストールされます。
jade --version
で、バージョン名が出ればインストールされています。
■jadeでの記法
これで書き始めることができるわけですけど、記法として特徴を上げると以下が挙げられます。
- <>のカッコなし
- cssとidの記法がcssのセレクタと同じ
- 関数が使える
- インデントが必須（インデントで親子関係を表す）
■jadeで記述
で、さっそく書いてみると
【index.jade】
!!!5 html(lang="ja") head meta(charset="utf-8") style(src="css/style.css") title スーパークールなサイト body h1#pageTitle スーパークールなサイト h2.subTitle これはほんまクールやで // ここから本文です p LAST OF USが面白くて危うく人生ダメにするところでした。
少し説明を加えると、
- !!!でdoctype宣言を行います。後ろに「5」をつけることで、html5のdoctype宣言になります。
- idとclassはEmentなどで書く方法と同じです。
- //を入れると、その行はコメントになります。
- pの後ろにテキストを書けば、で囲われます。
- 属性などは（）で括ってその中に記載します。
これをindex.jadeという名前で保存して、
jade index.jade
とターミナルに打ち込むと
rendered indx.html
という表示が出てindex.htmlというページが生成されています。
（このへんはgrunt(外部サイトに飛びます)使ってゴニョゴニョするのが一番ですね）
しかし、ソースを見てみると
【index.html】
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><style src="css/style.css"></style><title>スーパークールなサイト</title></head><body><h1 id="pageTitle">スーパークールなサイト</h1><h2 class="subTitle">これはほんまクールやで</h2><!-- ここから本文です--><p>LAST OF USが面白くて危うく人生ダメにするところでした。</p></body></html>
Wao!!これでは可読性が低すぎるY0！ なので、
jade index.jade --pretty
と一言添えてあげて、再度、ターミナルで入力すると
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style src="css/style.css"></style>
<title>スーパークールなサイト</title>
</head>
<body>
<h1 id="pageTitle">スーパークールなサイト</h1>
<h2 class="subTitle">これはほんまクールやで</h2>
<!-- ここから本文です-->
<p>LAST OF USが面白くて危うく人生ダメにするところでした。</p>
</body>
</html>
というような見やすいHTMLに生成されます。 このように、jadeでhtmlを書くことは可能ですが、慣れない状態でいきなり最初から全部これで書くのはちょっと時間が掛かりそうで、急ぎの案件とかだとちょっと危険かなと思いました。 ただ、書かないことには慣れてこないので、その匙加減はなかなか難しいところです。。。
■テンプレートとしてのjade
ただ、最初に書いたように、jadeはテンプレートエンジンなのでテンプレートとしての使い方を見てみたいと思います。 jadeにはblockとextendsという方法を使って、テンプレートの継承を行う方法と、 Includeという方法を使って、他のjadeファイルを目的のファイルに読み込方法があります。 今回は、includeを試してみます。
nav ul li a(href="#") menu01 li a(href="#") menu02 li a(href="#") menu03 li a(href="#") menu04
という、よくあるメニューをmenu.jadeという名前で、includeディレクトリに保存して
!!!5 html(lang="ja") head meta(charset="utf-8") style(src="css/style.css") title スーパークールなサイト body include include/menu h1#pageTitle スーパークールなサイト h2.subTitle これはほんまクールやで p LAST OF USが面白くて危うく人生ダメにするところでした。
このように、先ほどのindex.jadeのbodyタグの下（7行目）に、インクルードさせて展開すると
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style src="css/style.css"></style>
<title>スーパークールなサイト</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
<li><a href="#">menu04</a></li>
</ul>
</nav>
<h1 id="pageTitle">スーパークールなサイト</h1>
<h2 class="subTitle">これはほんまクールやで</h2>
<!-- ここから本文です-->
<p>LAST OF USが面白くて危うく人生ダメにするところでした。</p>
</body>
</html>
という形で、includeされていたものが展開されてクリーンなhtmlが生成されます。
Ohh...what a finish!
このようにインクルードを使うと、部品部品で管理することが可能なので、
CMSを入れない案件などで、ページ全体に関わる修正が発生した場合でも、問題なく対応できるはずです。
「SSIを使えばいいがな」とも思うのですが、SSIはサーバーによっては使える、使えないがあったり
ローカルで確認できないといった理由があるので、僕は好きではないです。
これで静的なページを大量に作成した場合に発生するような修正があっても、
無駄に時間を掛けることなく、仕事を進められることができます。
今回は触れていないですが、その他にもifやwhileなどの関数を使うこともできるのでページに応じた、柔軟な使い方ができるのではないかと思います。
■まとめ
今までテンプレートというと、Dreamwewaverのテンプレート機能が思い浮かびますが、
（よく分かってないだけですけど）変なエラーが発生したりするので嫌いでしたし、
そもそもDreamweaverを使う機会が減っているので、それに取って代わる方法としては十分だと思います。
その点、jadeを使えばその部分を補うことができるので、使いやすいのではないかなと思います。
学習コストは多少かかりますが、それに費やした時間は後の作業時間の短縮、そこからの早い帰宅＆プライベートの充実という形で自分に返ってくるはずです。
冒頭にも書いていましたが案件で使う前に自分で試してみようかと思ってたので、実際の案件で使うかどうかは現在のところ未定ですが、学んだことはきっとどこかで生きるのではないかなと思っています。（良い感じで締めました）