テンプレートエンジンSlimでRails開発を効率化しよう

テンプレートエンジンとは

　Webアプリケーションにおけるテンプレートエンジンとは、MVCフレームワークのビューにおいて、コントローラーで定義した変数を使用することができるようにする仕組みです。Railsでは、標準で採用されているテンプレートエンジンはERB（Embedded Ruby）です。テンプレートエンジンには複数あり、ERB以外のテンプレートエンジンを採用することもできます。

　ここでは、テンプレートエンジンの概要を確認するとともに、Railsアプリケーションの開発でよく採用されるテンプレートエンジンについて紹介します。

テンプレートエンジンの概要

　MVCフレームワークで採用されるテンプレートエンジンは、RailsにおけるERBに代表されるように、データベースなどから取得したデータとひな型として定義されたHTMLを合成して、出力結果として最終的なレスポンスとなるHTMLを生成する処理を担っています。テンプレートエンジンは、MVCフレームワークにおけるビューファイルの記述方法を提供するものともいえます。つまり、どんなテンプレートエンジンを採用するかによって、ビューファイルの記述方法は大きく変わります。

　ERBでは、ほぼHTMLと同等のマークアップ形式で記述します。一方、今回紹介するSlimでは、HTMLのマークアップ形式とは大きく異なります。HTMLでは<div>～</div>のように閉じタグで構造を表現しますが、Slimではインデントで構造を表現することで、閉じタグを省略することができます。また、タグの両サイドにある<>を省略できます。結果として、ERBでビューを記述するよりSlimを採用することで、ビューファイルのタイプ量が減り、見通しもよくなるメリットがあります。

　より実践的なRailsアプリケーション開発にあたっては、記述量の多いRails標準のERBをそのまま使うのではなく、Slimなど別のテンプレートエンジンを使うことがほとんどです。チームで取り組む規模のRailsアプリケーション開発では、ERB以外のテンプレートエンジンの記述方法に慣れておくことが必須ともいえるでしょう。

テンプレートエンジンの種類

　Railsで使えるテンプレートエンジンは、ERB以外にもよく使われているものとして、Slim／Hamlがあります。各テンプレートエンジンの特徴は以下の通りです。

　以下はrails newした時に自動生成されるレイアウトファイルを、テンプレートエンジンごとに示したものです。

　Hamlより後発のSlimの方が記述方法がシンプルなので、比較的新しく本格的なRailsプロジェクトであれば、テンプレートエンジンとしてSlimを採用することが多い印象です。

RailsアプリケーションへのSlim導入

　ここからは実際に、RailsアプリケーションにSlimを導入していきます。

　新規RailsアプリケーションにSlimを導入する方法と、ERBで開発していたアプリケーションに導入する方法の2通りを紹介します。

新規RailsアプリケーションへのSlim導入

　まず、新規RailsアプリケーションにSlimを導入する手順を示します。

　Railsアプリケーションを準備する手順については前回の記事を参考にしてください。なお、今回のRailsアプリケーション名は「slim_sample」とします。

　Railsアプリケーションの準備ができたら、Rails用のSlimのgemであるslim-railsをインストールします。

…（中略）…
gem 'slim-rails'
…（中略）…

bin/bundle inst

　次に、Railsのジェネレーターコマンド実行後に作成されるビューファイルがSlimとなるように、設定ファイルを追加します。

Rails.application.config.generators.template_engine = :slim

　この設定を入れておくと、ジェネレーター機能であるScaffoldなどの実行時に生成されるビューファイルが、ERBからSlimに変わります。

　ここでは、前回記事と同様、以下のジェネレーターコマンドを実行します。

bin/rails g scaffold Article title:string body:text

　▼

…（中略）…
      invoke  scaffold_controller
      create    app/controllers/articles_controller.rb
      invoke    slim
       exist      app/views/articles
      create      app/views/articles/index.html.slim
  1 add slim-rails
      create      app/views/articles/edit.html.slim
      create      app/views/articles/show.html.slim
      create      app/views/articles/new.html.slim
      create      app/views/articles/_form.html.slim
…（中略）…

　実行結果の通り、生成されたビューファイルの拡張子が .slimとなっていれば正常に動作しています。

　なお、rails newコマンド実行時に自動生成されたレイアウトファイルはこの時点ではまだERBのままです。レイアウトファイルもSlimに変換したい場合は、html2slimというgemが提供している erb2slimコマンドを使用して変換します。

　まず、html2slimをインストールします。

…（中略）…
group :development do
…（中略）…
  gem 'html2slim'
end
…（中略）…

bin/bundle inst

　以下のコマンドを実行し、レイアウトファイルをSlimに変換します。-dオプションを指定して実行することで、既存のERBをSlimに置き換えることができます。

bin/bundle exec erb2slim -d app/views/layouts/application.html.erb

　レイアウトファイルの拡張子が.slimになっていれば正常に動作しています。変換後のレイアウトファイルは以下の通りです。

doctype html
html
  head
    title
      | SlimSample
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  body
    = yield

　このようにSlimでは、HTMLタグの<>（カッコ）を省略し、インデントすることで</html>などの閉じタグを省略することができます。文法の詳細は後ほど解説します。

　最後に、Railsアプリケーションが正常に動作することを確認しておきます。

　以下のようにマイグレーションを実行します。

bin/rails db:create db:migrate

　Pumaサーバーを立ち上げ、「http://localhost:3000/articles」にアクセスし、ERBからSlimへ変換したページが正しく動くかを確認します。