チュートリアル チュートリアル

このチュートリアルに進む前に、1つ重要なことを明確にしておきたいと思います。このチュートリアルを見た後、ERBファイルの1つをHamlに変換してみましょう。ただ試すだけです。ファイルを1つ選択して、削除操作を実行します。ファイルが気に入らなければ保持する必要はありませんが、このチュートリアルを完了したら、とにかく1つのファイルで試してください。

Hamlは最初の20分は奇妙に感じるかもしれませんが、その後は速度が向上します。

はじめに

まず、Hamlを取得し、Gemをインストールしてください（このチュートリアルではRailsを使用していることを前提としていますが、他のフレームワークや単独のHamlにも同様に適用できます）。HamlはERBの代替手段として使用できます。つまり、app/viewsフォルダ内の任意のファイルを、ファイルの拡張子を単純に変更するだけでHamlに切り替えることができます。

app/views/account/login.html.erb → app/views/account/login.html.haml

このページを表示すると、ERBがテンプレートを使用するのではなく、代わりにHamlによって処理されます。ERBとHamlを組み合わせて、サイト全体を操作できます。

変換方法

変換する基本的なERBから始めましょう。

ERB

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

Haml

%strong= item.title

Hamlでは、タグはパーセント記号とタグの名前を使用して記述します。これは%strong、%div、%body、%htmlなど、任意のタグで機能します。次に、タグの名前の後に=があり、Hamlに右側のRubyコードを評価させ、戻り値をタグの内容として出力します。上記のERBとは異なり、Hamlは戻り値内の改行を自動的に検出して、タグを適切な形式で設定します。

属性の追加

単純なタグはすべてうまく機能しますが、タグに属性を追加するのはどうでしょうか。

HTML

<strong class="code" id="message">Hello, World!</strong>

Haml

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

属性は標準のRubyハッシュです。class属性は「code」で、id属性は「message」です。この例では=を使用していないことに注意してください。そのため、「Hello, World!」は、Rubyコードではなく、通常の文字列として解釈されます。

classとidは一般的な属性であり、ほとんどのデザイナー（および開発者）はCSSに精通しているため、Hamlではこのタグをより簡単に定義できます。これらタグを説明するために、同様の表記を使用できます。

Haml

%strong.code#message Hello, World!

さらに、divタグは一般的なので、タグ定義を省略し、%divが既定値になるようにできます。

Haml

.content Hello, World!

HTML

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

複雑さの向上

さらに少し複雑なものを考えてみましょう。

ERB

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

とても基本的なものです。これは部分的なものの一部かもしれません。これを Haml に変換してみましょう。

Haml

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

これは楽しいです！では、ネストは空白によって Haml で行われます。

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>

Haml

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

それを見てください。あなたを笑顔にさせませんか？

学ぶべきことはたくさんあります。強くお勧めするのは、リファレンスを確認することです。Haml に追加した優れた小さなトリックで満たされており、サイトの構築をさらに楽しくします。