jadeのテンプレートを触ってみた

こんにちは。中川です。みなさまご無沙汰です。お元気でしょうか。
さて新しい案件で、何か新しいことをしてみようかと思い、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などの関数を使うこともできるのでページに応じた、柔軟な使い方ができるのではないかと思います。
　
　