ウェブデザイナー向け、HTMLを早く美しくかけるJade

サイトエンジンブログ編集部

9年前

こんにちは。今日はちょっとだけコードもいじるウェブデザイナーさん向けの内容です。

HTMLに含まれる<>や、CSSの;{}など、何度も書く必要があるこれらの記号を省略してかつ可読性の高いコードを美しく書くツールをご紹介します。一度使い始めると、もうこれなしでコーディングなんて煩わしい、と思うくらい便利です。

今回はHTMLを書くのに便利なツールを紹介します。

Jade – HTMLテンプレートエンジン
Jadeをとりあえず試してみる
- - この記事を書いた人
    - この人が書いた他の記事

Jade – HTMLテンプレートエンジン

簡単に言うとJadeは、さくっとJavascriptやHTMLを書くためのツールです。Javascriptとか書けないよ、HTML/CSSしか書かないよ、というデザイナーさんにもかなり便利ですので、ここで拒否反応を起こさずに以下を読んでみてください。

Jadeの特徴はたくさんあるのですが、私自身がJavascriptはほとんど書けないデザイナーとして便利だと感じているのは以下のような点です。

インデントで階層を表すので可読性が高い
閉じタグやカッコがないので非常に可読性が高い
共通部分を別ファイルにしてインクルードできるので、変更があった際には一つのファイルをいじるだけでよい
CSSと同じセレクタ記法（#や.）
変数が使える

可読性が高い

例えば、以下のようなHTMLコード。

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>Jadeのサンプルページです</title>
    <link rel="stylesheet" href="./css/sample.css">
 </head>
 <body>
    <h1>Jadeのサンプルページです</h1>
    <p>Jadeを使うとコードを美しく早くかけます</p>
 </body>
</html>

Jadeで書くとこうなります。

doctype html
 html
  head
    meta(charset='UTF-8')
    title Jadeのサンプルページです
    link(rel='stylesheet', href='./css/sample.css')
   body
    h1 Jadeのサンプルページです
    p Jadeを使うとコードを美しく早くかけます

階層構造はインデントで表します。また、<>や閉じタグは必要ありませんので、本当に必要なコードだけを書くことになり、とても可読性が高いです。

インデントにはタブか半角スペースを使えますが、混在させるとエラーになるのでどちらかに統一しましょう。

Includeが使える

例えばDreamweaverのようなオーサリングツールや、phpなどサーバサイドではそういった共通部分を別ファイルにして、必要に応じてインクルードできますが、それがJadeでもできます。しかも軽くてサーバは必要ありません。サーバの設定やphpはちょっとハードルが高い、と思っているウェブデザイナーにとってはこれはとても助かります。

例えば、フッター部分を別ファイルにしてみましょう。HTMLはこれです。

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>Jadeのサンプルページです</title>
    <link rel="stylesheet" href="./css/sample.css">
</head>
 <body>
    <header id="header">
     <h1 class="title-center">Jadeのサンプルページです</h1>
     <p class="sub-title">Jadeを使うとコードを美しく早くかけます</p>
    </header>
    <div id="main">
     <div class="container">
       <div class="row">
         <h2>本当に便利！</h2>
       </div>
     </div>
    </div>
    <footer>
     <div class="copyright">copyright noteA</div> 
   </footer>
 </body>
</html>

Jadeはこうなります。

sample.jade

doctype html
html
   head
      meta(charset='UTF-8')
      title Jadeのサンプルページです
      link(rel='stylesheet', href='./css/sample.css')
   body
      header#header
          h1.title-center Jadeのサンプルページです
          p.sub-title Jadeを使うとコードを美しく早くかけます
      #main
          .container
              .row
                  h2 本当に便利！
      include _inc_footer

_inc_footer.jade

footer
   .copyright copyright noteA

最近はいろんなJavascriptをファイル下部に共通して読み込ませたりするので、とても便利です。これはファイル内のどこでも使えます。

CSSと同じセレクタ記法

これはHTML/CSSデザイナーにとって、とてもとっつきやすいものです。例えば以下のjade。

       header#header
          h1.title-center Jadeのサンプルページです
          p.sub-title Jadeを使うとコードを美しく早くかけます
      #main
          .container
              .row
                  h2 本当に便利！

#header、#mainなどといったID、.text-title、sub-titleといったクラスセレクタなど、CSSの記法そのままで書くことができます。今までいちいち<header id=”header”>と書いていたのがほんとうに煩わしく感じます。

.rowのように、要素名を書いていないものは自動的にdivに.rowがついた形に変換されます。

変数が使える

「変数」というのはHTML/CSSしか書かないと出会うことがないのですが、ちょっとだけでもJavascriptやphpをいじると出てくるものです。何度も使うものを定義しておいて、それをコードの中で使うことができます。変更があれば、その定義を一つ変更すれば、全部に適応されます。上記であげたインクルーのちっちゃい版、といったところでしょうか。

例えば、ページタイトルを最初に定義してあげます。

- var title = "Jadeのサンプルページです"

そしてそれを、ヘッダの中のタイトルタグと、h1に入れてあげます。

doctype html
html
   head
      meta(charset='UTF-8')
      title #{title}
      link(rel='stylesheet', href='./css/sample.css')
   body
      header#header
          h1.title-center #{title}
          p.sub-title Jadeを使うとコードを美しく早くかけます
      #main
          .container
              .row
                  h2 本当に便利！
      include _inc_footer

これがHTMLになるとこうなります。

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>Jadeのサンプルページです</title>
    <link rel="stylesheet" href="./css/sample.css">
 </head>
 <body>
    <header id="header">
     <h1 class="title-center">Jadeのサンプルページです</h1>
     <p class="sub-title">Jadeを使うとコードを美しく早くかけます</p>
    </header>
    <div id="main">
     <div class="container">
       <div class="row">
         <h2>本当に便利！</h2>
       </div>
     </div>
    </div>
    <footer>
     <div class="copyrithg">copyright noteA</div>
    </footer>
 </body>
</html>

他にもいろいろ

また、Includeのように外部ファイルから読み込んだものに変数を入れ込むことや、Javascriptのループ処理や条件式も使うことができます。この辺はHTML/CSSメインのデザイナーには時々ハードルが高かったりしますので今回は割愛しますが、興味のある方は調べてみてください。

Jadeをとりあえず試してみる

Jadeを使うには、お使いのマシンにnode.jsとJadeをインストールする必要があります。コマンドラインです、GUIに慣れていると拒否反応を起こしそうになりますが、コピペでできます。でも、インストールとかよくわからない、という方も、とりあえず以下でオンラインで試してみることができます。

Jade Demo

このページでjadeのコードをいじると、HTMLのコードにリアルタイムで反映されますので、どんなかんじかな、と触ってみて感触をつかんでみるのにはいいと思います。

これは便利！　と思ったら、次はインストールです。また次回、インストール編を書きますが、待ちきれない方はチュートリアルがたくさんありますので検索してみてくださいね。

この記事を書いた人

サイトエンジンブログ編集部: 海外情報を中心に、海外でのマーケティング、外国人の集客や接客に役に立つ記事をお届けしていきます。