はじめてのJade導入メモ - みかづきブログその3

Jadeとは

Jade is a terse language for writing HTML templates.

訳）ジェイドは、HTMLテンプレートを作成するための簡潔な言語です。

導入方法

npm install jade --global

なんともらくらくでインストールできます。そう。npmがあれば。

記法

doctype html
html(lang="ja")
  head
    title ページタイトル
  body
    #wrapper
      h1.ttl タイトル
      p.txt テキスト

こんな感じで書きます。

タグ名#ID名.クラス名 テキスト

的な感じですね。divタグだけはタグ名を省略してOKです。
インデントで親子関係を表現します。

意外と直感的です。

コンパイル方法

jade コンパイル元

これだけで同一階層にhtmlを生成してくれます。
ちなみに先程のjadeをコンパイルすると、

<!DOCTYPE html><html lang="ja"><head><title>ページタイトル</title></head><body><div id="wrapper"><h1 class="ttl">タイトル</h1><p class="txt">テキスト</p></div></body></html>

こんな感じになります。
そうなんです。基本的に改行がなくなってしまうのです。

見やすいように改行すると、

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ページタイトル</title>
  </head>
  <body>
    <div id="wrapper">
      <h1 class="ttl">タイトル</h1>
      <p class="txt">テキスト</p>
    </div>
  </body>
</html>

こんな感じですね。今回は以上です。