はじめに

RailsでWebアプリにPay.jpを用いた決済機能を実装しようとしていました。
実装フローを検索していたところ、Hamlを使ってビューが実装されているドキュメントが多く、興味本位で学習しました。
これから学習しようとしている方の参考になればと学習したことをまとめてみました。

TL;DL

・RubyをベースとしたHTMLのテンプレートエンジンのこと
・HTMLよりもシンプルに記述できる
・Ruby / Ruby on Railsでも使われている

前提知識

・HTML
・Ruby（Rubyがベースになった記法だから）
・Ruby on Rails（Railsで使いたい場合）

大枠の使い方

① 拡張子がhamlのファイルを作成する（Ex.index.haml）
② 作成した①をhamlコマンドに通す（Ex. haml index.haml index.html ）
③ htmlファイルが生成される（Ex.index.html）

※ hamlのコマンドオプション（よく使うもの）
-f format → アウトプットのフォーマットを指定（html5）
-q → ダブルクオーテーションを出力

具体的な記述の仕方

【POINT】hamlの記法

１. 接頭辞でコンテンツの内容を表現
２. インデントで階層構造を表現

この二つの概念と接頭辞の種類さえ抑えれば、基本的な表現であれば、hamlで表現できないことはなくなるはずです。

接頭辞

接頭辞	接頭辞の意味
!!!	DOCTYPE
%	開始タグと終了タグ
{:属性 => 値}	タグに属性を追加する（Rubyっぽい）
(属性 = 値)	タグに属性を追加する（HTMLっぽい）
%p テキスト	pタグに囲われたテキスト
<	タグ内部の改行を除去
>	タグ外部の改行を除去
%p{:id=>"id", :class=>"class"}	`<p id="id" class="class"></p>`
%p(id="id" class="class")	`<p id="id" class="class"></p>`
%p.class	`<p class="class名"></p>`
%p#id	`<p id="id名"></p>`
#id.class	`<div id="id" class="class"></div>`
:css	styleタグ
:javascript	scriptタグ
#{〜}	〜にRubyのコードを実行して表示
%p=〜	〜のRubyのコードを実行して表示
- 〜	〜のRubyのコードを実行して表示しない
/	HTMLとHaml両方に残したいコメント
-#	Hamlにだけ残したいコメント

インデント

HTMLの入れ子構造を作るために使用する
※ 同じ階層の要素は同じインデントの数に統一すること

コメント

/ → HTMLでも残したいコメント
-# → Hamlにだけ残したいコメント

フォーマット

HTMLと同様、最初に記載する型は決まっているので、自分用に念の為記載します。

①hamlファイルを作成する

!!!
%html{:lang => "ja"}
  %head
    %meta(charset="UTF-8")
  %body

    / 一般的なタグの生成
    %p hellow world!

    / ul, liタグの生成
    %ul
      %li<
        item

    / divの生成
    %div#id.class
    %div{:id=>"id", :class=>"class"}
    %div(id="id" class="class")
    #id.class

    / Rubyの実行と表示
    #{ 3 + 5 }
    %p= 3 + 5
    - 3 + 5

②作成したファイルをhamlコマンドに通す

haml index.haml index.html

③htmlファイルが生成される

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>

    <!-- 一般的なタグの生成 -->
    <p>hellow world!</p>

    <!-- ul, liタグの生成 -->
    <ul>
      <li>item</li>
    </ul>

    <!-- divの生成 -->
    <div id="id" class="class"></div>
    <div id="id" class="class"></div>
    <div id="id" class="class"></div>
    <div id="id" class="class"></div>

    <!--  Rubyの実行と表示  -->
    8
    <p>8</p>

  </body>
</html>

上のhamlファイルをhtmlに変換すると、下のhtmlファイルのような記載になります。

参考文献

ドットインストール haml入門（全8回）

※ hamlをRailsで使う方法は以下の記事が参考になります。
- 【rails】htmlからhamlに一括で変換するコマンド
- Railsでhamlを使う