Hamlとは

Haml (HTML Abstraction Markup Language) はRubyのテンプレートエンジンの一つで、HTMLを簡潔に読みやすく書くためのマークアップ言語であり、以下の特徴がある。

  • 簡潔な記述:
    • インデント(スペースやタブの数)を使ってHTMLの要素のネスト(入れ子)を表現する。これにより閉じるタグが不要となりコードが簡潔になる。
  • Rubyの組み込み:
    • Rubyのコードを直接埋め込むことができる。
  • 自動的なエスケープ
    • デフォルトでHTMLエスケープを行います。これにより、クロスサイトスクリプティング(XSS)といったセキュリティリスクを低減することができる
  • 高度な機能:
    • パーションテンプレート、フィルタ、ヘルパーなどの機能を提供する

公式サイト

記述例

ERBを書き換える

ERB

<strong><%= item.title %></strong>

このERBをHamlで書くと以下のようになる。

Haml

%strong= item.title

属性の追加

HTML

<strong class="code" id="message">こんにちは、世界!</strong>

このHTMLをHamlで書くと以下のようになる。 Haml

%strong{:class => "code", :id => "message"} Hello, World!

以下のように書くこともできる。 Haml

%strong.code#message Hello, World!

デフォルトのタグ

タグを省略した場合%divとして扱われる。 Haml

.content Hello, World!

HTML

<div class='content'>Hello, World!</div>

より複雑な例

ERB

<div class='item' id='item<%= item.id %>'>
  <%= item.body %>
</div>

このERBをHamlで書くと以下のようになる。 HAML

.item{:id => "item#{item.id}"}= item.body

ERB

<div id='content'>
  <div class='left column'>
    <h2>Welcome to our site!</h2>
    <p><%= print_information %></p>
  </div>
  <div class="right column">
    <%= render :partial => "sidebar" %>
  </div>
</div>

このERBをHamlで書くと以下のようになる。

HAML

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"

コメントを書く

HTMLに出力するコメント

一行の場合は以下のように書く。

/ コメントです

複数行の場合は以下のように書く。

/
  コメントです
  これもコメントです

Hamlにだけ書きたいコメント

一行の場合は以下のように書く。

-# コメントです

複数行の場合は以下のように書く。

-#
  コメントです
  これもコメントです

フィルタ機能

:css
  .fulieColor {
    color: aqua;
   }
 
:javascript
  alert('pass');
  if (f) {
    alert('true');
  }
 
:ruby
  clubs = {
	  fulie: yokohamafc,
	  reds: urawareds
  }