【概要】

erb形式でコードを買いていた人は、slimについてなかなかとっつきにくいのではないしょうか？
今回は、Slimでコードを書くためのポイントを押さえて、Slimな生活を送りましょう〜！

【Slimとは】

・「Slim」は、HTMLを簡潔に書くためのテンプレートエンジンの一種であり、主にRubyプログラミング言語と組み合わせて使用ます。
・HTML文書をより短く、読みやすく、メンテナンスしやすい形式で表現で記述できます。

例を見て見ましょう。

<div class="container">
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</div>

.container
  h1 Hello, World!
  p This is a paragraph.

このように、通常のerb形式と比較して、効率的に記述できるのが、slimになります。

【Slimの導入1】

gemfileにこのように記述しましょう。

gem 'slim-rails'

この状態で、bundle installでインストールできます。ここで、注目するのは、作成する形式です。
もし今後作成するviewファイルがerb形式からslim形式に置き換える場合は、下記のようにconfigを設定してください。

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

【Slimの導入2】

上記では、今後作成するviewをslimにする方法を紹介しました。
今度は、既存のerbをslimに変更してみましょう。

gem 'html2slim' # erb->slimに変更するためのgem

erb2slim 変換するフォルダまたはファイル #erb残して変換
erb2slim 変換するフォルダまたはファイル -d #erb削除して変換

これで、形式を変更する準備はできました。また、一括で変更した場合などは、下記の記事を参考にしてください。

【Slimの記述の仕方】

ここから本題の説明になります。まずは、記述の特徴を抑えましょう。

erbの書き方	slimの書き方	説明
`<p>要素1</p>`	p 要素1	p要素の書き方
`<div>要素2</div>`	div 要素2	div要素の書き方
<% if %>	- if	if文の書き方
<%= content %>	= content	値等の表示
id="qiita"	#qiita	idの書き方
class="notion"	.notion	classの書き方
`<div class=”slim楽しい”>`	div.slim楽しい	divとclassの書き方
`<div id="qiita" class="notion">コンテンツ</div>`	div#qiita.notion コンテンツ	mixパターン

おおよそこの表をみてもらえればわかると思います。

これを参考にformのパターンを例に考えてみましょう。

【slimのサンプル】

erbのパターン

<form action="/submit" method="post">
  <label for="username">ユーザ名:</label>
  <input type="text" id="username" name="username">
  <label for="password">パスワード:</label>
  <input type="password" id="password" name="password">
  <button type="submit">送信</button>
</form>

slimのパターン1

form action="/submit" method="post"
  label for="username" ユーザ名:
  input type="text" id="username" name="username"
  label for="password" パスワード:
  input type="password" id="password" name="password"
  button type="submit" 送信

slimのパターン2

form(action="/submit" method="post")
  label(for="username") ユーザ名:
  input(type="text" id="username" name="username")
  label(for="password") パスワード:
  input(type="password" id="password" name="password")
  button(type="submit") 送信

【引用元】

Slim入門をして書き方を練習をしました
https://qiita.com/pugiemonn/items/b64171952d958dc4d6be
[Rails4,Rails5] erbファイルをSlimに一括変換するGemとRubyワンライナー
https://qiita.com/mocchicc/items/abab4cdfac7b542742a6