gemを使いhamlを導入する
gem 'haml-rails'
gem 'erb2haml' # 現在erbでファイルを作成していてhamlに書き換えたい場合はこちらをインストール
bundle install
※erb2hamlを使いerbファイルをhamlに書き換える場合
rails haml:convert_erbs # erbファイルを残して新しく作り直す場合はこちらのコマンド
rails haml:replace_erbs # erb自体をhamlファイルに変更したい場合はこちらのコマンド
rails haml:convert_erbsを実行してみる。
画像上: 変更前(.erb)
画像下: 変更後(.haml)
また、画像ではerbファイルだけではなくhamlファイルもコードが色分けされていますがこちらはVScodeのプラグイン「Better Haml」を使用しています。
これでhamllを書ける準備ができました。
hamlの基本文法
・タグの書き方が違う
HTMLでは、<タグ名>タグ名>と記述するするhamlでは%を使って表します。例えば、
.html
<p>これはHTMLです</p>
と記述するところを
.haml
%p これはhamlです
と記述します。なお、閉じタグを書く必要はありません。
・インデントに注意が必要
htmlではインデントがずれていたとしても影響せずに表示されますが、hamlではインデントがしっかりしていなとエラーとなり画面表示されません。例えば
%ul
%li
と書かなければいけないところを
%ul
%li
と書いてしまった場合（そんな書き方しないとは思いますが）
Haml::SyntaxError
というエラーが発生します。しかし、エラーが出ないよう書いていけば自然とコードが綺麗になっていくとも捉えられるので綺麗なコードを書くための仕組みと思いたいです。
・クラス、IDの指定方法
クラスとIDの指定の仕方はCSSの書き方と同じです。
<div class="huga" id="hoge"></div>
.haml
%div.huga#hoge
のようにかけます。ちなみにクラスやIDを指定すると%divを省略することができます。
.haml
.test#test
Railsのコードの書き方
・<%= %> <% %>
.erb
<% users.each do |user| %>
<%= user.name %>
<% end %>
hamlだとこうなります。
.haml
- @users.each do |user| # 表示しない場合は - で表す
= user.name # 表示する場合は = で表す
・if分
.haml
- if x == y
%p yes
- else
%p no
・link
= link_to 'hamlでlink_toを書いてみる', root_path, class: 'hoge', id: 'huga'
まだまだ勉強途中なので書き方どんどん追加していきます。