RailsのHTMLテンプレートエンジン、Slimの基本的な記法

はじめに

RailsのViewを出力するためのデンプレートエンジンとして、標準で利用されるのはERBです。
しかしrailsではERBの他にも、SlimやHamlなどHTMLテンプレートを使うことができます。

Slimの特長として、

• インデントによりHTMLのタグ構造を表すため、コードの分量が少ない
• デフォルトでHTMLエスケープを行うため、セキュアである
• ERBに比べて、パフォーマンスがよい

があります。

今回はScaffoldで作成した.erbを元に、Slimの基本的な記法と、自分が最初にハマったポイントを紹介します。

動作環境

Rails 5.1.2
slim-rails 3.1.3

導入方法

Gemfileにrails-slimを加え、bundle installします。

Gemfile

...
gem 'slim-rails', '3.1.3'
...

$ bundle install

...
Installing slim-rails 3.1.3
...
Bundle complete!

デフォルトのテンプレートエンジンをslimに変更します。

config/application.rb

class Application < Rails::Application
  config.generators.template_engine = :slim  
end

既存のERBをSlimに変更する

rails-slimがインストールされたら、 .erbという識別子を .slimに全て変更します。
.erbファイルが残っているとそちらを読み込んでしまうため、残さないようにします。

変更が終わったらサーバーを再起動します。

$ rails server

=> Booting Puma
=> Rails 5.1.2 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.9.1 (ruby 2.4.3-p205), codename: Private Caller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop

基本的な記法

基本的な記法は以下の５つです。

• HTMLの　< と > を削除する
• HTMLの閉じタグ（</p>みたいなもの）は削除する
• classとidは p.className, h1#idNameのように書く
• ERBの　<%　と %> を削除する
• each や if などループや条件文には -をつける
• HTMLとして表示したくないコメントは /, 表示したいコメントは /!で表す

基本的な記法のサンプル

ERBの例

index.html.erb

// コメント
<h1>Users</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.email %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New User', new_user_path %>

Slimの例

index.html.slim

/ HTMLに表示したくないコメント
/! HTMLに表示したいコメント
h1 Users

table
  thead
    tr
      th Name
      th Email
      th colspan="3"

  tbody
    - @users.each do |user|
      tr
        td = user.name
        td = user.email
        td = link_to 'Show', user
        td = link_to 'Edit', edit_user_path(user)
        td = link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' }

br

= link_to 'New User', new_user_path

だいぶスリムになりました。

ERBをSlimに書き直したら、サーバーを再起動して表示がERBのときから変わっていないことを確認します。

$ rails server

もしくは

$ rails s

こんな感じになっている ↓

注意が必要な記法

• 複数のクラスを記載したい場合は .でつなげる

_form.html.slim

/ classが二つある場合

p.text.text-plain

• classやidの前のdivタグは省略する

_form.html.slim

/ こうじゃなくて
/ div.className 


/  こうする
.className

• renderや yieldは、=ではなく、 ==を使う

==をつかうことで、HTMLエスケープを無効にして出力することができます。

new.html.slim

== render 'form', user: @user_ski 

こうなる ↓

とくにハマりやすい記法

文字列を表示するには、 'を前につける

index.html.slim

= link_to 'Edit', edit_user_path(@user)
'|
= link_to 'Back', users_path

HTMLの属性にRuby コードを使う方法

= の後に続けてRubyのコードを書きます。
コードにスペースが含まれる場合は ()でコードを囲みます。
また、ハッシュを {...} に, 配列を [...] に書くことができます。

ERBの例

_form.html.erb

<h2><%= pluralize(micropost.errors.count, "error") %> prohibited this micropost from being saved:</h2>

Slimの例

_form.html.slim

h2 = "#{pluralize(micropost.errors.count, "error")} prohibited this micropost from being saved:"

終わりに

Slimのよく使う記法を簡単にご紹介しました。

詳しい日本語のリファレンスはこちらにあります。
https://github.com/slim-template/slim/blob/master/README.jp.md