【Rails】 hamlの書き方をマスターしてコーディングを効率良くしよう
hamlとは、「HTML Abstraction Markup Language」の略です。htmlよりもコードを早く綺麗に、そして非常にシンプルに作ることができます。また、erbと同じでrubyのコードを埋め込むことができます。
1
2
3
4
5
6
7
%div
%h1 ピカわかメニュー
%ul
%li Ruby
%li Rails
%li HTML
%p ピカいちわかりやすいサイトです。
hamlは、rubyで使うテンプレートエンジンの一つです。
他にも有名なテンプレートエンジンとしておなじみのerbやhamlに似たslimというものがあります。
hamlには、閉じタグが存在しないのでコード自体が非常にスッキリしています。
ただ、erbの書き方に慣れているとhamlの書き方に慣れるのが大変というデメリットがありますが、hamlでの書き方をマスターしてしまえば、かなり効率よく、綺麗にビューファイルを作成することができるようになります。
テンプレートと呼ばれる通常のhtmlで書いたコードと変数などプログラミングによって書かれたコードを合成してビューファイルを作り出すものです。
hamlの使い方
この章では、hamlの使い方について解説します。
Rails にhamlを導入してみよう
Railsではデフォルトのテンプレートエンジンはerbです。
そのため、hamlを使うにはgemをインストールする必要があります。
Gemfileに下記のコードを追加し、bundle installコマンドを実行しましょう。
1
gem 'haml-rails'
こうすることによりindex.html.hamlのようにビューファイルの拡張子にhamlが使えるようになります。haml→htmlのように右から順にコンパイルされ、表示される際にはhtmlのコードに変換されます。
ビューファイルの中に同名のerbファイルとhamlファイルがある場合は、erbが優先して読み込まれるのでhamlを使いたい場合はerbファイルは削除しておきましょう。
gemとは、gem形式にパッケージングされたRuby言語用の外部ライブラリのことです。詳しくは「 gemの仕組みを図解形式で学ぼう」を参考にしてください。
gemを使ってerbをhamlに変更してみよう
もともと存在するapplication.html.erbなどをhamlに手動で書き直すのは手間ですよね。
そんな時はgemを使って自動でerbをhamlに変換することができます。
Gemfileに下記のコードを追加し、bundle installコマンドを実行しましょう。
1
gem 'erb2haml'
変換するにはターミナルで下記のコマンドを実行します。
1
2
3
4
5
# erbファイルを残して変換
$ rake haml:convert_erbs
# erbを削除して変換
$ rake haml:replace_erbs
基本的な書き方を覚えよう
それではhamlの基本的な書き方を見ていきましょう。
hamlには閉じタグという概念がありません。
代わりにインデントを使い、マークアップする範囲を指定します。
1
2
3
4
5
6
7
%div
%h1 ピカわかメニュー
%ul
%li Ruby
%li Rails
%li HTML
%p ピカいちわかりやすいサイトです。
このように閉じタグはありません。
その分、インデントでずれている部分が範囲を表します。
なのでインデントの文字数がおかしいとエラーになります。
htmlでは閉じタグがなくてもエラーは出ないで表示がおかしくなるだけですが、hamlだと下の画像のようにrailsのエラー文で確認ができるのもhamlの特徴です。
上のコードは下記のようにコンパイルされます。
1
2
3
4
5
6
7
8
9
<div>
<h1>ピカわかメニュー</h1>
<ul>
<li>Ruby</li>
<li>Rails</li>
<li>HTML</li>
</ul>
<p>ピカいちわかりやすいサイトです。 </p>
</div>
htmlファイルの一番最初に書く<!DOCTYPE html>は下記のように記述します。
1
2
3
4
!!!
# このコードにコンパイルされる
<!DOCTYPE html>
各タグなどの書き方
上の例のようにタグを使用する際はタグ名の前に%を付けます。
1
2
3
4
5
6
7
8
9
10
11
%div
%html
%meta
%header
%footer
%table
%h1
%p
%a
%ul
%li
下記のようにコンパイルされます。
1
2
3
4
5
6
7
8
9
10
11
<div></div>
<html></html>
<meta></meta>
<header></header>
<footer></footer>
<table></table>
<h1></h1>
<p></p>
<a><a>
<ul></ul>
<li></li>
属性の書き方
タグ内の属性は下記の2つの記述で指定します。
aタグの例をみてみましょう。
1
2
%a(href='http://www.pikawaka.com')
ピカわか
ハッシュのような記述でも指定できます。
1
2
%a{ href: 'http://www.pikawaka.com' }
ピカわか！
上の2つのコードはコンパイルされると下記のコードになります。
1
2
3
<a href="http://www.pikawaka.com">
ピカわか！
</a>
imgタグなどの場合もこうなります。
1
2
%img (src="pika.jpg" alt="ピカわか")
%img{ src: "pika.jpg", alt: "ピカわか" }
このコードは下記のようにコンパイルされます。
1
<img src="pika.jpg" alt="ピカわか">
IDとclassの書き方
IDとクラスの指定は下記のように記述します。
1
2
3
4
5
6
7
# idの指定
%div#pikawaka
ピカわか
# クラスの指定
%div.pikawaka
ピカわか
このコードは下記のようにコンパイルされます。
1
2
3
<div id="pikawaka">ピカわか</p>
<div class="pikawaka">ピカわか</p>
このようにidは#を、クラスは.をつけるだけで定義することができます。
非常に簡潔にかけますね！
複数定義する場合は下記のように記述します。
1
2
3
4
5
%div#pikawaka.hoge.fuga
ピカわか
%div.pikawaka.hoge
ピカわか
このコードは下記のようにコンパイルされます。
1
2
3
<div id="pikawaka" class="hoge fuga">ピカわか</p>
<div class="pikawaka hoge">ピカわか</p>
このように「.」で連結するとクラスをその分増やすことができます。
またidとクラスを使う時divタグは省略して書くことができます。
1
2
3
4
5
#pikawaka
ピカわか
.pikawaka
ピカわか
下記のようにコンパイルされます。
1
2
3
<div id="pikawaka">ピカわか</div>
<div class="pikawaka">ピカわか</div>
このように非常に簡潔に書けるので「%div」は使わず、このように「.クラス名」として使うということを覚えておきましょう。
コメントアウトの書き方
コメントアウトは下記のように記述します。
1
/ コメントアウトする
下記のようにコンパイルされます。
1
<!-- コメントアウトする -->
複数行のコメントアウトは下記のように記述します。
1
2
3
/
1行目のコメントアウト
2行目のコメントアウト
下記のようにコンパイルされます。
1
2
3
4
<!--
1行目のコメントアウト
2行目のコメントアウト
-->
コンパイルされるhtmlにコメントを表示させたくないときは下記のように記述します。
1
2
3
%p ピカわか
-# haml内だけに表示したいコメントアウトです
%p ピカいちわかりやすい
このようにコンパイル後のファイルにはコメントは表示されません。
1
2
<p>ピカわか</p>
<p>ピカいちわかりやすい</p>
javascriptの書き方
javascriptは下記のように記述します。
1
2
3
:javascript {
コード
}
下記のようにコンパイルされます。
1
2
3
<script>
コード
</script>
または下記のように記述することもできます。
1
%script alert('ピカいちわかりやすい！');
これは下記のコードにコンパイルされます。
1
<script>alert('ピカいちわかりやすい！');</script>
javascriptを拡張子のhamlで書く場合は下記のように記述します。
1
2
:plain
alert('ピカいちわかりやすい！');
javascriptファイル内なので<script>は不要です。
ですので:javascriptも不要です。
ですが、何も指定しないとhamlコードとして読み込んでしまうので、それを防ぐために:plainを指定してあげればOKです。
このようにjavascriptファイルにおいてはhamlで書く必要性が全くないので、通常通りjsファイルで作成しましょう。
カスタムデータ属性の書き方
HTML5から追加されたカスタムデータ属性は下記のように記述します。
1
%span{ data: { 属性名: '値' } }
例を見てみましょう。
1
2
3
4
%span{ data: { target: 'hogehoge' } }
# 下記のようにコンパイル
<span data-target='hogehoge'></span>
カスタムデータ属性とは、「data-hogehoge」 のような形式で、「data-」を最初につけて定義します。
これは自分で自由に指定ができる属性です。
主にjavascriptで定義した属性にアクセスしたいときなどに使用します。
rubyのコードを書いてみよう
hamlファイル内でrubyのコード使用するには下記のように記述します。
rubyタグの書き方
<%= ... %>は = ...のように記述します。
<% ... %>は - ...のように記述します。
1
2
3
4
<% @articles.each do |article| %>
<p><%= article.title %>
<p><%= article.body %>
<% end %>
上のコードをhamlで書くと下記のコードになります。
1
2
3
- @articles.each do |article|
%p= article.title
%p= article.body
閉じタグの<% end %>はインデントで指定しているので不要です。
変数の定義の仕方
hamlではhamlファイルの中で変数を定義することができます。
1
2
- name = 'ピカわか'
%p= "私の名前は#{name}です。"
このように変数を展開して中身を表示させたいときは「#{}」のように式展開を使います。
下記のコードにコンパイルされます。
1
<p>私の名前はピカわかです。</p>
hamlについては、こちらの実務向けのややハイレベルなRuby on Railsの書籍にも載っています。Rails 6.0も含めて広い範囲を体系的に学べるのでおすすめ！
SassとBEMを使って効率よくコーディングをしよう
hamlは、SassとBEMを使うと、修正しやすく管理の出来る保守性あるコードにする事が出来ます。BEMとSassを利用すると、どの様にコードが管理しやすくなるのかを順番に解説していきます。
1
2
3
4
<div class="search"> <!-- Block -->
<input class="search__input"> <!-- Element -->
<input class="search__btn"> <!-- Element -->
</div>
上記のBEMで書かれたコードをhamlにすると、下記のようになります。
1
2
3
%div.search
%input.search__input
%input.search__btn{ :type => "submit" }
CSSで先ほどのコードを記述すると、BEMによる規則でクラス名が長くなってしまい、逆にコードの見通しが悪くなります。
1
2
3
4
5
6
7
8
9
10
11
.search {
margin: 30px;
}
.search__input {
font-size: 18px;
}
.search__btn {
color: red;
}
しかし、Sass(SCSS)で記述すると、下記の様に親子関係に対してネスト構造で記述することが出来るので、クラス名を簡潔に書くことが出来て見通しの良いコードにすることが出来ます。
1
2
3
4
5
6
7
8
9
10
11
.search {
margin: 30px;
&__input {
font-size: 18px;
}
&__btn {
color: red;
}
}
Sassについては「Sassを攻略してコーディングを効率良く書こう！」を、
BEMについては「CSS設計のBEMを１から理解してマスターしよう！」を参考にしてください。
この記事のまとめ
- hamlはerbよりもコードの記述を少なく書ける言語です。
- 閉じタグが不要なためコードがとてもシンプルになります。
- hamlは、BEMとSassを使うことで効率良くコーディングすることが出来ます。
