テンプレートエンジン => Haml、Slimって何？

テンプレートエンジンとは

テンプレートと呼ばれるHTMLのひな形を元にプログラムで加工し、画面に出力するためのライブラリ。
プログラマーとWebデザイナーとの分業を目的とし、特別なタグを解釈して実行することで処理を行う。

利点：

• テンプレートエンジンを利用することでいくつかの恩恵が受けられる。
• 見た目 (View) とロジックが分離できる
• 例えばMVCのようなモジュール化を容易にする
• デザイナーとプログラマーなど、作業の分担ができ、チームでの開発がやりやすくなる
• ドキュメント生成のための同じようなコードの重複が避けられる

Hamlとは

HamlはHTMLを生成するためのマークアップ言語。
インデントとCSSセレクタを用いた記述を行うことによって，少ない行数で正しい(X)HTMLを記述することができる．

Haml主義

• Markup should be beautiful
• Markup should be DRY
• Markup should be well-indented
• XHTML structure should be clear

記述方法

タグとコンテント

テンプレートエンジン	記述
ERB	<strong><%= item.title %></strong>
Haml	%strong= item.title

Hamlで"%ほげ"はタグを表す。

タグの属性

テンプレートエンジン	記述
ERB	<strong class="code" id="message">Hello, World</strong>
Haml	%strong.code#message Hello, World

タグは省略するとdivタグと見なされる

テンプレートエンジン	記述
なし(HTML)	<div clas='content'>Hello, world.</div>
Haml	.content Hello, world

変数の展開

属性は#{}での変数展開ができる。

ERB

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

Haml

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

入れ子の構造を表す場合、インデントを使用する。
ERB

<div id='content'>
  <div class='left column">
    <h1>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"

Slimとは

Rail界隈では、HTML(ERB)よりシンプルなHalm、から更に記号を減らしたようなテンプレートエンジンが人気らしいです。

記述例）

! doctype html
html
  head
    title Hello Slim

  body
    h1 Hello, Slim!

    div id="main"
      | これはSlimのサンプルです。
      | シンプルでしょう？

      p.note
        | Hamlのように「#」や「.」を使うこともできます。

あとで読む: erb, slim or haml
http://stackoverflow.com/questions/11390512/new-to-rails-which-one-do-you-suggest-and-why-erb-haml-or-slim