酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です！

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(モデル)との間の橋渡しを担当

今回はWebブラウザで簡単に確認できる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を開いて、 次のコードを「追加」します。

1
2

# Haml
gem 'haml-rails'

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

1

bundle install

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

(4) チートシート

一番基本的な記法

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

1

%p Hello!

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

1

<strong>Hello!</strong>

階層構造

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

1
2
3

%gee
  %whiz
    Wow this is cool!

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

1
2
3
4
5

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

属性情報の付加

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

1
2

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

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

1
2
3
4
5
6

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

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

1
2

#my-id Contents
.my-class Contents

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

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

1

-# test comment

HTMLに残すコメント

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

1

/ This is the peanutbutterjelly element

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

1

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

Rubyの変数を使う

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

1
2
3
4
5

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

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

1
2
3
4

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

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

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

1
2
3
4
5
6
7
8

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

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

1
2
3

<p>
  2?
</p>

Rubyのブロックを使う

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

1
2
3

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

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

1
2
3
4
5
6

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

HTMLのエスケープ

1

&= "I like cheese & crackers"

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

1

I like cheese &amp; crackers

フィルター機能

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

1
2
3

:markdown
    # Greetings
    Hello, *World*

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

1
2
3
4

<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の宣言

1

!!! 5

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

1

<!DOCTYPE html>

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

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

http://html2haml.heroku.com/

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

お願い

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

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

Special Thanks

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

変更来歴

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

押さえておきたい書籍

いかがだったでしょうか？
もし説明がわかりにくかったり、間違っている場所があればぜひ一言！

Comments