2015.12.5

JavaScript テンプレートエンジン Jadeの使い方!

JavaScript テンプレートエンジン Jadeの使い方!

少し昔にJadeというJavascriptテンプレートエンジンが流行りました。
ある事情で使わなくなったので忘れていたのですが、ある案件で使用して
改めて、便利だなぁと思ったので使い方を書いておきます。

◆目次

    Jadeって?

    JadeとはJST(JavaScript Templates)の一つで、HTMLを書くための軽量マークアップ言語です!
    Hamlに影響を受けたJavaScriptテンプレートエンジンでもあります。

    *Hamlも同じく軽量マークアップ言語

    簡単にいってしまうとJadeはより楽にhtmlを書くテンプレートエンジン
    インデントでネストや閉じタグを定義しファイル分割や再利用インクルード、変数、代入、継承なんかしましょう的なやつです。

    あと、Jadeって名前がかっこいい

    Jade

    使用する前の準備

    gulpを使用する場合

    今回はgulpで使用する場合の説明をします。

    gulp-jade

    npmでインストールします。

    $ npm install gulp-jade --save-dev

    この記述でコンパイルできます。

    var gulp = require('gulp'),
        jade = require('gulp-jade');
    
    gulp.task('jade', function () {
      gulp.src('src/jade/*.jade')
        .pipe(jade())
        .pipe(gulp.dest('./static/'))
    });

    で、実際どんな感じで書くの?

    こんな感じで書きます。

    doctype
    html(lang="ja")
        head
            meta(charset="utf-8")
            meta(http-equiv="X-UA-Compatible", content="IE=edge,chrome=1")
            meta(name="viewport", content="width=device-width, initial-scale=1")
            meta(name="description", content="")
            meta(name="keywords", content="")
            meta(name="author", content="")
            meta(property="og:title", content="タイトル")
            meta(property="og:type", content="website")
            meta(property="og:url", content="http://任意のURL")
            meta(property="og:image", content="http://任意のURL/og_image.png")
            meta(property="og:site_name", content="")
            meta(property="og:description", content="")
            meta(property="fb:app_id", content="任意のID")
            title タイトル
            link(rel='stylesheet', href="css/style.css")
        body
            script(src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js")

    そして、コンパイルしてできたhtmlはこんな感じ!

    <!DOCTYPE html>
    <html lang="ja">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="description" content="">
            <meta name="keywords" content="">
            <meta name="author" content="">
            <meta property="og:title" content="タイトル">
            <meta property="og:type" content="website">
            <meta property="og:url" content="http://任意のURL">
            <meta property="og:image" content="http://任意のURL/og_image.png">
            <meta property="og:site_name" content="">
            <meta property="og:description" content="">
            <meta property="fb:app_id" content="任意のID">
            <title>タイトル</title>
            <link rel="stylesheet" href="css/style.css">
        </head>
        <body>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        </body>
    </html>

    これだけじゃ、あんまり行数が減ってなくて便利になったかわかりにくいですが
    閉じタグながなくなりプロパティが()のなかにかけたり便利になりました。

    普通のタグの記述について

    下記のように書きます。
    これは短くなって便利でしょう!

    h1#ttl
    h2.sub-ttile
    div
        p
    script(src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js")
    <body>
    <h1 id="ttl"></h1>
    <h2 class="sub-ttile"></h2>
    <div>
      <p></p>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </body>

    よくチュートリアルで紹介されているやつでコンパイルされなかったやつ

    !!!5

    このやり方で昔は

    <!DOCTYPE html>
    </html>

    と表示されていましたが
    現在はエラーになってしまします。
    なので現在は!!!5は使用不可!
    doctype 5も同様にエラーになります

    あとはインデントの付け方に気をつけましょう!

    Jadeの記述方法

    基本的な書きかた

    普通の書き方基本的にはこの書き方で書きます。
    タグの後に半角スペースを開けるとテキストが入力できます。

    div
      ul
        li ナビ01
        li ナビ02
        li ナビ03
    <div>
      <ul>
        <li>ナビ01</li>
        <li>ナビ02</li>
        <li>ナビ03</li>
      </ul>
    </div>

    インデントは統一してください。
    通常はスペース4こぶんだけど一箇所スペース2こぶんとかがあるとエラーが出ます。
    あとはインデントでネストされるので気をつけること

    インデントを使わずタグをネストさせる方法

    一行でネスト構造や改行を行う場合は:を使う

    div: h1 :title
    <div>
      <h1>:title</h1>
    </div>

    テキスト複数行入力する、開業する場合|もしくは.を使う

    p
      | テキスト
      | テキスト
      | テキスト
    p.
      テキスト
      テキスト
      テキスト
    <p>テキスト
    テキスト
    テキスト</p>

    直接htmlを記述する

    直にhtmlも書ける

    div
      p <a href="http://zoooooooom.jp/blog/">zoooooooom</a>
    <div>
      <p><a href="http://zoooooooom.jp/blog/">zoooooooom</a></p>
    </div>

    属性の記述

    属性を書く場合(属性名="")とする
    また、属性を改行して書くこともできます。
    属性同士の合会に,入れていますがなくても問題ありません。半角スペース入れればOK!

    a(href="http://zoooooooom.jp/blog/", target="_blank") zoooooooom ブログ
    <a href="http://zoooooooom.jp/blog/" target="_blank">zoooooooom ブログ</a>

    idとclassの書き方

    div#id.class
    <div id="id" class="class"></div>

    タグすらも省略することができます。
    そうすると<div>タグにidclassが付与されてコンパイルされる。

    #jade
    	.jade
    <div id="jade">
      <div class="jade"></div>
    </div>

    属性値をまるっと受け取る

    class属性のみ配列をそのまま受け取れる
    あまり使いドコロがわからないけど・・・

    - var classes = ['class1', 'class2', 'class3'];
            div(class=classes)
            div(data-class=classes)
    <div class="class1 class2 class3"></div>
    <div data-class='["class1","class2","class3"]'></div>

    Javascriptで制御する

    -でJavascriptを書くことが可能です。

    ul
        - for (var i = 0; i < 3; i++) {
            li list #{+ i}
        - }
    <ul>
      <li>list 0</li>
      <li>list 1</li>
      <li>list 2</li>
    </ul>
    doctype
    doctype html
    doctype xml
    doctype strict
    <!DOCTYPE html>
    <!DOCTYPE html>
    <?xml version="1.0" encoding="utf-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    コメントアウトの書き方

    通常のコメントアウト

    コメントには二種類あります
    //で出力ありのコメント//-でhtmlに出力されないコメントが生成されます。

    // コメントになる
    
    //
      コメントになる
      コメントになる
    
    //- 出力されないコメントアウト
    <!-- コメントになる-->
    
    <!--コメントになる
    コメントになる-->

    条件付きコメント

    この機能は削除せれたみたい・・・

    //if lt IE 8
      IE8以下
    <!--if lt IE 8IE8以下-->

    では、直接書けるので書きましょう・・・

    <!--[if lt IE 8]>IE8以下<![endif]-->
    <!--[if lt IE 8]>IE8以下<![endif]-->

    インクルード機能

    include記述でインクルードできます。
    temp.jadeなどの別ファイルをinclude tempなどで読み込む
    tempだけの記述で.jadeは記述不要です。
    かってにjadeファイルと認識されます。

    temp.jadeの中身

    p
      |テキスト
    include include/temp
    <p>テキスト</p>

    htmlをそのまま挿入する事ができます。
    その時は.htmlをつけます。

    include temp.html

    やっぱり、このインクルード機能が便利です。
    その他様々な機能がありますが、基本的な機能をご紹介しました。
    これだけでもかなり記述速度がアップすると思います。