Jade で始める新しい HTML の書き方

Jade - Template Engine
http://jade-lang.com/


サンプルコードは以下の URL の README.md になります。

URL: https://github.com/kfug/handson/tree/master/try_jade


HTML がこんな風に書けます!

Jade でマークアップ!

doctype html
html(lang='en')
  head
    title Try Jade ハンズオン
    script.
      foo = true;
      bar = function () {};
      if (foo) {
        bar(1 + 5)
      }
  body
    h1 Jade
    #container.col
      p You are amazing
      p
        | Jade is a terse and simple
        | templating language with a
        | strong focus on performance
        | and powerful features.

Jade ファイルが変換されたらこうなります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Try Jade ハンズオン</title>
    <script>
      foo = true;
      bar = function () {};
      if (foo) {
          bar(1 + 5)
      }
    </script>
  </head>
  <body>
    <h1>Jade</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      </p>
    </div>
  </body>
</html>

ここから先は Node.js を使用します。

https://nodejs.org/en/

Node.js の環境がない方はオンライン上でコードを書けるサービス CodePen で試していただくことができます。
※ただし一部の機能については使用していただくことができません。


やってみよう

サンプルファイルを ダウンロード するか、git 経由で clone します。
$ git clone https://github.com/kfug/handson -b try_jade

zip ファイルをダウンロード

作業ディレクトリに移動
$ cd handson/

// or

$ cd [zip ファイルを展開したディレクトリ]/handson-try_jade/
パッケージのインストール
$ npm install
テキストエディターで、index.jade を編集

編集するファイルはこちらにあります。

handson/jade/index.jade

ご使用されてるテキストエディターで、index.jade を開き、以下をコピペしてください。

//- index.jade
doctype html
html(lang='en')
  head
    title Try Jade ハンズオン
  body
    h1 Hello Jade !!

貼り付けできましたら保存してください。

Jade ファイルを HTML ファイルにコンパイル

以下コマンドを実行

$ gulp jade

もしくは、

$ npm run jade

handson/public/ ディレクトリに HTML ファイルが作成されていますか??


もしつまずいたら Jade のコードをオンラインで変換できる、Jade Converter が便利です。

http://html2jade.org/

http://html2jade.vida.io/

http://html2jade.herokuapp.com/


基本的な機能

書き方

※以下サンプルコード内の半角スペースは必ず必要です。

//- index.jade
doctype html
html
  head
    title Try Jade ハンズオン
  body
    //- 改行したい
    p
      | 改行
      br
      | したい

    //- 改行して `span` タグで囲いたい
    p
      | 改行して
      br
      span `span` タグで囲いたい

    //- リンクの挿入
    a(href="http://kfug.jp/frontconf2016/") link

    //- id, class の付与
    div#id
      | div タグに id が付与されます。

    div.class
      | div タグに class が付与されます。

    div#id.class
      | div タグに id と class が付与されます。

    #id.class
      | タグを省略すると div タグに変換され、id と class が付与されます。

    //- ul タグの中に a タグ挿入
    ul
      li
        a(href="http://kfug.jp/frontconf2016/") link
      //- このようにも書けます。
      li: a(href="http://kfug.jp/frontconf2016/") link

CodePen で見る

変数

//- index.jade
doctype html
html
  head
    title Try Jade ハンズオン
  body
    - var title = "タイトルだよ";
    - var author = "関西フロントエンドUG";
    - var theGreat = "FRONTEND CONFERENCE 2016";

    h1= title
    p I love #{author}
    p Todays event is #{theGreat} !

CodePen で見る

Iteration(繰り返し処理)

http://jade-lang.com/reference/iteration/

//- index.jade
doctype html
html
  head
    title Try Jade ハンズオン
  body
    //- こんな風に書けたり、
    ul
      each val in [1, 2, 3, 4, 5]
        li= val
    //- こんな風に書いたり、
    ul
      each val, index in ['zero', 'one', 'two']
        li= index + ': ' + val
    //- こんな風に書いたりできます。
    ul
      each val, index in {1:'one',2:'two',3:'three'}
        li= index + ': ' + val

CodePen で見る

個人的によく使うやつ

select(name="birthday_year", required)
  option(value='', selected='selected') -
    - var n = 1990
    while n <= 2016
      option(value=n + '年')
        =n++
        | 年

select(name="birthday_month", required)
  option(value='', selected='selected') -
    - var n = 1
    while n <= 12
      option(value=n + '月')
        =n++
        | 月

select(name="birthday_day", required)
  option(value='', selected='selected') -
    - var n = 1
    while n <= 31
      option(value=n + '日')
        =n++
        | 日

CodePen で見る

Filters

http://jade-lang.com/reference/filters/

※Markdown や CoffeeScript を Jade ファイル内に記述し HTML に変換する場合は、別途必要なパッケージがございます。

doctype html
html
  head
    title Try Jade ハンズオン
  body
    //- Markdown が書ける
    :markdown
      # Markdown が書けた

      文章が入ります。

    //- CoffeeScript が書ける
    script
      :coffee-script
        console.log 'This is CoffeeScript'

※CodePen ではみれません。


強力な機能

Includes(外部ファイルの取り込み)

http://jade-lang.com/reference/includes/

サンプルファイルを sample1/ にご用意しております。

handson/sample1/index.jade
handson/sample1/_header.jade
handson/sample1/_footer.html

jade/ ディレクトリ内に sample1/ ディレクトリを作成し以下を作成します。

//- jade/sample1/index.jade
doctype html
html
  //- ここで head.jade を呼び出し
  include ./_head.jade
  body
    h1 Try Jade ハンズオン
    p Hello! Jade
    //- ここで _footer.html を呼び出し
    include ./_footer.html
//- jade/sample1/_head.jade
head
  title Try Jade ハンズオン
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')
<!-- jade/sample1/_footer.html -->
<div id="footer">
  <p>Copyright (c) KFUG</p>
</div>

3ファイル書けたら、以下コマンドを実行

$ gulp jade

もしくは、

$ npm run jade

handson/public/sample1/index.html が作成されていますか??

コンパイル後の HTML

<!doctype html>
<html>
  <head>
    <title>Try Jade ハンズオン</title>
    <script src='/javascripts/jquery.js'></script>
    <script src='/javascripts/app.js'></script>
  </head>
  <body>
    <h1>Try Jade ハンズオン</h1>
    <p>Hello! Jade</p>
    <div id="footer">
      <p>Copyright (c) KFUG</p>
    </div>
  </body>
</html>

※CodePen ではみれません。

Extends(テンプレートの継承)

http://jade-lang.com/reference/extends/

サンプルファイルを sample2/ にご用意しております。

handson/sample2/index.jade
handson/sample2/_layout.jade

jade/ ディレクトリ内に sample2/ ディレクトリを作成し以下を作成します。

//- jade/sample2/_layout.jade
doctype html
html
  head
    //- block と書いておくと要素を挿入できる
    block title
      //- 上書き用の title が設定されていなければこちらが表示されます。
      title Default title
  body
    //- block と書いておくと要素を挿入できる
    block content
//- jade/sample2/index.jade
extends ./_layout.jade

//- _layout.jade の title を上書きしてます。
block title
  title Article Title

//- _layout.jade の body に追加
block content
  h1 My Article

3ファイル書けたら、以下コマンドを実行

$ gulp jade

もしくは、

$ npm run jade

handson/public/sample2/index.html が作成されていますか??

コンパイル後の HTML

<!doctype html>
<html>
  <head>
    <!-- 上書きされたタイトルが出力される。 -->
    <title>Article Title</title>
  </head>
  <body>
    <h1>My Article</h1>
  </body>
</html>

※CodePen ではみれません。

Mixins

http://jade-lang.com/reference/mixins/

mixin pet(name)
  li.pet= name

ul
  +pet('cat')
  +pet('dog')
  +pet('pig')

CodePen で見る

個人的によく使うやつ

グローバルナビなどに。

mixin gnav(id, ...items)
  ul(class=id)
    each item in items
      li
        a(href="#{item.dir}")
          | !{item.pageName}

+gnav(
  'gnav',
  {pageName: 'TOP', dir: 'http://example.com/'},
  {pageName: 'ABOUT', dir: 'http://example.com/about/'}
)

CodePen で見る

パンくずリスト

mixin breadcrumb(...items)
  nav
    .breadcrumbs
      div(itemscope='itemscope', itemtype='http://data-vocabulary.org/Breadcrumb')
        a(href='/', itemprop='url')
          span(itemprop='title')
            | Home
        | &gt;
      each item in items
        div(itemscope='itemscope', itemtype='http://data-vocabulary.org/Breadcrumb')
          a(href='/#{item.dir}', itemprop='url')
            if(item.next)
              span(itemprop='title')
                | #{item.pageName}
              | &gt;
            else
              span(itemprop='title')
                | #{item.pageName}

+breadcrumb(
  {pageName: '2階層目', dir: 'second/', next: true},
  {pageName: '3階層目', dir: 'third/', next: false}
)

CodePen で見る


gulp を使ってコンパイル

gulp でのコンパイルタスクの記述は gulpfile.js を参考にしてください。

Jade を使って簡単な静的サイトなブログが作れる

WintersmithHexo などの Node.js 製の静的サイトジェネレータでも Jade のコンパイルに対応しているものも多いです。

その他テンプレートエンジン

Jade の記法が特殊で取り扱いしづらいという場合には、同じく Node.js 製のテンプレートエンジンとしてメジャーな EJS という選択肢もあります。

EJS
http://ejs.co/


Let's Try Jade