Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

これだけは押さえておきたい! Rails開発で使えるgemパッケージ/ツール 第6回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/10/17 14:00

 本連載では、Rails開発において開発効率を格段に上げてくれること間違いなしの定番gemについてご紹介しています。前回は、Kaminariを使ってページネーションを実装しました。今回は、Railsのフロントエンド開発を効率化するテンプレートエンジンの「Slim」を紹介します。

目次

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

 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があります。各テンプレートエンジンの特徴は以下の通りです。

表:テンプレートエンジンの特徴
テンプレートエンジン名 特徴 拡張子    
ERB  Railsで標準採用されている。 .erb
Slim HTMLを階層構造にして閉じタグを省略可能。
Hamlより若干シンプル。
.slim
Haml HTMLを階層構造にして閉じタグを省略可能。 .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をインストールします。

[リスト1]Gemfile
…(中略)…
gem 'slim-rails'
…(中略)…
bin/bundle inst

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

[リスト2]config/initializers/generators.rb
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をインストールします。

[リスト3]Gemfile
…(中略)…
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になっていれば正常に動作しています。変換後のレイアウトファイルは以下の通りです。

[リスト4]app/views/layouts/application.html.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

[Tips]DBの作成とマイグレーションを同時に行う

 上記のようにrailsコマンドを使用して、DBの新規作成とマイグレーション(テーブルの作成)を同時に行うことができます。

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

Slim変換後の動作確認結果
Slim変換後の動作確認結果

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 竹馬 力(チクバ ツトム)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:これだけは押さえておきたい! Rails開発で使えるgemパッケージ/ツール
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5