【Haml】 rubyがあっても、音速でhtmlを作れる

　目的

hamlが苦手で、全く書き方が分かっていなかったので自分のためにまとめる

Hamlとは

HamlとはHTML abstraction markup languageの略で、より簡単にHTMLを生成できるように作られたテンプレートエンジンです。

記述例

html.erb

<section class=”container”>
  <h1><%= post.title %></h1>
  <h2><%= post.subtitle %></h2>
  <div class=”content”>
    <%= post.content %>
  </div>
</section>

html.haml

%section.container
  %h1= post.title
  %h2= post.subtitle
  .content
    = post.content

特徴

• 閉じタグ不要
• rubyのend不要
• インデントで階層構造を表す

つまりerbよりシンプルに、簡単に、短く記述できる。
アップル製品のような洗練されている感じ笑

Hamlを入れる

haml-railsgemをインストールすれば、RailsにHamlを導入できます。

Gemfileに以下を追加して、bundle installすれば導入完了です。

インストールしたらサーバを再起動。

gem "haml-rails", "~> 2.0"

Hamlにerbを一発変換

下記のコマンドで、erbをhamlに一発で変換する魔法のコマンド
※ハッシュロケットで変換される？ことがあるので、古い記法シンボル型に直します。(下記参照)
https://note.com/punako/n/n613cf20419ca

$　rails haml:erb2haml

Haml書き方

タグ前に%と半角スペース2個のインデント

%p  p

生成されるHTML

<p>p</p>

ネスト

%div
  AAA
  %p
    %span
      BBB

生成されるHTML

<div>
  AAA
  <p>
    <span>
      BBB
    </span>
  </p>
</div>

idとclassのつけ方

%div#AAA abc
%p.BBB abc
%p(class="CCC") abc

生成されるHTML

<div id="AAA">abc</div>
<p class="BBB">abc</p>
<p class="CCC">abc</p>

属性を付ける

src,href,name,titleといった属性を表示する方法です。
“<“を末尾につけると一行で出力されます。

%a(href="google.com" title="google")<
  google!!

生成されるHTML

<a href="google.com" title="google">google!!</a>

rubyを書く(使うパターン)

<%= %>

html.haml

= @user.name

html.erb

<%= @user.name %>

<% %>

erb

<% if @user.present? %>

haml

- if user.present?

画像を乗っける時

= image_tag "material/icon/icon-03.png", class:"image"

/profiles のページに飛ばしたい場合
以下どちらかの書き方がある。

sample.html.haml

#以下のどちらでもよい
= link_to "/profiles" do #①
= link_to profiles_path do #②

　参考文献

http://haml.info/
https://techacademy.jp/magazine/22212
https://morizyun.github.io/ruby/library-template-engine-haml.html