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

  • 0
    いいね
  • 0
    コメント
    この記事は最終更新日から1年以上が経過しています。

    はじめに

    これまでテンプレートエンジンを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』に今更ながら入門してみたのでメモする