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 つでした。

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

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

ではでは。