slimを導入する

slim が書きやすいなぁ。と思っているのですが、自身で導入したことなかったのでメモ。

目次

参考

導入

正直言ってgithub - slim-template/slimの通りでよい。

Gemfile の編集

Gemfile を編集する。

Gemfileに追記
1
gem 'slim'

bundle installを実行し、インストール完了。

実装

slim を使用する場合は、拡張子を~~~.html.slimとする。
今回は erb で作成された index.html.erb を slim で書き換えてみる。

元のindex.html.erb。

index.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<p id="notice"><%= notice %></p>

<h1>Users</h1>

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

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></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 %>

書き換えたindex.html.slim。

index.html.slim
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
p id="notice" = notice

hi Users

table
  thead
    tr
      th Name
      th colspan="3"
  tbody
    - @users.each do |user|
      tr
        td = user.name
        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

この 2 つが出力する HTMl は、同じものになる。

今回は、slim を導入してみました。
erb と比較して、「いいな」と感じる点は、2 つでした。

  • 記述量が減る(閉じタグを書かない)
  • コメントアウトが楽

使い込めば、印象は変わってきそうです。

ではでは。