Hamlが5分で分るチートシート [Rails初心者チュートリアル]

プログラム初心者な方向けに始めたRailsチュートリアル『Rails x Herokuでアプリを作成』の第2段です。今回はRubyの代表的なテンプレートエンジンhamlを使って、RailsのViewを書き換えてみます。また、Hamlをすでに使っている人向けにも適したTips的なチートシートを作りました!

(02/14 07:20) タイトルと導入説明を修正


🍣 目次

(1) RailsのViewとは?

(2) Hamlとは?

(3) Gem Hamlのインストール

(4) チートシート

(5) 実際のコーディングで

🐰 (1) RailsのViewとは?

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

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

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

😀 (2) Hamlとは?

Haml』とは簡単にいうとHTMLをより簡単に書くためのビューテンプレートエンジンです。

これをつかいこなせるようになるとHTMLよりもシンプルに記述できます。

http://dotinstall.com/lessons/basic_haml

なんとドットインストールには『Hamlの入門用の動画』までありました。感謝・感謝です。

http://haml.info/docs/yardoc/file.REFERENCE.html#ruby_blocks

こちらは公式のHamlのリファレンスです。英語ですが、わかりやすく網羅されているので一読の価値ありです!

😼 (3) Gem Hamlのインストール

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

# Haml
gem 'haml-rails'

記述が終わったら、次のコマンドでgemをインストールします。

bundle install

上のコマンドが完了すると、Railsのプロジェクトでhamlを使えます。

👽 (4) チートシート

一番基本的な記法

まずは一番シンプルに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>

🎳 (5) 実際のコーディングで

ここまでHAMLのいくつかのサンプルを示しました。あとは実践しながらHAMLを覚えていくのが一番だと思います。

http://html2haml.heroku.com/

ちなみに、上はHTML => HAMLに変換してくれるサービス『HTML 2Haml』です。これを使って参考サイトをHTML => HAMLに変換したうえで、少しずつ変更していくととっつきやすいかもです。

お願い

個人的に初心者向けにRuby/Railsを教える機会が増えています。この記事に関連する分野で効率的に勉強するのにお勧めな資料をご存じなら、Twitterで@zyunnosukeにメッセージorコメントいただけたら感激します!

逆にこの記事を使ってトライしたら、なんかうまく動かない的な話も同じく大歓迎です。いつでもメッセージください!

🤔 参考リンク

マークアッパー的 Haml入門21の手引き

😸 変更来歴

(02/14 07:20) タイトルと導入説明を修正

📚 おすすめの書籍