Ruby on Rails で Slim を導入し、超スッキリしたコードを書く

More than 1 year has passed since last update.


はじめに

これまでテンプレートエンジンを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を使用して、1から5までの数字をHTML内で列挙してみます。


index.html.erb

<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で書けばどの程度すっきりできるか見ていきましょう。


index.html.slim

div.container

h1 数字を列挙

ul
- (1..5).each do |number|
li = number


おぉ、かなりすっきりしました。

※ ここで、index.html.erb を削除するのをお忘れなく


Slimの導入

それでは、Slimを導入していきましょう。

まず、Gemfile に以下を追記します。


Gemfile

gem 'slim-rails'  # slimの導入


あとは、追加したパッケージをインストールするだけですね。

$ bundle install


Slimの作法

ざっと Slim に必要な知識です。

・HTMLタグの <> は削除

・HTMLの閉じタグ(例:</div>)も削除

・idは#、classは. でタグの後に続ける

・Ruby の <% %>- を前につける

・Ruby の <% end %> は不要


便利な補足


Sublime Text へ Slim のハイライトを追加

Sublime Text 上から command+Shift+Pinstall 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』に今更ながら入門してみたのでメモする