はじめに
こんにちは、未経験エンジニア3年目の嶋田です。
今回は、Railsでよく使われるテンプレートエンジン「ERB」「Slim」「Haml」の基本的な書き方と、それぞれの独自特徴について紹介します。
各エンジンには特徴があり、それぞれの書き方やスタイルに違いがあります。
目次
テンプレートエンジンの特徴
1. ERB
- 閉じタグが必要： HTMLの形式に忠実
- 特徴： HTMLをそのまま書き、必要な場所にRubyコードを埋め込む
- 学習コスト： Rails初心者にとっては馴染みやすいが、HTMLが複雑になると冗長になる
2. Slim
- 閉じタグが不要： タグを省略でき、インデントで構造を表現する
-
特徴： シンプルで高速。
|を使って長いテキストを改行できるのが特徴 - 学習コスト： Slimの独自記法に慣れが必要ですが、コードが短くなる利点がある
3. Haml
- 閉じタグが不要： Slimと同じくインデントで構造を表現し、HTMLが美しく保てる
-
特徴： タグ名の前に
%を付けて記述し、.classや#idを一行で書ける - 学習コスト： Slimより少し冗長ですが、コードの可読性を重視する場合に便利
実際に書いてみての感想
それぞれの良し悪しはあると思います。
また、選定基準も人それぞれですが、個人的な書きやすさや馴染みやすさの観点で見たときには
Haml > Slim >>> ERB
という印象を持ちました。HTMLの開閉タグを省略できるSlimやHamlは、コードがすっきりして読みやすく、記述量が減るところが好印象でした。Slimは省略できすぎるのでたまにわからなくなってしまうことがあります😅
一方で、ERBは冗長になりがちで、長く複雑なHTMLを書くときにストレスを感じることが多かったです。
そして、もっとパフォーマンスや技術視点で選定ができたら、より説得力が増すのだろうと思いました。
こういった点は今後の日々の勉強で養っていきたいと感じました。
各要素の比較
1. 変数の表示
-
ERB
-
<p>こんにちは、<%= @user.name %>さん！</p> -
Slim
-
p こんにちは、#{@user.name}さん！ -
Haml
-
%p こんにちは、#{@user.name}さん！
2. if文の記述
-
ERB
-
<% if @user.admin? %> <p>管理者です。</p> <% else %> <p>一般ユーザーです。</p> <% end %> -
Slim
-
- if @user.admin? p 管理者です。 - else p 一般ユーザーです。 -
Haml
-
- if @user.admin? %p 管理者です。 - else %p 一般ユーザーです。
3. 三項演算子の使用
-
ERB
<p><%= user_signed_in? ? 'ログイン中' : 'ログアウト中' %></p> -
Slim
p = user_signed_in? ? 'ログイン中' : 'ログアウト中' -
Haml
%p= user_signed_in? ? 'ログイン中' : 'ログアウト中'
4. 長いテキストの出力（Slimの|）
-
Slimの特徴として、長いテキストを
|で改行して書くことができます。 -
p | これは長い文章で、複数行にわたる コンテンツです。このように書くことで、 コードが整然と保たれます。
ERBやHamlでは同じことを以下のように記述します。
-
ERB
-
<p>これは長い文章で、複数行にわたるコンテンツです。</p> -
Haml
-
%p これは長い文章で、複数行にわたるコンテンツです。
5. 画像の出力
-
ERB
-
<%= image_tag @user.profile_image, alt: 'プロフィール画像' %> -
Slim
-
= image_tag @user.profile_image, alt: 'プロフィール画像' -
Haml
-
= image_tag @user.profile_image, alt: 'プロフィール画像'
6. リンクボタンの表示
-
ERB
-
<%= link_to '詳細を見る', user_path(@user), class: 'btn btn-primary' %> -
Slim
-
= link_to '詳細を見る', user_path(@user), class: 'btn btn-primary' -
Haml
-
= link_to '詳細を見る', user_path(@user), class: 'btn btn-primary'
7. フォームの記述
実用例： ユーザー名とメールアドレスの入力フォーム
-
ERB
-
<%= form_with model: @user, local: true do |f| %> <div class="form-group"> <%= f.label :name %> <%= f.text_field :name, class: 'form-control' %> </div> <div class="form-group"> <%= f.label :email %> <%= f.email_field :email, class: 'form-control' %> </div> <%= f.submit '保存', class: 'btn btn-success' %> <% end %> -
Slim
-
= form_with model: @user, local: true do |f| .form-group = f.label :name = f.text_field :name, class: 'form-control' .form-group = f.label :email = f.email_field :email, class: 'form-control' = f.submit '保存', class: 'btn btn-success' -
Haml
-
= form_with model: @user, local: true do |f| .form-group = f.label :name = f.text_field :name, class: 'form-control' .form-group = f.label :email = f.email_field :email, class: 'form-control' = f.submit '保存', class: 'btn btn-success'
8. テーブルの出力
-
ERB
-
<table class="table"> <thead> <tr><th>ID</th><th>名前</th><th>メール</th></tr> </thead> <tbody> <% @users.each do |user| %> <tr><td><%= user.id %></td><td><%= user.name %></td><td><%= user.email %></td></tr> <% end %> </tbody> </table> -
Slim
-
table.table thead tr th ID th 名前 th メール tbody - @users.each do |user| tr td = user.id td = user.name td = user.email -
Haml
-
%table.table %thead %tr %th ID %th 名前 %th メール %tbody - @users.each do |user| %tr %td= user.id %td= user.name %td= user.email
まとめ
それぞれのテンプレートエンジンには良し悪しがありますが、タグを省略できるかどうかや、閉じタグの必要性、長文の改行方法など、使い勝手が異なります。以下に簡単にまとめます。
- ERB： シンプルでHTMLの記述に忠実。閉じタグが必要なので冗長になりがち
-
Slim： タグを省略でき、長文は
|で改行可能。コード量が少なく保守性が高い -
Haml： インデントで階層を表現し、美しいコードを保つ。タグ名の前に
%を付ける独自記法
使い慣れるまでに少し時間がかかりますが、自分に合ったエンジンを見つけて使いこなせるようになりたいです。
特にHamlやSlimのようにタグを省略できるものは、HTMLが複雑になるほど効果を実感します。
もっとパフォーマンスや技術的な視点で選定できるようになれば、より説得力のある選択ができると感じました。
日々の勉強の中で、こうした判断力も身につけていきたいと思います。
最後までお付き合いいただき、ありがとうございました！