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

  • 63
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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

テンプレートと呼ばれる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