HamlとSlimの選び方:導入手順・記法比較・変換ツールまとめ
生徒
「Railsのテンプレートって、ERB以外にもあるんですか?」
先生
「はい、Haml(ハムル)やSlim(スリム)といった、よりシンプルに書けるテンプレートエンジンもありますよ。」
生徒
「どれを使えばいいのか迷いますね…。違いや選び方ってあるんですか?」
先生
「それでは、HamlとSlimの違いや特徴、導入のやり方などを丁寧に見ていきましょう。」
1. Haml・Slimとは?ERBとの違い
Railsでは画面を表示するために「テンプレートエンジン」と呼ばれる仕組みを使います。もっとも基本的なテンプレートはERBですが、それ以外にもHaml(ハムル)やSlim(スリム)という選択肢があります。
これらのテンプレートエンジンは、HTMLをよりスッキリ、見やすく書くための書き方(記法)を提供してくれます。
たとえば、ERBではHTMLタグとRubyコードを混ぜて書く必要がありますが、HamlやSlimではインデントと記号で構造を表現するため、視覚的にも整理されていて見やすいのが特徴です。
2. Hamlの特徴と記法
Haml(HTML Abstraction Markup Language)は、HTMLをRuby風に簡潔に書くためのテンプレートです。特徴としては:
- タグを省略できる(
<div>を書かずに済む) - インデントで階層を表現
- 視認性が高く、コードが読みやすい
例えば、次のように書きます:
%ul
- @items.each do |item|
%li= item.name
このように、HTMLタグを省略して記号(%)で書くことで、スッキリとしたテンプレートが作れます。
3. Slimの特徴と記法
Slimは、さらに高速で軽量なテンプレートエンジンとして人気です。Hamlよりもさらに記法が簡略化されていて、無駄を徹底的に省いたデザインです。
特徴としては:
- 不要な記号を排除し、非常にシンプル
- 高速に動作し、大規模開発でも使いやすい
- Hamlに似ているが、より記述量が少ない
書き方の例を見てみましょう:
ul
- @items.each do |item|
li = item.name
Hamlに似ていますが、%記号がなくなっており、さらにスリムになっています。
4. Haml・Slimの導入方法(Railsへのインストール)
どちらもGem(Rubyのライブラリ)として簡単に導入できます。
4-1. Hamlの導入
Gemfileに以下を追加します:
gem 'haml-rails'
その後、bundle installを実行すれば完了です。
4-2. Slimの導入
同じように、Gemfileに以下を追加します:
gem 'slim-rails'
これもbundle installでインストール完了です。
5. HamlとSlimの比較まとめ
ここで、HamlとSlimを簡単に比較してみましょう:
| 項目 | Haml | Slim |
|---|---|---|
| 記法の簡潔さ | やや簡潔 | 非常に簡潔 |
| 読みやすさ | 高い | 非常に高い |
| 処理速度 | 普通 | 高速 |
| 学習コスト | 低め | やや高め |
どちらも便利ですが、初心者にはまずHamlから始めると取り組みやすいです。
6. ERBファイルをHaml・Slimに変換する方法
すでにERBで作ったテンプレートを、あとからHamlやSlimに変換したいときには「変換ツール」を使うと便利です。
6-1. html2haml
html2hamlコマンドを使えば、ERBをHamlに自動変換できます。
gem install html2haml
html2haml app/views/sample.html.erb app/views/sample.html.haml
6-2. erb2slim
Slimに変換したいときはerb2slimを使います。
gem install html2slim
erb2slim app/views/sample.html.erb app/views/sample.html.slim
これらのツールを使えば、手作業で書き直す必要がなくなり、変換作業がとても楽になります。
7. どちらを選ぶべき?初心者向けの選び方ガイド
最終的にはプロジェクトの方針やチームの好みによりますが、次のような判断基準があります:
- とにかく簡単で見やすいテンプレートが使いたい→Haml
- 処理速度や開発効率を重視したい→Slim
- ERBのような書き方が好き→そのままERBでもOK
どちらもERBより書きやすく、学ぶ価値は十分あります。初心者でも、導入と基本の記法を覚えるだけで、見た目がすっきりしてテンションが上がるはずです。