Ruby on RailsのViewをHamlで書いてみる

Hamlについて

---

RailsでViewの記述はERB（Embedded Ruby）テンプレートが標準となっており、HTMLのページ内でRubyのコードを実行できます。散らかりがちなERBをよりすっきりとした短いコードで書けてしまうのが、Haml（HTML abstraction markup language）なのです。

この記事では、RailsアプリのViewの一部をERBからHamlに書き換えてみて、どのような違いがあるのかを見ていきたいと思います。

サンプルアプリの作成

---

今回、サンプルのRailsアプリには手っ取り早く以下のscaffoldを用います。

rails g scaffold user name:string introduction:text

アプリが動く状態になったので、一先ずERBとその画面を確認してみます。一例として、以下のユーザの登録ページを取り上げます。
そして、登録ページのパーシャル（app/views/users/_form.html.erb）は以下のコードです。標準のERBで生成されています。

<%= form_with(model: user, local: true) do |form| %>
  <% if user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% user.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>

  <div class="field">
    <%= form.label :introduction %>
    <%= form.text_area :introduction %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

Gemを導入

---

RailsでHamlを導入するにはhaml-railsというGemをインストールします。ちなみに、erb2hamlというGemもありますが、haml-railsのインストールだけで、erb2hamlの機能は使うことができるようです。

gem 'haml-rails'

ERBをHamlに変換

---

以下のコマンドを実行することで、既存のERBを変換したhamlファイルを生成してくれます。

rails haml:erb2haml

また、Hamlの生成後に元のERBを削除したいかを聞いてくれるので、同時にERBを削除してしまいたい場合は"y"で返しましょう。

[vagrant@localhost haml_sample]$ rails haml:erb2haml
--------------------------------------------------------------------------------
Generating HAML for app/views/layouts/application.html.erb...
Generating HAML for app/views/layouts/mailer.html.erb...
Generating HAML for app/views/layouts/mailer.text.erb...
Generating HAML for app/views/users/edit.html.erb...
Generating HAML for app/views/users/index.html.erb...
Generating HAML for app/views/users/new.html.erb...
Generating HAML for app/views/users/show.html.erb...
Generating HAML for app/views/users/_form.html.erb...
--------------------------------------------------------------------------------
HAML generated for the following files:
        app/views/layouts/application.html.erb
        app/views/layouts/mailer.html.erb
        app/views/layouts/mailer.text.erb
        app/views/users/edit.html.erb
        app/views/users/index.html.erb
        app/views/users/new.html.erb
        app/views/users/show.html.erb
        app/views/users/_form.html.erb
--------------------------------------------------------------------------------
Would you like to delete the original .erb files? (This is not recommended unles                                                                                                                                                             s you are under version control.) (y/n)

app/views/usersフォルダは以下の様に変わり、ERBファイルはHamlファイルに置き換わりました。
（左：コマンド実行前、中：コマンド実行後（ERB削除前）、後：コマンド実行後（ERB削除後））

ERBとHamlの比較

---

では実際にERBから生成されたHamlの中を見てみましょう。以下は、上で掲載したapp/views/users/_form.html.erbから生成されたHamlです。行数自体は27行から17行と約3分の2になっており、1行の記述としても簡潔に書けていることがわかります。

= form_with(model: user, local: true) do |form|
  - if user.errors.any?
    #error_explanation
      %h2
        = pluralize(user.errors.count, "error")
        prohibited this user from being saved:
      %ul
        - user.errors.full_messages.each do |message|
          %li= message
  .field
    = form.label :name
    = form.text_field :name
  .field
    = form.label :introduction
    = form.text_area :introduction
  .actions
    = form.submit

Hamlの大きな特徴としては、HTMLの閉じタグおよびRubyのendが不要なことが挙げられます。閉じタグやendはブロックの範囲を示すのにERBでは不可欠でしたが、Hamlではブロック範囲はインデントで表すためこのような記述ができて、その分のコード量が減らすことができるのです。

おわりに

---

今回はHamlの概要からアプリへの導入を簡単に解説しました。Railsへの導入が容易で、学習コストも低めなので気軽に始められますね。ERBからの移行だと慣れるまで違和感が残りますが、Hamlの方がすっきりとしたコードが書けるので積極的に使っていきたいと思います。

---

戻る