Railsメモ(31) : テンプレートエンジンをERBからSlimに変更する

今までテンプレートエンジンはデフォルトのERBを使用していたが、HamlやSlimといった別のテンプレートエンジンがあるので変更してみる。
Haml、Slimのどちらにするかだが、下記サイトの比較表によるとSlimの方が良さそうなのでSlimを試してみる。

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

slim-railsのインストール

github.com
github.com

Railsで使うためにはslimをインストールするだけでよいが、slim-railsをインストールするとrails g controllerなどをしたときに生成されるファイルが.erbから.slimになるのでこちらをインストールする。
Gemfileに下記行を追加してbundle installする（gem "slim"の記述は不要）。

gem "slim-rails"

これでSlimを使えるようになったので少し試してみる。
slimrbというコマンドが使えるようになっているので引数なしで起動する。対話モードになるので下記コードを入力したらCtrl-dを押す。

$ slimrb
body
  p
    |
      This is a test of the text block.

うまくいくと以下のようなhtmlに変換された結果が出力される。

<body><p>This is a test of the text block.</p></body>

既存ERBファイルのSlim形式への変換

今後ビューを追加するときはSlim形式で記述していけばよいが、既存のERB形式のファイルについては変換する必要がある。手動で変換するのは大変なので下記gemを利用する。

github.com

Gemfileに下記行を追加してbundle installする。

gem 'html2slim'

これでerb2slimとhtml2slimコマンドが使えるようになったが、ERBからSlimへ変換するのでerb2slimを使用する。
基本的な使い方は、

$ erb2slim -h
Usage: erb2slim INPUT_FILENAME_OR_DIRECTORY [OUTPUT_FILENAME_OR_DIRECTORY] [options]
        --trace                      Show a full traceback on error
    -d, --delete                     Delete ERB files
    -h, --help                       Show this message
    -v, --version                    Print version

となっているが、ディレクトリを再帰的に検索してくれないので一括でファイルを変換するときは下記のようにしてコマンドを実行する。注意点として-dオプションを付けるとSlim変換後にERB形式のファイルを削除するのでバージョン管理システムなどで元に戻せるようにしておいた方がよい。

$ for i in app/views/**/*.erb; do erb2slim -d $i ${i%erb}slim; done

変換が成功すると.slimファイルが生成されているので、アプリを表示して見た目に問題がないか確認する。
なお、同じパスに.erbファイルも存在するとそちらを優先して表示するため注意。

erb2slimの変換結果

READMEにはerb2slimの変換結果は完璧ではないという記述があったので今まで作成したアプリで確認してみる。
ほぼ変換には問題はなかったが、入力フォームとボタンの間の隙間がなくなるという現象が発生した。

ERB
f:id:wonder-wall:20150826212827p:plain
Slim
f:id:wonder-wall:20150826212837p:plain

以下が変換されたSlimで（simple_formで記述したRansackの検索フォーム）、

= search_form_for @q_navbar, html: { class: 'navbar-form navbar-right' } do |f|
  = f.input :display_artist_cont, label: false, placeholder: 'display_artist'
  = f.button :submit

htmlの出力結果は以下の通り。どうやら入力フォームとボタンのタグの間にスペースや改行がないのが原因らしい。

<form class="navbar-form navbar-right" id="song_search" action="/songs" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
                    <div class="form-group string required q_display_artist_cont"><input class="string required form-control" placeholder="display_artist" type="text" name="q[display_artist_cont]" id="q_display_artist_cont" /></div><input type="submit" name="commit" value="Search" class="btn btn-default" /></form>

こういう場合は、以下のように>を追加して=>にするとタグの間にスペースを追加でき、見た目が元と同じになる。

= search_form_for @q_navbar, html: { class: 'navbar-form navbar-right' } do |f|
  => f.input :display_artist_cont, label: false, placeholder: 'display_artist'
  = f.button :submit

その他の例として、下記ERB形式のファイルは、

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Title</th>
      <th>Display artist</th>
      <th>ranking</th>
      <th>year</th>
    </tr>
  </thead>
  <tbody>
    <% @artist.songs.each do |song| %>
    <tr>
      <td><%= song.title %></td>
      <td><%= song.display_artist %></td>
      <td><%= song.ranking %></td>
      <td><%= song.year %></td>
    </tr>
    <% end %>
  </tbody>
</table>

以下のように変換されるが改行が気になる。

table.table.table-striped.table-hover
  thead
    tr
      th
        | Title
      th
        | Display artist
      th
        | ranking
      th
        | year
  tbody
    - @artist.songs.each do |song|
      tr
        td
          = song.title
        td
          = song.display_artist
        td
          = song.ranking
        td
          = song.year

これでも動作はするが、以下のようにもっとスッキリさせることもできる（好みの問題か）。

table.table.table-striped.table-hover
  thead
    tr
      th Title
      th Display artist
      th ranking
      th year
  tbody
    - @artist.songs.each do |song|
      tr
        td = song.title
        td = song.display_artist
        td = song.ranking
        td = song.year