Help us understand the problem. What is going on with this article?

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

More than 5 years have 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を中心に掲載しようと思います。
あまり使わなさそうな構文は使わないので、ガシガシ使い倒したい人はこちら(本家サイト)からどうぞ。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away