◆概要
Ruby on Rails学習者向けのhamlの解説です。
初学者の方は基本的なclassなどの書き方は勿論ですが、特に後半の「hamlのよくあるエラー集」を参考にしていただければと思います。
◆hamlって？
html.erbの派生版。
少し難易度は上がるもののコードの量が減りhtml.erbに比べて読みやすいコードになりやすい。
Railsで使用する際にはhaml-railsというgemが必要。
●これがhtml.erb
<div id="information">
<% if controller.action_name == "index" %>
ここはトップページです。
<% else %>
ここはトップページではありません。
<% end %>
</div>
<div class="back-gray border-black" id="menu">
<%= link_to "トップページへ", root_path %>
<br>
<%= link_to hoge_path do %>
hogeページへ
<% end %>
</div>
●これがhtml.haml
# information
-if controller.action_name == "index"
ここはトップページです。
-else
ここはトップページではありません。
# menu.back-gray.border-black
= link_to "トップページへ", root_path
%br
= link_to hoge_path do
hogeページへ
●hamlのメリット
- 閉じタグ（</hoge>）や<% end %>を記述しなくて良いので記述量が減る。
- 閉じタグ忘れなどの些細なミスが減る。
- インデント（半角スペース）のルールが厳しいので、コードが汚くなりにくい。
●hamlのデメリット
- html.erbの頃では出なかったエラーが出るので最初はエラーが頻出する。
●Q. hamlってエラー出やすくなるだけだしerbで良くない？
●A. 確かに最初は戸惑いますがこの記事の内容が頭に入っていればそうそう躓くことはなくなるので慣れましょう！
◆hamlの基本
●タグ、class、IDの指定の仕方
<p class="hoge fuga" id="foo">
こんにちは
<br>
いいお天気ですね
</p>
%p#foo.hoge.fuga
こんにちは
%br
いいお天気ですね
- タグを指定する際は「%タグ名」と書く（省略するとdivタグになる）。
- classを指定する際は「.class名」と書く。複数のclassを設定する場合は.class名を繋げる。
- idを指定する際は「#id名」と書く。
●タグ、class、idの書き方一覧
| html.erbの場合 | html.hamlの場合 | |
|---|---|---|
| タグ | <p></p> | %p |
| タグ+class | <p class="hoge fuga"></p> | %p.hoge.fuga |
| タグ+id | <p id="fuga"></p> | %p#fuga |
| タグ+id+class | <p id="fuga" class="foo bar"></p> | %p#fuga.foo.bar |
●ネスト（入れ子）の仕方
htmlの場合は以下のようにネストしました。
<p>
<span>
ほげほげふがふが
<span>
</p>
hamlの場合は以下のようにネストしたいものの行のインデントを下げます（半角スペースを入れます。）
%p
%span
ほげほげふがふが
●viewファイル内でRubyのコードを使う。
viewファイル内でRubyの処理を使いたい場合、erbでは以下のように<%= %>や<% %>を使いました。
<% fruits = ["りんご", "みかん", "ぶどう"] %>
<% fruits.each do |fruit| %>
<%= fruit %>
<% end %>
hamlの場合は以下のように書くので<% end %>は不要です（書かないだけで存在はしています）。
- fruits = ["りんご", "みかん", "ぶどう"]
- fruits.each do |fruit|
= fruit
| html.erbの場合 | html.hamlの場合 | 使い分け | |
|---|---|---|---|
| 画面に出力したくないもの | <% if user_signed_in? %> | - if user_signed_in? | if, eachなど |
| 画面に表示したいもの | <%= current_user.name %> | = current_user.name | form_with, renderなど |
◆hamlのよくあるエラー集
hamlではerbと違って文法を間違えるとすぐにエラーが起きます。エラーは大抵の場合インデントに依るものです（もしくはカンマなど）。
主要なものを紹介します。
●パターン①：全体のインデントが統一されていない。
インデントの増やしていく数は、最初のインデントによって決まります。例えば最初にネストした際にインデントを２つ下げた場合、以降の行でも2つずつ下げる必要があります。途中で変更するとエラーが出ます。インデントは半角スペース2つずつで統一すると覚えておきましょう。
.hoge
.fuga
.foo
.bar
.abc
.def
・実際のエラー画面
●パターン②：途中で一気にインデントが増えている。
インデントは徐々に増やしていく必要があります。例えば最初にインデントを2つ下げた場合、以降も２つずつ下げましょう。途中で一気に3つ4つ増やすとエラーが起きます。
.hoge
.fuga
.foo
・実際のエラー画面
●パターン③：ネストしてはいけないものでネストしている、もしくはネストするべきものでネストしていない。
hamlでは<% end %>は記述しませんが省略しているだけで存在はしています。ネストを誤るとendの数がおかしくなります。
SyntaxErrorが出た際に以下のようなメッセージが含まれている場合はendの数がおかしくなっています。
syntax error, unexpected ensure, expecting end-of-input ensure
syntax error, unexpected end-of-input, expecting end
それではパターンをいくつか見ていきましょう。
ネストしてはいけないものでネストするとエラーが発生します。
= render 'foo'
.hoge
= form_for @message do |f|
= f.text_field :text
.hoge
・実際のエラー画面
ネストするべきものでネストしていない場合もエラーが発生します。doがある場合は何らかをネストする必要があります。
= form_for @message do |f|
= f.text_field :text
- fruits = ["りんご", "みかん", "ぶどう"]
- fruits.each do |fruit|
= fruit
= link_to root_path do
トップページへ
・実際のエラー画面
文字列で何かをネストした際にもエラーが発生します。
.hoge
こんにちわ
.fuga
おはよう
.hoge こんにちわ
.fuga
おはよう
・実際のエラー画面
「文字列でネストしてはいけない①と②」は書き方が違うだけで内容は同じです。②のような書き方（要素と同じ行に文字列を書く）はエラーを起こしやすいので避けましょう。
●パターン④：1行目にインデントがある。
1行目はインデント（半角スペース）なしである必要があります。
.wrapper
.header
.header__title
ページタイトル
・実際のエラー画面
●パターン⑤：カンマに過不足がある。
haml特有というよりはerbでも発生しますが紹介します。
= form_for @message do |f|
= f.text_field :text placeholder: "ほげほげ"
・実際のエラー画面
