既存のRailsアプリケーションへのSlim導入
テンプレートエンジンにERBを採用している、既存のRailsアプリケーションに、Slimを導入する方法も紹介しておきます。
既にRailsアプリケーションをERBで開発している場合、先ほど紹介したerb2slimコマンドの引数に、ビューのディレクトリを指定して一括置換することができます。
bin/bundle exec erb2slim -d app/views
実行すると、app/viewsディレクトリ配下にあるすべてのERBファイルがSlimに置き換わります。なお、上記のようにビューディレクトリ全体を指定するとActionMailer用のメール送信時のビューテンプレートも置換されます。メール送信時のテンプレートをERBのままで運用したい場合は、erb2slimコマンドの引数に置換したいディレクトリを個別で指定して実行するなどの配慮が必要です。
Slimの各種構文
ここからはSlimの構文について具体的に確認していきます。
テキストを出力する "|"
先ほど、erb2slimコマンドで置換したレイアウトファイルを再度確認します。
…（中略）…
title
| SlimSample
…（中略）…
Slimでテキストを出力するには、titleタグの次の行の通り、 |を用います。この記述で出力されるHTMLタグは以下の通りです。
<title>SlimSample</title>
実際にPumaサーバーを起動してtitleタグの出力結果を確認してみてください。
なお、HTMLタグに囲まれたテキストの出力は、HTMLタグの定義の後、改行せず半角スペースに続けて記述することで以下の通り |を省略することもできます。
title SlimSample
Rubyのコードを記述する "-"
Rubyのコードを記述するには、 -（ハイフン）を用います。ERBでは、<%- %>という記述に相当するものです。
Scaffoldで作成したビューファイルを確認します。
…（中略）…
- @articles.each do |article|
…（中略）…
コントローラーでアサインした@articlesインスタンス変数をeachメソッドでループする箇所です。eachメソッドは直接的にHTMLタグの出力をともなわないので、ERBでの記述のうち、<% %>を省略した記述方法を採ることができます。-（ハイフン）以降の文字列はRubyのプログラムとして解釈されます。
Rubyのコードを出力する "="
同じビューファイルにおける、eachメソッドの直後の部分を確認します。
…（中略）…
td = article.title
td = article.body
…（中略）…
ここはarticleのtitle、bodyを出力している箇所です。ERBでは、<%= %>に相当するもので、先ほど同様、<% %>を省略した記述です。=（イコール）以降の文字列はRubyのプログラムとして解釈されます。
コードをコメントアウトする "/"
/（スラッシュ）をHTMLタグ定義の前に置くと、HTMLタグが出力されなくなります。つまり、コメントアウトに相当するものです。SlimではインデントによってHTMLの階層構造を表現しているので、コメントアウトするとインデントされたブロックごとコメントアウトされます。
先ほど確認したビューファイルのtableタグをコメントアウトします。
…（中略）…
/table
thead
tr
th Title
th Body
…（中略）…
Pumaサーバーを起動し「http://localhost:3000/articles」にアクセスすると該当するtableタグが出力されないことが確認できます。
id／class属性の省略記法
Scaffoldで生成された、入力フォーム用のパーシャルを確認します。
…（中略）…
- if @article.errors.any?
#error_explanation
h2 = "#{pluralize(@article.errors.count, "error")} prohibited this article from being saved:"
ul
- @article.errors.full_messages.each do |message|
li = message
.field
= f.label :title
= f.text_field :title
…（中略）…
バリデーションエラー時のブロックに「#error_explanation」という記述があります。これは以下のHTMLタグを出力します。
<div id='error_explanation'>〜</div>
#（シャープ）は、後に続く文字列をHTMLタグのid属性として扱います。また、HTMLタグのうち頻繁に使うdivタグはこのように省略することができます。つまり「#error_explanation」は「div#error_explanation」と等価です。慣れないうちはこの記述方法に違和感を抱くかもしれませんが、頻出するdivタグを省略できるのでより実践的なビューを記述する際、タイプ数が少なく済むメリットを感じることができます。
同様に .（ドット）は、後に続く文字列をHTMLタグのclass属性として扱います。「.field」という記述は「div.field」と等価で、以下のHTMLタグを出力します。
<div class='field'>〜</div>
複数の属性がある場合の記法
タグの後に、属性を複数指定することもできます。
Scaffoldで作成した一覧ページにGoogleのトップページへのリンク（aタグ）を設置するには以下のように記述します。
…（中略）… = link_to 'New Article', new_article_path div a href='https://www.google.co.jp/' title='Google' Googleトップページ
Rubyのコードをテキストに展開する記法
先ほど提示した入力フォームのパーシャルのバリデーションエラー時の部分を再度確認します。
…（中略）…
h2 = "#{pluralize(@article.errors.count, "error")} prohibited this article from being saved:"
…（中略）…
このように、Rubyの式展開の演算子である #{}を使うことで、Rubyのコードをテキストに展開することができます。
埋め込みエンジン
Slimには、他のテンプレートエンジンの記述方法を取り込む仕組みも備わっています。この仕組みはフィルタとして提供されており、 フィルタ名:のように宣言して使います。フィルタにはさまざまな種類がありますが、ここでは、マークダウン記法を簡単に導入するためのmarkdown:フィルタを紹介します。
マークダウン記法で記述するトップページを以下の通り作成していきます。
…（中略）… root to: 'home#index' …（中略）…
class HomeController < ApplicationController def index end end
markdown:
# プログラミング言語
## コンパイル型言語
- C
- Go
## スクリプト言語
- Ruby
- 開発者はmatz
- Python
マークダウンフィルタは、マークダウンを解釈するgemに依存しています。ここではredcarpetというgemをインストールします。
…（中略）… gem 'redcarpet' …（中略）…
bin/bundle inst
Pumaサーバーを起動し「http://localhost:3000」にアクセスすると、マークダウンが解釈され以下の通り表示されます。
まとめ
ここまで、テンプレートエンジンであるSlimの概要を紹介し、主要な記法を確認するとともに実際に記述して動作を検証しました。今回ご紹介した記法以外にも便利な記法があります。詳細は日本語版のREADMEを参照してみてください。
次回は、連載2回にわたり、SEO対策で重宝するgemである以下の3つを紹介する予定です。
- サイトマップを生成するsitemap_generator
- メタタグを生成するmeta-tags
- パンくずリストを生成するgretel
