Rails で Haml を利用する

ryomatsu

8年前

Haml という HTML を簡潔に記述するためのマークアップ言語があります。これを利用する事で HTML をより素早く、よりシンプルに書く事ができるようになります。もちろん Rails にも簡単に導入できます。

例えば rails new した直後の application.html.erb を haml にしてみます。erb は以下のような感じになっています。

<!DOCTYPE html>
<html>
<head>
  <title>TestHaml</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>

これを Haml で記述したとすると次のような感じになります。

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title TestHaml
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  %body
    = yield

記述量は減るし見た目もスッキリしますね。

Rails で Haml を利用する
erb を haml へ変換する
haml の書き方
まとめ

Rails で Haml を利用する

Gemfile に以下の2つを記述します。

gem 'haml-rails'
gem 'erb2haml'

haml-rails が Rails で Haml を利用するための gem です。
erb2haml は erb ファイルを haml に変換するやつです。これは無くてもいいんですけど、既にある erb を haml へ変換するのに必要です。

Gemfile を編集したらインストールしよう。

$ bundle install

erb を haml へ変換する

現在プロジェクト内に存在している erb ファイルを haml へ変換するには erb2haml を使い、以下のコマンドを実行します。

$ rake haml:replace_erbs
Looking for ERB files to convert to Haml...
Converting: app/views/layouts/application.html.erb... Done!
Removing: app/views/layouts/application.html.erb... Removed!

これだけです。出力の通り既存の erb ファイルは削除されてしまいますが、これを残したい場合は haml:replace_erbs のかわりに haml:convert_erbs を利用します。

haml の書き方

簡単にですが haml の書き方をまとめて見よう。

タグの記述は % を使用

以下のように % の後にタグ名を記述すると、該当する html へ変換してくれます。

%h1 ほげほげ
%p ふがふが

これが

<h1>ほげほげ</h1>
<p>ふがふが</p>

こうなります。

階層構造はインデントを利用

通常の html と違い閉じタグを記述する必要はありませんが、その代わり半角スペース2つで階層構造を表します。

%div
  %p ほげほげ
%div
 ふがふが

このように記述すると以下のようになります。

<div>
  <p>ほげほげ</p>
</div>
<div>
  ふがふが
</div>

ID や Class を使う

id や class の指定は以下のような感じにします。

%div{id: "hoge"} ほげほげ
%div{class: "fugafuga"} ふがふが
-# もしくは以下のようにする
%div#hoge ほげほげ
%div.fugafuga ふがふが
%div.foo.bar ぴよぴよ

変数を使う

= のあとに変数名を記述すると出力できます。

%div
  %p= @hoge.title

if 文を使う

- if とか書くと条件分岐を使えます。

- if @hoge.count > 0
  = @hoge.count
- else
  カウントぜろっぽい？

each 文を使う

%ul.list-group
  - @hoge.each do |h|
    %li.list-group-item= h.title

- とか = から始まると大体 ruby 書けるっぽい。

link_to を書く

link_to とか image_tag ももちろん使えます。

= link_to 'hoge', hoge_path(@hoge), :class=>'btn btn-info'
= image_tag(@hoge.image_url, :size => '50x50')
= link_to image_tag(@hoge.image_url, :size => '144x200'), @hoge.url

-# こう書くと変換後の html には反映されない
/ スラッシュを使うと html のコメントの形式になります

まとめ

たいぶ今更感あるが使ってみるとやっぱり便利なのでメモしておきます。