【概要】
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