概要

初心者向けにhamlの基礎的な書き方とhamlにおけるrailsヘルパーメソッドのルールを書きました。
特にヘルパーメソッドの書き方は初心者がよくsyntaxエラーを起こしやすい箇所なので参考になればと思います。

HTMLタグ

基礎

HTMLタグは基本的に「%」をつければOKです。

haml

%div
%a
%input
%header

結果(HTML)

<div></div>
<a></a>
<input>
<header></header>

クラス名、ID名

クラス名は「.(ドット)」、ID名は「#(シャープ)」をそれぞれHTMLタグの後ろにつけることで作成できます。
「.」や「#」を連続することで複数のクラス名やID名をつけることができます。

また、HTMLタグ無しでクラス名やID名を記述するとdivタグになります。（divタグの省略記法）

haml

%div.class-name
%div#id-name
%div.class1.class2.class3
.no-html-tag
#no-html-tag

結果(HTML)

<div class="class-name"></div>
<div id="id-name"></div>
<div class="class1 class2 class3"></div>
<div class="no-html-tag"></div>
<div id="no-html-tag"></div>

入れ子(ネスト)

ネストは半角２スペースで表現します。
（厳密に言うと2スペース以外もできますが、通例では２スペースです。）

haml

.parent
  .child

結果(HTML)

<div class="parent">
  <div class="child"></div>
</div>

haml

.parent
  .child
    子供だよ

結果(HTML)

<div class="parent">
  <div class="child">子供だよ</div>
</div>

ネストの深さでどのHTMLタグがどのHTMLタグの親かが決定します。
最初は見慣れないですが、慣れると可読性が高く、記述もHTMLより素早くできます。

読むコツとしてはそのHTMLタグから視線をまっすぐ下に降ろすことです。

＜下記hamlコードを例に＞
「.parent」の子供はどこまでかを把握したい場合
「.parent」と同じネストの深さ（０ space）で書かれているのは「.parent-brother」なので、それまでの「.child」「.grand.child」「.brother」が子供です。

「.child」の子供はどこまでかを把握したい場合
「.child」と同じネストの深さ（2 space）で書かれているのは「.brother」なので、それまでの「.grand.child」が子供です。

「.brother」の子供はどこまでかを把握したい場合
次の行が自分より浅いネスト(0 space)の「.parent-brother」なので「.brother」は子供がありません。

haml

.parent
  .child
    .grandchild
  .brother
.parent-brother
  .child

結果(HTML)

<div class="parent">

  <div class="child">
    <div class="grandchild"></div>
  </div>

  <div class="brother"></div>
</div>

<div class="parent-brother">
  <div class="child"></div>
</div>

railsヘルパーメソッド

基礎

erbでは変数やヘルパーメソッドなどの表示したいものは「<%= 記述 %>」
ifやeachなどの表示したくない処理等は「<% 記述 %>」で記述していました。

hamlでは以下になります。

表示したいものは「= 記述」
表示したくないものは「- 記述」

erb

<%= link_to root_path %>
<% hello = "こんにちわ" %>
<%= hello %>

haml

= link_to root_path
- hello = "こんにちわ"
= hello

結果(HTML)

<a href="/">/</a>
こんにちわ

<!-- 「- hello = "こんにちわ"の部分は表示されない」 -->

クラス名・ID名

ヘルパーメソッドにクラス名・ID名を付与する場合はHTMLタグとは違い、それぞれのヘルパーメソッドの構文に従います。
例えばLink_toは以下のような書き方が可能なのでそれに従って書きます。

構文

link_to(body, url = {}, html_options = {})
  # url is a String; you can use URL helpers like
  # posts_path

link_to(url, html_options = {}) do
  # name
end

haml

= link_to "リンクだよ",root_path,{class:"class-name",id:"id-name"}
= link_to root_path,{class:"class-name",id:"id-name"} do
  リンクだよ

HTML(結果、どちらも同じ)

<a class="class-name" id="id-name" href="/">リンクだよ</a>

ネスト

ネストのルールはHTMLの項目で述べたものと同じく半角２スペースが通例です。
ここで意識すべきは記述の始まりは「=」や「-」であることです。
以下は「link_to」の始まりが揃っていますが、「=」の位置が違うのでネストの深さが違います。
初心者はよくここでエラーを起こしやすいです。

haml

%div
  = link_to root_path -#=>正　2space nest
 =  link_to root_path -#=>誤　1space nest

結果(HTML)

<div>
  <a href="/">/</a>
</div>

また、逆にrailsヘルパーメソッドへ他の要素をネストさせる場合はヘルパーメソッドの構文に従います。

ここで意識すべきは「do end」で閉じる系のメソッドはendの閉じタグが不要になることです。
例えば「do end」で閉じて他の要素をネストさせることができるlink_toは以下のようになります。

erb

<%= link_to root_path do %>
  リンクだよ
<% end %>

haml

= link_to root_path do
  リンクだよ

結果(HTML)

<a href="/">リンクだよ</a>

おわりに

初心者に「公式ドキュメントを読め！」は流石に鬼畜な気もするので近日中に頻出ヘルパーメソッドについてはまとめようかと思います。
また、当記事を読んで疑問・修正等があればコメントいただけると助かります。
いいねをしていただけるとモチベーションになります！！

RailsでHamlを書く

概要

HTMLタグ

基礎

クラス名、ID名

入れ子(ネスト)

railsヘルパーメソッド

基礎

クラス名・ID名

ネスト

おわりに