haml記法まとめ - こたつとみかんとプログラミング

今週からお試しで働く会社が haml で書いているということで、erbファイルを haml に書き換えた。

Rails での使い方

Gemfile に haml-rails を追加して、bundle install
ファイル拡張子の部分を erb から haml に変更。または同名で拡張子が haml のファイルを作る。
erb 拡張子ファイルを削除。（同じファイルがあると、erbの方が優先して読み込まれるため）

自動変換について

haml-rails をインストールすると、erb2haml という hamlに自動変換するgem も一緒にインストールしてくれる。
以下のコマンドで自動変換。

# erbファイルを残して変換
$ rake haml:convert_erbs

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

今回は書く練習をしたかったので、自動変換を使わずファイルをひとつづつ自分でコードを記述していった。（ファイル数が多くてめちゃ大変だった。大量にある場合は自動変換したほうが絶対便利。
以下、記法まとめ。

基本的に、各タグは「%」が先頭

!!!
%html
  %title これはテストです
  %meta
  %body
    %header
      = yield
    %footer

「!!!」で「docutype html」になる。
各タグの頭に「%」をつける。閉じタグいらない。
インデントで書く。（スペースずれなど一個でもあると作動しない）
上のコードを html に直すとこうなる↓

<!DOCTYPE html>
<html>
  <title>これはテストです</title>
  <meta></meta>
  <body>
    <header></header>
    <!----- ※ 各ページ内容が入る ----->
    <footer></footer>
  </body>
</html>

divは省略が可能。 class と id の指定方法

/ コメント
.collapse.navbar-collapse#head-menu
  %h1 メニュー
  %ul.language_list
    %li Ruby
    %li Rails
    %li HTML
  %p
    これは、わかりやすいサイトです。
    %br
    これは、わかりやすいサイトです。

コメントは「/」を先頭につける。
divのみ「div」省略できる。
各タグにプラスして「.」で class 指定、「#」で id 指定できる。
複数 class がある場合は、「.」でつなげる。

ruby を使う場合は、「-」または「=」で

  = render "ayouts/header", record: @record
  = link_to "コラム", articles_path, class: "nav-link"

  / if
  - if user_signed_in?
    = render "layouts/login_user_header", record: record
  - elsif admin_signed_in?
    = render "layouts/admin_user_header"
  - else
    = render "layouts/no_login_user_header"

  / form_for
  = form_for(@user, url: users_path) do |f|
    .field
      = f.label :name
      = f.text_field :name

    .field
    = f.label :email
    = f.email_field :email

    .field
    = f.submit "ログイン"

haml 内で ruby を使用する場合は、「-」「=」を使用する。
<%= ... %>は = ...のように記述する。（render, link_to, formなど）
<% ... %>は - ...のように記述する。（if文, ループなど）

通常の文字列と変数を１行で表す場合

  %p= "#{current_user.name}さん、こんにちは"

タグ名の後にスペース空けず「=」を使用する。

provide / yield の使い方

- provide(:h1, "コラム")

  %h1.head_title
    = yield(:h1)

aria, data などの接頭辞がつく属性など

  .modal#modal-login{ aria: { hidden: :true, labelledby: "exampleModalLabel" }, role: :dialog, tabindex: "-1" }
    .modal-dialog{ role: :dialog }
      .modal-content

  %table.table.table-hover.table-bordered
        %thead.thead-light
          %tr
            %th.text-center{ rowspan: 2 } 年月日
            %th.text-center{ colspan: 3 } 朝<i class="fas fa-cloud-sun"></i>

class や id 以外の属性は、{}で囲う
aria, data など共通の接頭辞がつく属性が複数ある場合、その接頭辞同士でまとめることができる。

javascript の書き方（.js.haml）

$("#recordModal").html("<%= escape_javascript(render 'form') %>")

<%= ... %> の部分を #{} に変更する

$("#modal-record").html("#{escape_javascript(render 'form', record: @record)}")

普通に html ファイル内にスクリプトを記述するときは、%script 以下に書けば良いらしい。

haml のリンターについて

haml_lint という gem を使えば、記法のチェックができる。動作しなくてどこが間違っているかわからないというときに使えば便利そう。
使い方は github を参照。

参考記事
【Rails】hamlの書き方をマスターしよう！ | Pikawaka - ピカ1わかりやすいプログラミング用語サイト
 RubyonRails:脱.erb、Hamlのはじめの一歩 - Madogiwa Blog
hamlの基本とよくあるエラー集 - Qiita
hamlで改行コードを入れたい - ハリーかつき・旧技術ブログ
 ruby on rails - hamlでのprovide関数の書き方 - スタック・オーバーフロー
 HAML にて attributes をスッキリ書く - Qiita
html - Merged Table Headers in Haml - Stack Overflow
Hamlを使っているならhaml-lintを使ってコードレビューを楽にしよう - Sider Blog
Ruby - ruby(rails)でhamlを使っている時に、コード中の改行をしたい｜teratail
【超基本】railsで部分テンプレートを使ってみる（haml） - Qiita
[Rails] haml-railsがあればerb2hamlは不要です！ - Qiita