Rails でslimをを使う方法

##slimとは
``slim``は``Ruby``で使うテンプレートエンジンの一つ。

``slim``には閉じタグが存在しないのでコード自体が非常にスッキリしている。
``html``よりもコードを早く綺麗に、そして非常にシンプルに作ることができ、また``erb``と同じで``Ruby``のコードを埋め込むこともできる。

>**テンプレートエンジンとは**
テンプレートと呼ばれる通常のhtmlで書いたコードと変数などプログラミングによって書かれたコードを合成してビューファイルを作り出すもののこと

##slimの導入
``Rails``ではデフォルトのテンプレートエンジンは``erb``なので、``slim``を使うには、``gem``をインストールする必要がある。

``Gemfile``に下記のコードを追加し、``bundle install``コマンドを実行する。

```rb
gem 'slim-rails'
```

これにより、``index.html.slim``のようにビューファイルの拡張子に``slim``が使えるようになる。
ビューファイルの中に同盟の``erbファイル``と``slimファイル``がある場合は、**``erb``が優先して読み込まれる**ので``slim``を使いたい場合はerbファイルは削除しておく。

手動では面倒・変更漏れがあるので、``gem``を使って``erb``を``slim``に変更することをお勧めする。

``Gemfile``に下記のコードを追加し、``bundle install``コマンドを実行する。

```rb
gem 'html2slim'
```

変換するにはターミナルで下記のコマンドを実行する。

```
# erbファイルを残して変換
$ erb2slim 変換するファイルがあるフォルダまたはファイル名

# erbを削除して変換
$ erb2slim 変換するファイルがあるフォルダまたはファイル名 -d

ex)
# application.html.erbを変換したかったら下記のように記述
$ erb2slim app/views/layouts/application.html.erb 
```

今後自動的に``slimファイル``を作成されるようにするためには　、
``config/application.rb``にある``config``を以下のように``slim``を指定すればOK。

```config/application.rb
module App
  class Application < Rails::Application
    config.generators.template_engine = :slim #slimに変更
  end                                                                                                                                                                     
end
```

##slimの使い方
``slim``には閉じタグという概念が無く、代わりにインデントを使い、マークアップする範囲を指定する。
インデントの深さは自由だが、2スペースを使用した場合はその後も2スペースにする必要がある。

``htmlファイル``の一番最初に書く``<!DOCTYPE html>``は下記のように記述する。

```rb
doctype html

# このコードにコンパイルされる
<!DOCTYPE html>
```

**htmlタグ**

```..slim
div
html
meta
header
footer
table
h1
p
a
ul
li
```

```..html
<div></div>
<html></html>
<meta></meta>
<header></header>
<footer></footer>
<table></table>
<h1></h1>
<p></p>
<a><a>
<ul></ul>
<li></li>
```

**classやidの指定**

```..slim
dev.content
  p.title タイトル
dev#content
  p#title タイトル
```

```..html
<dev class="content">
  <p class="title">タイトル</hoge>
</dev>
<dev id="content">
  <p id="title">タイトル</hoge>
</dev>
```
クラスやidは連続して指定できる。

```..slim
dev.content#article
  p.title.text-center タイトル
```

```..html
<dev class="content" id="article">
  <p class="title text-center">タイトル</hoge>
</dev>
```

**テキストの書き方**
テキストは``|``(パイプ)を使います。

``|``より後ろはテキストとして扱われるので、タグの横ではなく、タグの下に記述することで見やすくなるというのが最大のメリット。``|``以下は文字``""``として認識される。

```..slim
p
  | テキスト
```

```..html
<p>テキスト</p>
```

タグのすぐ後ろに``|``をいれると、``|``も文字として認識されてしまうので注意。

```..slim
p | テキスト
```

```..html
<p>| テキスト</p>
```

改行したいときは通常と同様、``<br>``を使う。
``<br>``をタグ無しで記入する方法もあり、``br``以下は再度``|``で始めることで、文字として認識させることができる。

```..slim
/<br>有
p
  |
    テキストテキストテキストテキストテキスト<br>
    テキストテキストテキストテキストテキスト<br>

/<br>無
p
  | テキストテキストテキストテキストテキスト
  br
  | テキストテキストテキストテキストテキスト
```

```..html
<p>テキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキスト</p>
```
またコメントアウトしたいときは``<br>有``のように``/``を使用。

**ifの条件式**
``slim``で``if文``を書くときは、``-``で囲う必要がある。また、``end``を入れる必要がない。

**Rubyタグの書き方**
``<%= ... >``→ ``= ...``
``<% ... >``→ ``- ...``

```..slim
- if current_user.nil?
  li 新規登録
- else
  li ログイン
```

```..rb
<% if current_user.nil? %>
  <li>新規登録</li>
<% else %>
  <li>ログイン</li>
<% end %>
```

##参考記事
[【爆速で習得】Railsでslimを使う方法から基本文法まで](https://qiita.com/ngron/items/c03e68642c2ab77e7283)
[【Rails】 slimの書き方をマスターしよう！](https://pikawaka.com/rails/slim)