RailsのテンプレートエンジンSlimの書き方とActionViewのヘルパーメソッド、レイアウトの使い方：開発現場でちゃんと使えるRails 4入門（8）（1/3 ページ）
エンタープライズ領域での採用も増えてきたRuby on Railsを使ってWebアプリケーションを作るための入門連載。最新版の4に対応しています。今回は、Railsのテンプレートエンジン「Slim」の書き方やActionViewのヘルパーメソッド、レイアウトの使い方、ビューの実装時に押さえておきたいポイントなどについて。
MVCアーキテクチャの「V」。ActionViewを使いこなそう
前回の「Rails開発を面白くするアクションコントローラーの5大機能とルーティングの基本」までの連載で、MVCアーキテクチャにおけるモデル（M）とコントローラー（C）について解説してきました。今回は最後の主要なコンポーネントのビュー（V）について解説します。
ビューはアプリケーションの出力テンプレートの機能を担っています。Web向けにはHTML形式、メール本文向けにテキスト形式、アプリ向けにJSON形式など、Railsのビューはさまざまな形式の出力に対応できます。
本稿では、まずテンプレートにデータを当てはめるテンプレートエンジンについて解説します。その後で定型的な出力を補助するヘルパーメソッドの紹介とオリジナルのヘルパーメソッドの作成方法について説明します。最後にビューの実装時に押さえておきたいポイントを紹介します。
説明に使用するサンプルプログラムはGitHubにある「book_library」の「07」ディレクトリ以下にあります。
Railsのテンプレートエンジン
Railsでは標準のテンプレートエンジンとしてテキスト中にRubyスクリプトを埋め込める「ERB」を使っています。サンプルプロジェクトでも、これまではHTML中にRubyスクリプトを埋め込んだ拡張子が「erb」のERBのテンプレートを使ってきました。
一方で「scaffold」コマンドで出力されるビューの中にはJSONのテンプレート「show.json.jbuilder」などが含まれています。このテンプレートをレンダリングする「Jbuilder」はJSONに特化したテンプレートエンジンです。
このように、フォーマットに応じてより書きやすいレンダリングエンジンを選ぶと開発が楽になります。そこでHTML形式の出力テンプレートを作る場合、どのようなテキストにも使える標準のERBよりもHTMLに特化したテンプレートエンジンを選ぶことが開発現場ではよく見られます。
現在、HTMLに特化した主なテンプレートエンジンには「Haml」「Slim」があります。筆者はレンダリングの速さや短く書ける点で勝るSlimをよく使っています。
Slimの使い方
SlimはRailsに簡単に導入できるgemが提供されています。Gemfileに「gem 'slim-rails'」を追加して「bundle install」コマンドを実行するだけ導入が完了します。
これにより、Railsアプリケーションは拡張子に「slim」を持つテンプレートをレンダリングできるようになります。
次に、Slimの記法について説明します。簡単なHTMLとの比較を見てみましょう。
<!--HTML-->
<div class="hoge">
<h3>HOGE</h3>
<p>
"HOGE1.
HOGE2."
<br>
"HOGE3."
</p>
</div>
このHTMLを出力するSlimが下のコードになります。
/ Slim
/! HTML
.hoge
h3 HOGE
p
| HOGE1.
HOGE2.
br
| HOGE3.
このコードの1行目はコメントです。Slimでは「/」で始まる行をコメントとして扱います。また2行目のように「/!」とするとレンダリングされたHTMLにコメントが現れます。
3行目は頻繁に使う「class」属性付きのDIVタグのシンタックスシュガーです。別の書き方として「div class="hoge"」と書くこともできます。「id」属性付きDIVタグの場合も「#hoge」という形式が用意されています。
4行目から最後の9行目まではインデントされています。Slimではインデントされている部分は、その上の要素に含まれることを表します。この場合、「.hoge（<div class="hoge"></div>）」の要素に含まれます。
4行目の「h3 HOGE」は「HOGE」の文字列を中に持つH3タグになります。タグの中が単純な場合はこのように1行で書くといいでしょう。
一方で、5行目はHTMLのPタグになり、6行目から最後までインデントが一段深くなっているので、それらはPタグに含まれます。
6行目と9行目は「|」から始まっていますが、これは要素内の文字列として扱われます。また7行目は「|」から始まっていませんが、直前の文字列と同じ開始列から始めると同じ行の文字列として扱われます。
改行したい場合は8行目のようにBRタグとなる「br」を使います。
SlimでRubyを使う
Slimの基本的な記法について説明しましたが、これだけではRailsで使えません。ERBのようにRubyスクリプトを出力に含める必要があります。しかしながら、SlimはERBのようにテキスト中のどこにでもRubyスクリプトを埋め込めるわけではありません。
SlimのテンプレートでRubyスクリプトを書くには次のようにします。
h3 = @book.title
- if @book.created_at.present?
= @book.created_at.strftime("%Y/%m/%d 追加")
- else
| 追加日不明
Slimでは上のコードの1行目のように「=」から右側にRubyスクリプトを書き、その返り値をH3タグの中に含める文字列とすることができます。
2行目と4行目は「if/else」文による制御で、インデントにより実行する式（3行目と5行目）を構成します。制御構文や変数代入などの出力を伴わないRubyスクリプトを埋め込むには「-」から始まる行に処理を書きます。
そして、とても重要な特徴としてSlim中ではRubyのブロックもインデントにより終端が解釈されます。「- end」などを書かないように注意してください。
また、HTMLのタグに属性を持たせたい場合は、次のようにします。
label for="book_name" 書名
a data-confirm="本当に削除しますか？" href="/books/#{@book.id}" data-method="delete"
| 削除する
Slimではタグに続けて「属性名="属性値"」と書くことで属性が設定できます。上のhref属性のように文字列の中で式展開することもできます。
RailsでSlimを使う
さて、実際にRailsでSlimを使うには「app/views」以下の拡張子が「erb」のERBテンプレートを削除し、拡張子が「slim」のSlimテンプレートを新しく作ります。ERBテンプレートのビューと混在していても問題ありませんが、同じ名前のテンプレートであればERBが優先されます。
試しにサンプルプロジェクト「book_library」で実験してみましょう。book_libraryには「app/views/books/index.html.erb」というビューがあり、これは「/books」にアクセスするとレンダリングされます。
このビューのファイル名を「index.html.erb.backup」などに変えてアクセスすると「Template is missing」というエラーとなります。そこで、以下のSlimテンプレートを「app/views/books/index.html.slim」として保存し、「/books」にアクセスしてみましょう。
h1 Listing books
#flash
= flash[:notice]
table
thead
tr
th Title
th Author
th Outline
th
th
th
tbody
- @books.each do |book|
tr
td = book.title
td = book.author
td = book.outline
td = link_to 'Show', book
td = link_to 'Edit', edit_book_path(book)
td = link_to 'Destroy', book, method: :delete, data: { confirm: 'Are you sure?' }
br
= link_to 'New Book', new_book_path
このSlimテンプレートは「index.html.erb」の内容と同じ内容です。しかし、ファイル中の文字数が「index.html.erb」が663文字に対して「index.html.slim」は448文字と少なくなっています。
文字数が減ると修正がしやすくなり、見通しもよくなります。Slimの記法は最初は面食らうかもしれませんが、慣れると非常に書きやすく理にかなった構文となっていることが分かります。この機会に、ぜひSlimを使い始めてみてください。
本連載でも以降特に理由がなければビューはSlim記法のコードを掲載していきます。
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。