Hamlのススメ

はじめまして。
「Q&Aコミュニティテルミー」（以下、テルミー）のフロントエンドを担当しています富澤と申します。
今回は、テルミーの開発で使用しています、「Haml」について紹介と使用しての雑感をお話させて頂ければと思います。

まず、Hamlを採用した経緯について少しお話しさせて頂きます。

テルミーは、昨年の終わり頃から今年の2月中旬にかけてRuby on Railsで作り直していたのですが、その際、Hamlならサーバーサイドエンジニアにもviewのテンプレートが扱いやすいということで採用しました。

では、Hamlについて簡単ではありますが、紹介させて頂きます。

そもそもHamlって？

Hamlとは、「HTML abstraction markup language」の略で、“はむる”と読みます。
HTMLを生成するためのマークアップ言語で、インデントと簡単な構文でシンプルに記述することができます。
本家サイトには、Haml開発の基本原則として以下の４つを掲げています。

1. Markup Should be Beautiful
2. Markup Should be DRY
3. Markup Should be Well-Indented
4. HTML Structure Should be Clear

英語が得意ではないので和訳は避けますが、なんとなく伝わりますでしょうか？

インストール方法は、以下のようにgemコマンドでインストールします。

$ gem install haml

基本的な記述

以下のように、タグ名の先頭に%をつけて、記述していきます。

Hamlの記述

%p= "ゆる～いQ&Aコミュニティ テルミー"

出力結果

<p>ゆる～いQ&Aコミュニティ テルミー</p>

入れ子の場合は以下のように記述します。インデントが必ず必要で半角2spaceとします。

Hamlの記述

%div
  %p
    %span= "ゆる～いQ&Aコミュニティ テルミー"

出力結果

<div>
  <p>
    <span>ゆる～いQ&Aコミュニティ テルミー</span>
  </p>
</div>

空白・改行の制御

"<"をタグの後ろにつけることでタグの内側、">"をタグの後ろにつけることでタグの外側の空白・改行を取り除きます。インライン要素が続く場合や<li>を"display: inline-block;"にした時などに有効です。また、"><"のように両方使用することも可能です。

Hamlの記述

%p<
  %i><= "ゆる～いQ&Aコミュニティ "
  %span><= "テルミー"

出力結果

<p><i>ゆる～いQ&Aコミュニティ </i><span>テルミー</span></p>

属性の追加

href, alt, titleなどの属性を追加する場合は、タグ名の後に{}もしくは()を書き追加することができます。

Hamlの記述

%a{:href => "http://tell-me.jp", :title => "テルミー"}
  %img{:src => "hoge.png", :alt => "ゆる～いQ&Aコミュニティ テルミー"}

出力結果

<a href="http://tell-me.jp" title ="テルミー">
  <img alt="ゆる～いQ&Aコミュニティ テルミー">
</a>

idとclass

idとclassは、cssセレクタと同じ記述方法で追加することができます。

Hamlの記述

%a#hoge.fuga{:href => "http://tell-me.jp", :title => "テルミー"}
  %img{:src => "hoge.png", :alt => "ゆる～いQ&Aコミュニティ テルミー"}

出力結果

<a href="http://tell-me.jp" title ="テルミー" id="hoge" class="fuga">
  <img alt="ゆる～いQ&Aコミュニティ テルミー">
</a>

その他

Rubyの構文が使用できるため、変数・条件分岐などが使用できます。ですので、以下のように配列をeachでループさせることも可能です。

Hamlの記述

%ul
  - numbers = [1, 3, 5, 7, 9]
  - numbers.each do |number| 
    %li= number

出力結果

<ul>
  <li>1</li>
  <li>3</li>
  <li>5</li>
  <li>7</li>
  <li>9</li>
</ul>

まとめ

基本的な使用方法を紹介しましたが、いかがだったでしょうか？
実際使用しての良かったと感じる部分は、

・少ないコードでシンプルに記述できる
・インデントに厳しいのでhaml・出力されるhtmlに作業者の癖が出にくい
・タグの閉じ忘れが無い
・学習コストも高くない

などが挙げられます。
学習コストに関しては、「Emmet(zen-cording)」を使用したことがある方であれば自然に書けるかと思います。

もし、ちょっと書いてみたいという方は、こちらで試してみてはいかがでしょうか？
Haml to HTML to Coffeecup to Javascript to CoffeeScript Converter!

以上、ありがとうございました。