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

#はじめに
これまでテンプレートエンジンを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内で列挙してみます。

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