RailsでHamlを書く

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

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

```haml:haml
%div
%a
%input
%header
```
```html:結果(HTML)
<div></div>
<a></a>
<input>
<header></header>
```
##クラス名、ID名
クラス名は「.(ドット)」、ID名は「#(シャープ)」をそれぞれHTMLタグの後ろにつけることで作成できます。
「.」や「#」を連続することで複数のクラス名やID名をつけることができます。

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

```haml:haml
%div.class-name
%div#id-name
%div.class1.class2.class3
.no-html-tag
#no-html-tag
```
```html:結果(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:haml
.parent
  .child
```
```html:結果(HTML)
<div class="parent">
  <div class="child"></div>
</div>
```

```haml:haml
.parent
  .child
    子供だよ
```
```html:結果(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:haml
.parent
  .child
    .grandchild
  .brother
.parent-brother
  .child
```
```html:結果(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:erb
<%= link_to root_path %>
<% hello = "こんにちわ" %>
<%= hello %>
```
```haml:haml
= link_to root_path
- hello = "こんにちわ"
= hello
```
```html:結果(HTML)
<a href="/">/</a>
こんにちわ

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

##クラス名・ID名
ヘルパーメソッドにクラス名・ID名を付与する場合はHTMLタグとは違い、それぞれのヘルパーメソッドの構文に従います。
例えば[Link_to](https://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to)は以下のような書き方が可能なのでそれに従って書きます。

```erb:構文
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:haml
= link_to "リンクだよ",root_path,{class:"class-name",id:"id-name"}
= link_to root_path,{class:"class-name",id:"id-name"} do
  リンクだよ
```

```html:HTML(結果、どちらも同じ)
<a class="class-name" id="id-name" href="/">リンクだよ</a>
```

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

```haml:haml
%div
  = link_to root_path -#=>正　2space nest
 =  link_to root_path -#=>誤　1space nest
```
```html:結果(HTML)
<div>
  <a href="/">/</a>
</div>
```

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

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

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

```haml:haml
= link_to root_path do
  リンクだよ
```
```html:結果(HTML)
<a href="/">リンクだよ</a>
```

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