【Jade】ゴリラでもわかるJade入門 〜Jadeを使ってみる〜

Posted on Edit on by misumi_takuma

2016/03/26
Jadeの名前がPugに変わるためPugの記事も書きました。
まだアルファ版なので、しばらくはJadeのお世話になりそうです。
【Pug】ゴリラでもわかるJade改めPug入門

Jadeに興味をもったので、やってみるついでに記事にしました。

ゴリラのイラストは最近なぜかゴリラに力を入れている素材工場さんから

素材工場

もくじ
  1. Jadeとは
  2. Jadeのいいところ
  3. インストール
  4. Jadeファイルを作成してみる
  5. Jadeの書き方いろいろ
  6. Jadeの便利機能
  7. gulpでコンパイル

Jadeとは

JadeはHTMLを書くためのテンプレートエンジンです。

Jade

CSSにおけるSassやStylusのようなもので、ざっくり言うとHTMLの作成を簡単にしてくれます。

HTMLのようにタグで囲むことがない代わりに、改行やインデントなどで全体を構成していきます。

Jadeのいいところ

Jadeを使うと、いろいろと楽になります。

  • 記述を省略できる（タグで囲む必要なし、class,idを書かなくていい）
  • ファイル分割できる（一部をincludeで読み込んだり、見た目や管理がスッキリ）
  • 変数やループとかがあって便利

インストール

Jadeを使うためには準備が必要ですが、簡単です。

Node.jsのインストール

Jadeの公式サイトに「NODE TEMPLATE ENGINE」と書かれているように、JadeはNode.jsで動いています。

Node.jsをインストールしていない人は公式サイトからダウンロードし、PCにインストールしてください。

Node.js

Jadeのインストール

Node.jsをインストールできたら、Jadeをインストールします。

以下コマンドをターミナルでたたくとJadeがインストールされます。

npm install -g jade

以下コマンドでバージョンが表示されたら、インストール完了です。

jade --version

Jadeファイルを作成してみる

まず、index.jadeを作成します。
作る場所はどこでも大丈夫です。

index.jadeに以下を書きます。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title Jadeテスト
  body
    h1.sitettl Jadeテストサイトタイトル
    main.main
      h2.content_ttl メインタイトル

冒頭で書いた通り、Jadeはタグで囲んでないですね。

Jadeの基本記法

Jadeは基本的に以下ように書きます。

  • doctype htmlで宣言文
  • 改行＋インデントで要素の入れ子を作る
  • タグ名＋半角スペースでタグ内のテキスト

JadeをHTMLにコンパイル

先ほど作ったJadeファイルをターミナルを使って、HTMLファイルに書き出してみます。

ターミナルを開き、Jadeファイルがあるディレクトリへ移動しておきます。

[例]

cd jadetest

Jadeファイルがあるディレクトリへ移動した上で、以下コンパイルのコマンドをターミナルに入力します。

jade index.jade

すると同じディレクトリ内にindex.htmlが生成されます。

index.html
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><style src="css/style.css"></style><title>Jadeテスト</title></head><body><h1 class="sitettl">Jadeテストサイトタイトル</h1><main class="main"><h2 class="content_ttl">メインタイトル</h2></main></body></html>

横一直線で見づらいので、以下コマンドでコンパイルします。

jade index.jade --pretty

すると、見やすいHTMLを書き出してくれます。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <style src="css/style.css"></style>
    <title>Jadeテスト</title>
  </head>
  <body>
    <h1 class="sitettl">Jadeテストサイトタイトル</h1>
    <main class="main">
      <h2 class="content_ttl">メインタイトル</h2>
    </main>
  </body>
</html>

Jadeの書き方いろいろ

タグが不要なこと以外にもJade特有の書き方はいろいろとあります。

改行せずに要素の入れ子をつくる

Jadeは「: ＋ 半角スペース」で横並びに書いても、要素の入れ子を作ることができます。

例えばメニューで「nav > ul > li > a > span」という感じの構成の場合、
改行＋インデントを使うと縦に長くなって、逆に見づらくなる場合があります。

そんな時にこの書き方が使えます。

nav
  ul
    li: a(href="#") Top
    li: a(href="#") About
    li: a(href="#") Works
    li: a(href="#") Contact
    li: a(href="#"): span Links
コンパイル結果
<nav>
    <ul>
        <li><a href="#">Top</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#"><span>Contacts</span></a></li>
    </ul>
</nav>

idとclassの書き方

idは#、classは.でつなげて書きます。

いちいちclassやクォーテーションを書かなくていいですね。

section#top
  .content.inner
コンパイル結果
<section id="top">
    <div class="content inner"></div>
</section>

属性の書き方

hrefやsrcなどの属性はかっこ内に書きます。

// CSS
link(link="css/style.css")
// js
script(src="js/main.js")
// リンク
a(href="#") Top
// inputタグ
input(type="text" checked)
input(
  type="radio"
  name="hoge"
  checked
)

複数ある場合は、スペース横並びでも、改行でも大丈夫です。

改行

文章の改行をしたいとき、brタグを使うには以下のように書きます。

p
  |トップページのコンテンツ
  br
  |トップページのコンテンツ
コンパイル結果
<p>トップページのコンテンツ<br>トップページのコンテンツ</p>

コメント

Jadeのコメントの書き方は2種類あります。
書き出したHTML内にコメントを残す方法と残さない方法です。

// HTMLで書き出されるコメント
//- HTMLで書き出されないコメント

Jadeの便利機能

Jadeを使うと記述を省略できる以外にも、便利な書き方があります。

include

記述の一部をパーツ化し、includeで必要な箇所に読み込むことができます。

ページ間の共通部分をパーツ化しておくことで、管理や修正がやりやすくなります。

例えば、以下のようなJadeファイルがあったとします。

doctype
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title Jadeテスト
  body
    header.header
      h1.sitettl Jadeテストサイトタイトル
      nav
        ul
          li
            a(href="#") Top
          li
            a(href="#") About
          li
            a(href="#") Works
          li
            a(href="#") Contact
    main.main
      h2.content_ttl トップページタイトル
      p トップページのコンテンツ
    footer.footer
      small copyright

includeを使って書くとこのようになります。

index.jade

doctype
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title Jadeテスト
  body
    include include/header.jade
    main.main
      h2.content_ttl トップページタイトル
      p
        |トップページのコンテンツ
        br
        |トップページのコンテンツ
      section#top
        .content.top
  footer.footer
      small copyright

トップページや下層ページでも同じ構成になりそうな、ヘッダーをincludeで読み込んでみました。

ヘッダーのJadeファイルはincludeディレクトリ以下に置いています。

[header.jade]

header.header
  h1.sitettl Jadeテストサイトタイトル
  nav
    ul
      li
        a(href="#") Top
      li
        a(href="#") About
      li
        a(href="#") Works
      li
        a(href="#") Contact

includeで読み込んでおくと、後にメニューの表記などが変更になった場合、
header.jadeを修正すれば全てのページで変更されます。

変数が使える

「- var 変数名 = 変数の中身」で定義します。

例

- var title = "ゴリラでもわかるJade入門";

変数を使う場合は「#{変数名}」で使います。

header.header
  h1.sitettl #{title}

使いまわしそうなものは変数定義しておくと、後に変更があった場合に楽です。

ループ

同じ要素が続くときはループで繰り返すことができます。

for文を使う場合

section#top
  .content.top
  - for (var i = 0; i < 3; i++) {
    .block
      h2(class="#{i}") 見出し
      p テキストテキスト
      a(href="#") ボタン
  - }
コンパイル結果
<div class="block">
    <h2 class="0">見出し</h2>
    <p>テキストテキスト</p><a href="#">ボタン</a>
</div>
<div class="block">
    <h2 class="1">見出し</h2>
    <p>テキストテキスト</p><a href="#">ボタン</a>
</div>
<div class="block">
    <h2 class="2">見出し</h2>
    <p>テキストテキスト</p><a href="#">ボタン</a>
</div>

単純な要素の繰り返しにはfor文が良さそうです。

#{i}と書けば連番をふることができます。

eachを使う場合

ul
  each val in ["Top", "About", "Works", "Contact"]
    li: a(href="#")= val

each文を使う繰り返しもあります。

コンパイル結果
<ul>
    <li><a href="#">Top</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Contact</a></li>
</ul>

gulpでコンパイル

gulpでJadeをコンパイルする記事を書きました。

【Jade/Pug】gulpでJade / Pugをコンパイルする

さいごに

Jadeは他にも条件文や、mixin、extendsなど便利な機能がまだまだあります。

ぜひお試しください！

Tweet
このエントリーをはてなブックマークに追加
Pocket

こちらの記事もどうぞ

2 thoughts on “【Jade】ゴリラでもわかるJade入門 〜Jadeを使ってみる〜”

  1. ピンバック: WindowsでExpress4(JavascriptのWEBフレームワーク)（２） - WordPressでフリーオリジナルフォント
  2. ピンバック: Haml vs Slim vs Jade { code } - Think-iDeas

Comments are closed.