grunt
yeoman
Jade

そろそろ自社で今時のCSS、JS教育をしようと思う(Jade-基本編)

More than 1 year has passed since last update.

今回はJadeについて。動作環境については前回までのエントリを参考にしてください。
そろそろ自社で今時のCSS、JS教育をしようと思う(Node.js インスコ編)
そろそろ自社で今時のCSS、JS教育をしようと思う(プロジェクト作成編)

Jadeとは

JST(JavaScript Template engine)。Ruby界隈で知られるHamlの構文に非常に近い文法でHTMLをコーディングすることができます。
経緯とか特徴とか説明すると面倒くさいので「こんなことができるもの」と思っていればよいと思います。

  • タグを書かなくてもよい(open closeタグ)
  • 同じようなことを書かなくてもよい(再利用)

今までHTMLコーダーから上がってきたHTMLの所感

  • ヘッダー、フッター、メニューのブロックが全部同じページにある
  • ローカルで編集するから外部CSSや外部JSの読み込みが相対パス(HTMLを置くディレクトリで../が増えたり減ったりする)
  • ウィジェットっぽいコンポーネントもコピペ
  • インデントが糞すぎる(加えてタグ落ちしてる)

ページの共通部分となるところはHTMLが静的が故の結果(どのみちWebサーバへリリースするのでSSI or PHPという手もあるのに)。
外部CSSやJSのパスはHTMLコーダーがWebサーバ使わないが故の結果(リリースするのはWebサーバなのに)。
インデントは完全に人の問題。

このへんの保守にかかわる問題がJade使うと大体解決できます。

Jadeファイルとコンパイル後のHTML

前回エントリ「そろそろ自社で今時のCSS、JS教育をしようと思う(プロジェクト作成編)」を実施済であれば既に.jadeファイルとコンパイルされたHTMLが出力されているはずです。

src/index.jade
doctype html
html
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1')
    title sample

    // build:css styles/styles.css
    link(rel='stylesheet', type='text/css', href='styles/main.css')
    // endbuild

  body

    main
      h1'Allo, 'Allo!
      h3 You have now :
      ul
        li Jade
        li Stylus
        li jQuery 
        li CoffeeScript

    // build:js scripts/scripts.js
    script(src='bower_components/jquery/dist/jquery.min.js')
    script(src='scripts/main.js')
    // endbuild
public/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>sample</title>
    <!-- build:css styles/styles.css-->
    <link rel="stylesheet" type="text/css" href="styles/main.css">
    <!-- endbuild-->
  </head>
  <body>
    <main>
      <h1>'Allo, 'Allo!</h1>
      <h3>You have now :</h3>
      <ul>
        <li>Jade</li>
        <li>Stylus</li>
        <li>jQuery </li>
        <li>CoffeeScript</li>
      </ul>
    </main>
    <!-- build:js scripts/scripts.js-->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="scripts/main.js"></script>
    <!-- endbuild-->
  </body>
</html>

Jadeで書くとHTMLがすごく簡潔にかけるんですね。
(前回エントリ通りに環境構築すると、index.jadeを修正すると自動コンパイルでブラウザがrefreshするようになっています。(Gruntの設定で))

Rubyist界隈では一般的な「Haml+CoffeeScript+SASS(SCSS)」はgemでインストールして、保存時のコンパイルやらブラウザのリフレッシュをごにょごにょVimとかSublimeTextに設定していたと思うんですが、今回は

  • Ruby ⇒ Node.js
  • gem ⇒ npm
  • Haml + Coffee + SCSS + エディタ設定 ⇒ Grunt + Yeomanで一発

てな感じになったので、非エンジニアにも大分とっつき易くなったのではと思います。

Jadeの基本

  • <!DOCTYPE html> 宣言は doctype html で置換します
  • 要素の class と id 属性は CSS セレクタ同様の記法が可能
  • その他の属性は () で囲い、, で属性ごとに区切る
  • 閉じタグは不要
  • インデントは適切に挿入する必要がある(しないとHTMLが崩れる)

最低限これだけ理解すればJadeでHTMLを書くことができます。

次回は

Jadeの応用というか実務向けのTipsを中心に掲載しようと思います。
あまり使わなさそうな構文は使わないので、ガシガシ使い倒したい人はこちら(本家サイト)からどうぞ。