はじめに
これまでテンプレートエンジンをRails標準のERBで書いていましたが、軽量かつスマートに書けるというSlimを導入しました。
環境
・Mac OS X EI Capitan (10.11.5)
・Ruby 2.3.0
・Rails 4.2.6
・Sublime Text 2 (エディタ)
まずテンプレートエンジンって何？
細かいことは置いておき、RailsでWebアプリケーションを書く際に、HTML内でRubyを使用したいときに使うものです。
Railsの有名なテンプレートエンジンには、ERB(標準)、Haml、Slimがあるそうです。
その中でも、軽くて速く、そして習得するのも容易と言われている Slim を導入することにしました。
ERB流の書き方
ERBを使用して、１から５までの数字をHTML内で列挙してみます。
<div class="container">
<h1>数字を列挙</h1>
<ul>
<% (1..5).each do |number| %>
<li>
<%= number %>
</li>
<% end %>
</ul>
</div>
</div>
ポイントは <% %> もしくは <%= %> で囲んだ部分でRubyのコードを書いていることです。
ERBでは既存のHTMLのコードに、簡単にRubyのコードを埋め込むことができます。
個人的な感想かも知れませんが、<% %> を毎回書くのがめんどくさいですし(%って打ちにくい位置にある)、普段 Python や Ruby などのスクリプト言語に慣れているため、<> を多用したコードは可読性が低いように感じます。
Slim流の書き方
まず、Slimを導入する前に、Slimで書けばどの程度すっきりできるか見ていきましょう。
div.container
h1 数字を列挙
ul
- (1..5).each do |number|
li = number
おぉ、かなりすっきりしました。
※ ここで、index.html.erb を削除するのをお忘れなく
Slimの導入
それでは、Slimを導入していきましょう。
まず、Gemfile に以下を追記します。
gem 'slim-rails' # slimの導入
あとは、追加したパッケージをインストールするだけですね。
$ bundle install
Slimの作法
ざっと Slim に必要な知識です。
・HTMLタグの <> は削除
・HTMLの閉じタグ（例：</div>）も削除
・idは#、classは. でタグの後に続ける
・Ruby の <% %> は - を前につける
・Ruby の <% end %> は不要
便利な補足
Sublime Text へ Slim のハイライトを追加
Sublime Text 上から command+Shift+P で install package を開き、Ruby Slim を検索して、インストールすればOKです。
メニューバーから View > Syntax > Ruby Slim を選択すれば、Slim で書いたコードがハイライトされます（超簡単で便利）
Railsで動作確認用のファイルを作成
コマンドラインから、サンプル用のコントローラを作成
コントローラ生成時に、indexのViewも同時に生成
$ rails g controller Samples index
app/views/samples/index.html.erb を上記のサンプルコードのように編集した後、コマンドラインからサーバーを立ち上げる
$ rails s
ブラウザから localhost:3000/samples/index にアクセスして、上記の動作確認を行う。
参考文献
・早い、簡単、生産的!? RailsのHTMLテンプレートエンジン Slim入門
・Railsのテンプレートエンジンの比較 erb vs slim vs haml
・Ruby製のテンプレートエンジン『Slim』に今更ながら入門してみたのでメモする