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

## はじめに

RailsのViewを出力するためのデンプレートエンジンとして、標準で利用されるのはERBです。
しかしrailsではERBの他にも、[Slim](http://slim-lang.com/)や[Haml](http://haml.info/)などHTMLテンプレートを使うことができます。

Slimの特長として、

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

があります。

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

## 動作環境
Rails 5.1.2
slim-rails 3.1.3

## 導入方法
Gemfileにrails-slimを加え、bundle installします。

```rb:Gemfile
...
gem 'slim-rails', '3.1.3'
...
```

```shell

$ bundle install

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

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

```rb:config/application.rb
class Application < Rails::Application
  config.generators.template_engine = :slim  
end
```

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

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

```shell

$ 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の例

```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の例

```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のときから変わっていないことを確認します。

```shell

$ rails server

もしくは

$ rails s
```

こんな感じになっている ↓ 
<img width="450" alt="スクリーンショット 2017-12-19 18.43.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/133879/4ac0a163-44b4-a93a-b321-58538d145dbe.png">



## 注意が必要な記法

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

```slim:_form.html.slim
/ classが二つある場合

p.text.text-plain
```

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

```slim:_form.html.slim
/ こうじゃなくて
/ div.className 


/  こうする
.className
```

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

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

```slim:new.html.slim

== render 'form', user: @user_ski 
```
こうなる ↓ 
<img width="435" alt="スクリーンショット 2017-12-20 14.58.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/133879/8dc2d87f-058a-8cdb-9e90-13e7a3ad2104.png">



## とくにハマりやすい記法
:star: **文字列を表示するには、 `'`を前につける**

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

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

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

**ERBの例**

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

**Slimの例**

```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