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
}