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に変換してくれます。

<strong>Hello!</strong>

階層構造

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

%gee
%whiz
Wow this is cool!

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

<gee>
<whiz>
Wow this is cool!
</whiz>
</gee>

属性情報の付加

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

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

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

<div id="my-id">
Contents
</div>
<div class="my-class">
Contents
</div>

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

#my-id Contents
.my-class Contents

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

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

-# test comment

HTMLに残すコメント

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

/ This is the peanutbutterjelly element

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

<!-- This is the peanutbutterjelly element -->

Rubyの変数を使う

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

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

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

<div class="fuga">
test message is fuga
like
</div>

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

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

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

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

<p>
2?
</p>

Rubyのブロックを使う

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

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

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

<p>42</p>
<p>43</p>
<p>44</p>
<p>45</p>
<p>46</p>
<p>See, I can count!</p>

HTMLのエスケープ

&= "I like cheese & crackers"

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

I like cheese &amp; crackers

フィルタ機能

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

:markdown
# Greetings
Hello, *World*

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

<p>
<h1>Greetings</h1>
<p>Hello, <em>World</em></p>
</p>

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宣言にしてくれます。

<!DOCTYPE html>

🎂 応用編

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

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

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

😎 参考リンク

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍