HTMLやCSSをsmartに書くためのツール(Jade編)

HTMLの<>をいちいち書くのがめんどくさいしごちゃごちゃしてるように見える可読性が悪くなると思います。Jadeを使ってsmartにHTMLソースを書く方法を紹介します

突然ですが、以下の２つのソースコードを見て下さい。上の方は普通のHTMLのコードです。下は上のHTMLのコードをJadeで書いたものです。

どうですか？すばらしくないですか？これがJadeの力ですよ！！
あの、タグだらけのHTMLコードが簡単で完結になソースコードに生まれ変わりました。

Jadeとは

では、Jadeとは一体どんなものなのかを説明していきます。

Jadeはnode.jsテンプレートエンジンの一つです。なので、サーバーをnode.jsを使って作るときでないと使えません。

Jadeの最大の特徴はHTMLを簡単に完結にかけることです。

公式ホームページはこちらです。

Jadeのインストール方法

Jadeのインストール方法は以下のコマンドを叩くだけです。

$ npm install -g jade 

正しくインストールされている場合は、「jade -V」コマンドでバージョンが表示されるはずです。

$ jade -V

1.3.0

 Jadeの実行方法

1. Jadeファイルを作成する。以下はサンプル。
   
   
2. サーバーの設定する。
   

ポイント

サーバーでは通常のhtmlファイルを読み込む方法と少し違います。

先ほどのサーバーの設定をしたソースコードの４行目をみると

var html=jade.renderFile('index.jade',null);

と書いてあったと思います。これは作成したjadeファイルをコンパイルしてhtmlファイルを生成し、そのファイルを読み込むという命令です。
jadeファイルはhtmlファイルではないのでコンパイルを行う必要があります。

ちなみに、Jadeファイルが間違っているとこの時点でエラーが出てきます。以下は一例です。

おまけ

Sublime Text 2でjadeのシンタックスハイライトを設定する方法

1.  Package用のディレクトリを作成し、そこにgitからJadeの設定をcloneする

   $ mkdir -p ~/Library/Application\ Support/Sublime\ Text\ 2/Packages

   $ cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages

   $ git clone https://github.com/davidrios/jade-tmbundle.git Jade

2. Sublime Text2 を再起動する
3. View -> Syntax -> Jadeを選択する。
   

   

まとめ

Jadeを使ってHTMLソースコードを簡単に完結に書く方法を紹介しました。しかし、HTMLソースコードがきれいに書けても特に意味がありません。なぜかというとデザインをするとなるとCSSのソースコードも記述しなければならないからです。

ということで、次回はCSSのソースコードをきれいに完結にかけるツールStylusについて紹介します。