Jade as Prototype Language

メッセージ

Node.js用テンプレートエンジンであるJadeはHTMLから本当に必要な部分だけを抜き出した言語。そのシンプルながら非常に強力なテンプレートエンジンはモダンウェブ開発に欠かすことが出来ないプロトタイプを作る言語として適している。
今回はプロトタイプ言語としてのJadeをJadeの基礎を踏まえて紹介していこう。

アウトライン

JadeはHamlに影響を受けて生まれた言語

  • Haml / HTML abstraction markup languade
  • JadeはそのHamlに影響を受けたJavaScript実装のテンプレート言語
  • 例:
!!!
html
  head
    title my jade template
  body
    h1 Hello #{name}

このJadeに{"name": "Bob"}をデータとして渡すと

<!DOCTYPE html>
<html>
  <head>
    <title>my jade template</title>
  </head>
  <body>
    <h1>Hello Bob</h1>
  </body>
</html>

というHTMLに変換される。

  • 閉じタグ忘れもなく、<>で囲む必要もない
  • #idを付与するには: div#id
  • .classを付与するには: div.class
  • 複数クラスは: div.class1.class2
  • これにIDも付与できる: div#id.class1.class2
  • divを書くのは面倒?: #idまたは.classのみでdivを補完
  • テキストは: p テキスト
  • 複数行に渡るテキストは:
p
  | foo bar baz
  | rawr rawr
  | super cool
  | go jade go
  • コメントもエレガント: // JavaScriptのコメントと同じ
  • 入れ子になるタグも:
ul
  li.first
    a(href='#') foo
  li
    a(href='#') bar
  li.last
    a(href='#') baz

インストール

  • npm install jade
  • グローバルとしてインストールするには: sudo npm install -g jade
  • jade.jsはクライアントサイドでJadeをHTMLに変換できる。
  • Jade内でmarkdownを利用するために以下のどれか1つをインストール。(個人的にはmarkedだとGitHubで採用されている形式が利用できるのでおすすめ)
    • markdown.js / sudo npm install -g markdown
    • node-discount / sudo npm install -g discount
    • marked / sudo npm install -g marked

プロトタイプ言語

  • HTMLベースのプロトタイプはデベロッパ向け?
  • Jadeはシンプルで強力 === HTMLをより簡単により早く記述できる。
  • プロトタイプ言語という提案。
  • Jadeをテンプレート言語として使うにはnode.jsが必要。しかし、プロトタイプ専用言語として利用すれば利用シーンが広がる。

コンテンツファースト時代のデザイン手法

  • Stehen Hay氏はResponsive Design Workflowにて:
    • Designing in Text → ワークフローの早い段階でコンテンツとなるテキストをmarkdownを使って構造化のデザインをする手法について紹介している。
  • Filter in Jade: markdownをJadeのフィルターとして利用できる
  • markdownはデザイナ、ディレクタ、デベロッパの共通言語として利用できるほどシンプルで、このケースには十分な機能を有している。
    • 見出し、テキスト、リンク、リストなど

使い回しができるパーツ

  • Includes in Jade:
./layout.jade
./includes/
  ./head.jade
  ./foot.jade

上記の様なファイル構造だとして

html
  include includes/head
  body
    h1 My Site
    p Welcome to my super amazing site.
    include includes/foot

このようにあらかじめ作成したコンポーネント群を呼び出すことができる。

  • JavaScriptやCSSでも同じ傾向にあるようにJadeを使えばHTMLでもモジュール方式の開発ができることになる。
  • Jonathan Snooks氏はSMACSSでSassを使ったモジュール方式の開発用に以下のようなディレクトリ構成を提案している:
./layout/
  ./grid.scss
  ./alternate.scss
./module/
  ./callout.scss
  ./bookmarks.scss
  ./btn.scss
  ./btn-compose.scss
./base.scss
./states.scss
./site-settings.scss
./mixins.scss
  • Jadeを使えば非常に近しい構成を作ることが可能だ:
.index.jade
./includes/
  ./system/
    ./head.jade
    ./foot.jade
  ./layout/
    ./grid.jade
  ./module/
    ./btn.jade
    ./nav.jade
  • デザイナが編集を行うのはindex.jadeだけで、デベロッパと協力して必要なモジュールを用意してもらえばいい。
  • よく使うパーツがあれば、それを抽象化しモジュールとしてコーディングを行うのはデベロッパに任せればいい。
  • CSSプリプロセッサを利用していれば、この構造に合わせてCSSも用意しておけば関係性を明確にできる。

ミックスインとテンプレート継承

  • Jadeにもミックスインそして、extendsと似たテンプレート継承がある。
  • デベロッパはプロトタイプの作成を柔軟に、高速に行うためにこれらの機能を上手に使ってテンプレートを抽象化することが可能。

テンプレート言語としてのJadeの使い方

  • コマンドラインツールを使ってJadeからHTMLに変換を行う。
  • GUI:
  • 使うコマンドは1つ: jade --pretty JADE.FILE (動画デモ)

ProtoJadeライブラリ

  • プロトタイプ言語としてのJadeのベースとなるオープンソースプロジェクト (作成予定)
  • 基本機能(草案):
    • HTML5 Boilerplateをベースに
    • [Twitter Boostrap]にあるUI群をモジュールとして実装
    • Stylusを利用
    • Componentsライクな構造とモジュール群の管理、拡張
    • StyleDoccoを利用してスタイルガイドを作成、プロトタイプライブラリページとする

リサーチ


Back Number