Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

RailsのViewを出力するためのデンプレートエンジンとして、標準で利用されるのはERBです。
しかしrailsではERBの他にも、SlimHamlなど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

基本的な記法

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

  • HTMLの <> を削除する
  • HTMLの閉じタグ(</p>みたいなもの)は削除する
  • classとidは p.className, h1#idNameのように書く
  • ERBの <% と %> を削除する
  • eachif などループや条件文には -をつける
  • 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

こんな感じになっている ↓
スクリーンショット 2017-12-19 18.43.53.png

注意が必要な記法

  • 複数のクラスを記載したい場合は .でつなげる
_form.html.slim
/ classが二つある場合

p.text.text-plain
  • classやidの前のdivタグは省略する
_form.html.slim
/ こうじゃなくて
/ div.className 


/  こうする
.className
  • renderyieldは、=ではなく、 ==を使う

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

new.html.slim
== render 'form', user: @user_ski 

こうなる ↓
スクリーンショット 2017-12-20 14.58.33.png

とくにハマりやすい記法

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

index.html.slim
= link_to 'Edit', edit_user_path(@user)
'|
= link_to 'Back', users_path

:star: 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

mom0tomo
ʕ ◔ϖ◔ʔ Go/インフラ 最近はQiitaじゃなくブログに書いています👉 https://mom0tomo.github.io
https://mom0tomo.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away