【学習57日】Hamlを自分のために勉強しよう！【応用19日】

Haml とは

Haml（ハムル） とは？

・HTML abstraction markup language　の略
　（abstraction＝抽象化）
・HTMLよりも簡単に書けるビューテンプレートエンジン
・より少ない労力でHTMLを書ける
・CSSにおけるSassのようなもの
・Gemをインストールして使用する

導入方法は？

①rails アプリの中のGem.fileに以下を記入
gem 'haml-rails'
②タームナルで bundle install

RailsアプリにおいてerbからHamlに変換する方法は？

タームナルで以下のコマンドを入力
rails haml:erb2haml
・実行するとapp / viewsフォルダー内のファイルの拡張子が.hamlに切り替わる

基本の記述方法

Haml :: Tutorial

このサイトを和訳しながらまとめる

■erb
<strong> <%= item.title %> </strong>

■Haml
%strong = item.title

■タグ表記

erb ：<タグ名></タグ名>で囲う
Haml：％タグ名　　　　　　　　

■RubyコードをHTMLに出力

erb ：<%= %>で囲う
Haml：＝の右側に表記（囲う必要なし）
　 （＝で結ぶとRubyの文字列と認識される）

属性の追加

■erb
<strong class="code" id="message">Hello, World!</strong>

■Haml
%strong{:class => "code", :id => "message"} Hello, World!

■属性の表記場所

erb ：<タグ名●●●●●●●></タグ名>
Haml：％タグ名｛●●●●●●●｝
（ハッシュの形式で記入　:class => "code"） 　　　

class属性・id属性は省略できる！

■Haml（省略前）
%strong{:class => "code", :id => "message"} Hello, World!

■Haml（省略後）
％strong.code＃message Hello、World！

■classとidはよく使われるので省略

:class =>　　→　.
:id =>　　→　#

divタグは丸々省略できる！

■HTML
<div class='content'>Hello, World!</div>

■Haml（省略前）（本当はこんな記述はない）
%div{:class => "content"} Hello, World!

■Haml（省略後）
.content Hello, World!

■divタグは丸々省略 divタグは非常に一般的であるため、
タグ定義を省略し、
デフォルトで％divにすることができます。

属性もRubyの中から引っ張る場合

■erb
<div class='item' id='item<%= item.id %>'>
  <%= item.body %>
</div>

■Haml
.item{:id => "item#{item.id}"}= item.body

■メモ
・idをRubyの中から引っ張ってくる
（idがその都度変わる）場合は、
　＃id名で省略せずに書く
・#{item.id}　で囲む
（＝で結ぶとRubyの文字列と認識される）

haml に HTML5 のカスタムデータ属性(data-*) を定義する方法 - Qiita

ネスト構造はタブ（スペース）で

■erb
<div id='content'>
  <div class='left column'>
    <h2>Welcome to our site!</h2>
    <p><%= print_information %></p>
  </div>
  <div class="right column">
    <%= render :partial => "sidebar" %>
  </div>
</div>


■Haml
#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"

HTMLと違って<>で囲わないので
ネスト構造には気をつける

最後に一言

英語で記載された説明サイトがポップで笑う
This stuff is fun!
Doesn’t that just make you smile?