【Rails】hamlの書き方をマスターしよう!

Rails

hamlとは

「HTML Abstraction Markup Language」の略です。
htmlよりもコードを早く綺麗に、そして非常にシンプルに作ることができます。
またerbと同じでrubyのコードを埋め込むことができます。

hamlの特徴
リンクをコピーしました

hamlはrubyで使うテンプレートエンジンの一つです。
他にも有名なテンプレートエンジンとしておなじみのerbやhamlに似たslimというものがあります。

hamlには閉じタグが存在しないのでコード自体が非常にスッキリしています。
ただ、erbの書き方に慣れているとhamlの書き方に慣れるのが大変というデメリットがあります。
ですが、hamlでの書き方をマスターしてしまえば、かなり効率よく、綺麗にビューファイルを作成することができるようになります。

Rails にhamlを導入してみよう
リンクをコピーしました

railsではデフォルトのテンプレートエンジンはerbです。
ですのでhamlを使うにはgemをインストールする必要があります。
Gemfileに下記のコードを追加し、bundle installコマンドを実行しましょう。

Gemfile
1
gem 'haml-rails'

こうすることにより「index.html.haml」のようにビューファイルの拡張子にhamlが使えるようになります。
haml→htmlのように右から順にコンパイルされ、表示される際にはhtmlのコードに変換されます。

ビューファイルの中に同名のerbファイルとhamlファイルがある場合は、erbが優先して読み込まれるのでhamlを使いたい場合はerbファイルは削除しておきましょう。

gemを使ってerbをhamlに変更してみよう
リンクをコピーしました

もともと存在するapplication.html.erbなどをhamlに手動で書き直すのは手間ですよね。
そんな時はgemを使って自動でerbをhamlに変換することができます。
Gemfileに下記のコードを追加し、bundle installコマンドを実行しましょう。

Gemfile
1
gem 'erb2haml'

変換するにはターミナルで下記のコマンドを実行します。

ターミナル
1
2
3
4
5
# erbファイルを残して変換
rake haml:convert_erbs

# erbを削除して変換
rake haml:replace_erbs

基本的な書き方を覚えよう
リンクをコピーしました

それではhamlの基本的な書き方を見ていきましょう。
hamlには閉じタグという概念がありません。
代わりにインデントを使い、マークアップする範囲を指定します。

haml
1
2
3
4
5
6
7
%div
  %h1 ピカわかメニュー
  %ul
    %li Ruby
    %li Rails
    %li HTML
  %p ピカいちわかりやすいサイトです。

このように閉じタグはありません。
その分、インデントでずれている部分が範囲を表します。
なのでインデントの文字数がおかしいとエラーになります。
htmlでは閉じタグがなくてもエラーは出ないで表示がおかしくなるだけですが、hamlだと下の画像のようにrailsのエラー文で確認ができるのもhamlの特徴です。

hamlのエラー

上のコードは下記のようにコンパイルされます。

html
1
2
3
4
5
6
7
8
9
<div>
  <h1>ピカわかメニュー</h1>
  <ul>
    <li>Ruby</li>
    <li>Rails</li>
    <li>HTML</li>
  </ul>
  <p>ピカいちわかりやすいサイトです。 </p>
</div>

htmlファイルの一番最初に書く「<!DOCTYPE html>」は下記のように記述します。

haml→html
1
2
3
4
!!!

# このコードにコンパイルされる
<!DOCTYPE html>

各タグなどの書き方
リンクをコピーしました

上の例のようにタグを使用する際はタグ名の前に「%」を付けます。

haml
1
2
3
4
5
6
7
8
9
10
11
%div
%html
%meta
%header
%footer
%table
%h1
%p
%a
%ul
%li

下記のようにコンパイルされます。

html
1
2
3
4
5
6
7
8
9
10
11
<div></div>
<html></html>
<meta></meta>
<header></header>
<footer></footer>
<table></table>
<h1></h1>
<p></p>
<a><a>
<ul></ul>
<li></li>

属性の書き方
リンクをコピーしました

タグ内の属性は下記の2つの記述で指定します。
aタグの例をみてみましょう。

haml
1
2
%a(href='http://www.pikawaka.com')
  ピカわか

ハッシュのような記述でも指定できます。

haml
1
2
%a{ href: 'http://www.pikawaka.com' }
  ピカわか!

上の2つのコードはコンパイルされると下記のコードになります。

html
1
2
3
<a href="http://www.pikawaka.com">
  ピカわか!
</a>

imgタグなどの場合もこうなります。

haml
1
2
%img (src="pika.jpg" alt="ピカわか")
%img{ src: "pika.jpg", alt: "ピカわか" }

このコードは下記のようにコンパイルされます。

html
1
<img  src="pika.jpg" alt="ピカわか">

IDとclassの書き方
リンクをコピーしました

IDとクラスの指定は下記のように記述します。

haml
1
2
3
4
5
6
7
# idの指定
%div#pikawaka
  ピカわか

# クラスの指定
%div.pikawaka
  ピカわか

このコードは下記のようにコンパイルされます。

html
1
2
3
<div id="pikawaka">ピカわか</p>

<div class="pikawaka">ピカわか</p>

このようにidは「#」を、クラスは「.」をつけるだけで定義することができます。
非常に簡潔にかけますね!

複数定義する場合は下記のように記述します。

haml
1
2
3
4
5
%div#pikawaka.hoge.fuga
  ピカわか

%div.pikawaka.hoge
  ピカわか

このコードは下記のようにコンパイルされます。

html
1
2
3
<div id="pikawaka" class="hoge fuga">ピカわか</p>

<div class="pikawaka hoge">ピカわか</p>

このように「.」で連結するとクラスをその分増やすことができます。

またidとクラスを使う時divタグは省略して書くことができます。

haml
1
2
3
4
5
#pikawaka
  ピカわか

.pikawaka
  ピカわか

下記のようにコンパイルされます。

html
1
2
3
<div id="pikawaka">ピカわか</div>

<div class="pikawaka">ピカわか</div>

このように非常に簡潔に書けるので「%div」は使わず、このように「.クラス名」として使うということを覚えておきましょう。

コメントアウトの書き方
リンクをコピーしました

コメントアウトは下記のように記述します。

haml
1
/ コメントアウトする

下記のようにコンパイルされます。

html
1
<!-- コメントアウトする -->

複数行のコメントアウトは下記のように記述します。

haml
1
2
3
/
  1行目のコメントアウト
  2行目のコメントアウト

下記のようにコンパイルされます。

html
1
2
3
4
<!--
1行目のコメントアウト
2行目のコメントアウト
-->

コンパイルされるhtmlにコメントを表示させたくないときは下記のように記述します。

haml
1
2
3
%p ピカわか
-# haml内だけに表示したいコメントアウトです
%p ピカいちわかりやすい

このようにコンパイル後のファイルにはコメントは表示されません。

html
1
2
<p>ピカわか</p>
<p>ピカいちわかりやすい</p>

javascriptの書き方
リンクをコピーしました

javascriptは下記のように記述します。

haml
1
2
3
:javascript {
  コード
}

下記のようにコンパイルされます。

html
1
2
3
<script>
  コード
</script>

または下記のように記述することもできます。

haml
1
%script alert('ピカいちわかりやすい!');

これは下記のコードにコンパイルされます。

html
1
<script>alert('ピカいちわかりやすい!');</script>

javascriptを拡張子のhamlで書く場合は下記のように記述します。

js.haml
1
2
:plain
alert('ピカいちわかりやすい!');

javascriptファイル内なので「<script>」は不要です。
ですので「:javascript」も不要です。
ですが、何も指定しないとhamlコードとして読み込んでしまうので、それを防ぐために「:plain」を指定してあげればOKです。

このようにjavascriptファイルにおいてはhamlで書く必要性が全くないので、通常通りjsファイルで作成しましょう。

カスタムデータ属性の書き方
リンクをコピーしました

HTML5から追加されたカスタムデータ属性は下記のように記述します。

haml
1
%span{ data: { 属性名: '値' } }

例を見てみましょう。

haml→html
1
2
3
4
%span{ data: { target: 'hogehoge' } }

# 下記のようにコンパイル
<span data-target='hogehoge'></span>

rubyのコードを書いてみよう
リンクをコピーしました

hamlファイル内でrubyのコード使用するには下記のように記述します。

rubyタグの書き方
リンクをコピーしました

「<%= ... %>」は 「= ... 」のように記述します。
「<% ... %>」は 「- ... 」のように記述します。

erb
1
2
3
4
<% @articles.each do |article| %>
  <p><%= article.title %>
  <p><%= article.body %>
<% end %>

上のコードをhamlで書くと下記のコードになります。

haml
1
2
3
- @articles.each do |article| 
  %p= article.title
  %p= article.body

閉じタグの<% end %>はインデントで指定しているので不要です。

変数の定義の仕方
リンクをコピーしました

hamlではhamlファイルの中で変数を定義することができます。

haml
1
2
- name = 'ピカわか'
%p= "私の名前は#{name}です。"

このように変数を展開して中身を表示させたいときは「#{}」のように式展開を使います。

下記のコードにコンパイルされます。

html
1
<p>私の名前はピカわかです。</p>

SassとBEMを使って効率よくコーディングをしよう
リンクをコピーしました

Hamlは、SassとBEMを使うと、修正しやすく管理の出来る保守性あるコードにする事が出来ます。

SassとBEMが分からない方は【HTML5・CSS3】CSS設計のBEMを1から理解してマスターしよう!を参考にしてください。

BEMとSassを利用すると、どの様にコードが管理しやすくなるのかを順番に解説していきます。

HTML | BEMの記法
1
2
3
4
<div class="search"> <!-- Block -->
  <input class="search__input"> <!-- Element -->
  <input class="search__btn"> <!-- Element -->
</div>

上記のBEMで書かれたコードをHamlにすると、下記のようになります。

Haml | hamlに変換
1
2
3
%div.search
  %input.search__input
  %input.search__btn{ :type => "submit" }

CSSで先ほどのコードを記述すると、BEMによる規則でクラス名が長くなってしまい、逆にコードの見通しが悪くなります。

CSS | CSSでコーディング
1
2
3
4
5
6
7
8
9
10
11
.search {
  margin: 30px;
}

.search__input {
  font-size: 18px;
}

.search__btn {
  color: red;
}

しかし、Sass(SCSS)で記述すると、下記の様に親子関係に対してネスト構造で記述することが出来るので、クラス名を簡潔に書くことが出来て見通しの良いコードにすることが出来ます。

SCSSでコーディング
1
2
3
4
5
6
7
8
9
10
11
.search {
  margin: 30px;

  &__input {
    font-size: 18px;
  }

  &__btn {
    color: red;
  }
}
まとめ

・hamlはerbよりもコードの記述を少なく書ける言語です。
・閉じタグが不要なためコードがとてもシンプルになります。

・hamlは、BEMとSassを使うことで効率良くコーディングすることが出来ます。