Hamlが5分で分るチートシート

今回はRubyの代表的なテンプレートエンジン「haml」を使って、RailsのViewを書き換えてみます。また、Hamlをすでに使っている人向けにも適したTips的なチートシートを作りました！

🎂 RailsのViewとは？

Railsでは次のようなMVC(Model, View, Controller)のしくみ使ってWebアプリケーションを作っていきます。

Model(モデル): 主にデータベース(MySQLやPostgreSQL)とのやりとりを担当
View(ビュー): 主にWebブラウザのhtmlの表示を担当
Controller(コントローラ): View(ビュー)とModel(モデル)との間の橋渡しを担当

今回はブラウザで簡単に確認できるViewの部分を変更してみます。

🎃 Hamlとは？

『Haml』とは簡単にいうとHTMLをより簡単に書くためのビューテンプレートエンジンです。これをつかいこなせるようになるとHTMLよりもシンプルに記述できます。次のページが入門時の参考になります。

🤔 Gem Hamlのインストール

hamlのGemをプロジェクトに追加します。Gemfileを開いて次のコードを追記します。

# Haml
gem 'haml-rails'

記述が終わったら、bundle installでgemをインストールします。上のコマンドが完了すると、Railsのプロジェクトでhamlを使えます。

🍄 チートシート

一番基本的な記法

まずは一番シンプルにHamlを書く場合。

%p Hello!

と書くと％pをhtmlのpタグと認識して次のようなHTMLに変換してくれます。

Hello!

階層構造

「半角2つ」を使って階層構造を表すこともできます。

%gee
  %whiz
    Wow this is cool!

次のようなHTMLに変換されます。


  
    Wow this is cool!

属性情報の付加

HTMLタグの属性情報は次のように記述すると

%div{id: "my-id"} Contents
%div{class: "my-class"} Contents

HTMLに変換するときに付加されます。


    Contents

Contents

ちなみにidやclassは次のように書いても同じものが表示されます。divタグの場合のみ％divを省略することもできます。

#my-id Contents
.my-class Contents

HTMLに記述されないコメント

次のように-#をつけて書いた文字列はHTMLには記述されません。

-# test comment

HTMLに残すコメント

HTMLに残すコメントはHAMLでは次のように書きます。

/ This is the peanutbutterjelly element

すると、次のようなHTML用のコメントに変換してくれます。

Rubyの変数を使う

HAML内ではRubyの変数を簡単に呼び出せます。

- hoge = "fuga"
- hagu = 'like'
%div{class: hoge}
    test message is #{hoge}
    = hagu

これをHTMLに変換すると次のようになります。


    test message is fuga
    like

Rubyのif文やcase文を埋め込む

Rubyのif文やcase文も埋め込むことが可能です。

%p
  - case 2
  - when 1
    = "1!"
  - when 2
    = "2?"
  - when 3
    = "3."

このようにhaml内にcase文を書くと、次のようにコンパイルしてくれます。

2?

Rubyのブロックを使う

Rubyの繰り返しなども簡単に使うことができます。

- (42...47).each do |i|
  %p= i
%p See, I can count!

上のような繰り返しのあるコードを次のようなHTMLに変換してくれます。

42
43
44
45
46
See, I can count!

HTMLのエスケープ

&= "I like cheese & crackers"

上のように書くと文章中の&がエスケープされて出力されます。

I like cheese & crackers

フィルタ機能

ネスト以降をすべて特定の言語としてコンパイルできます。たとえばMarkdownの場合は次のようになります。

:markdown
    # Greetings
    Hello, *World*

この場合にHTMLに変換されると次のようになります。


  Greetings
  Hello, World

Markdown以外にもかなりたくさんのフィルタがあります。

01) :coffee => CoffeeScript
02) :css => CSS
03) :erb => RHTML template(eRubyを実行できる)
04) :escaped => HTMLエスケープされたテキスト
05) :javascript => JavaScript
06) :less => LESS
07) :markdown => マークダウン
08) :plain => プレーンなテキスト
09) :ruby => Rubyのコード
10) :sass => SASS
11) :scss => SCSS

DOCTYPEの宣言

!!! 5

上のようなHAMLを書くと、下のようにHTML5用のDOCTYPE宣言にしてくれます。

🐯 応用編

エスケープ、非エスケープ

=で出力する際にエスケープした文字列を出力したい場合は&=、エスケープせずに出力したい場合は!=を使います。

1行が長くなる場合の改行

HAMLで1行が長くなる場合は最後に「,(カンマ)」を付けると改行して次の行に記述できます。

= link_to_remote 'Add to cart',
    url: { action: 'add', id: product.id },
    update: { success: 'cart', failure: 'error' }

data属性はHashのネストで表現

data属性はHashのネストを使って表現できます。

%span{ data: { hogehoge: 'mokemoke' } }

👽 実際のコーディングで

ここまでHAMLのいくつかのサンプルを示しました。あとは実践しながらHAMLを覚えていくのが一番だと思います。HTML => HAMLに変換してくれるサービス『HTML 2Haml』です。これを使って参考サイトをHTML => HAMLに変換したうえで、少しずつ変更していくととっつきやすいかもです。

HTML2Haml