読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

Railsのテンプレートエンジンの比較 erb vs slim vs haml

Rails View Rails gem

RailsでHTMLを作成するときによく使われるテンプレートエンジンの「ERB」「Haml」「Slim」について比較しました。
SlimやHamlである程度書いた後に、ERBで記載すると冗長が多すぎるのでめんどくさく感じるようになります。
是非、導入を検討してみて下さい。

対象読者

  • RailsのViewをどのテンプレートエンジンで書いたら良いか分からない方
  • RailsのView作成をより生産的に実装したい方

バージョン

  • ERB(erubis) 2.7.0
  • Haml 4.0.5
  • Slim 2.0.3

オススメ

Slim > Haml >> ERBの順でオススメです。

HTMLテンプレートエンジンの比較表

理由としては、次の表を見てもらえば一目瞭然です。

名前 概要 メリット デメリット ファイル拡張子
ERB Ruby標準付属であり、RailsではデフォルトのHTMLテンプレートエンジン 基本はHTMLに< ... >と<= ... >でRubyコードを埋め込むだけなので、学習コストが低く理解しやすい ほぼHTMLのため、冗長な箇所が多々ある .erb
Haml タグで階層構造を表すことにより、<>や閉じタグなどを省略できるHTMLテンプレートエンジン HTMLコードの記述量が2,3割減り、ERBに比べ生産的。学習コストもそんなに高くない テキストや属性の記載方法などに若干のクセがある .haml
Slim Hamlとほぼ同じ。Hamlよりほんの少しシンプルなHTMLテンプレートエンジン Hamlと同様。また、ERBよりパフォーマンスが良い Hamlと同様 .slim

HTMLテンプレートエンジンのソースコードの比較

次のHTMLを作成するためのソースコードをそれぞれ記載してみます。
HamlとSlimのコードはほぼ同じであり、ERBに比べ、コード量は短いと思います。

<h1 id='title'>H1 タイトル</h1>
<br>
<ul>
  <li>0: リスト</li>
  <li>1: リスト</li>
  <li>2: リスト</li>
</ul>
<a href='#'>リンク</a>

ERBのコードです。

<h1 id='title'>H1 タイトル</h1>
<br>
<ul>
  <% 3.times do |i| %>
    <li><%= i %>: リスト</li>
  <% end %>
</ul>
<a href='#'>リンク</a>

Hamlのコードです。

%h1#title H1 タイトル
%br
%ul
  - 3.times do |i|
    %li #{i}: リスト

%a{ href: "#" } リンク

Slimのコードです。

h1#title H1 タイトル
br
ul
  - 3.times do |i|
    li #{i}: リスト

a(href="#") リンク

チュートリアル

SlimやHamlをやってみたいという方は、是非下記のチュートリアル記事を読んで、実際に手を動かしてみて下さい。

SlimやHamlである程度書いた後に、ERBで記載すると冗長が多すぎるのでめんどくさく感じるようになります。
是非使ってみてください。

以上です。
質問や誤りなどがある場合は、気軽にコメント下さい。できるだけ早く反応します。