LoginSignup
61
60

More than 5 years have passed since last update.

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

Posted at

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

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

61
60
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
61
60