Slim とは?
Slim は Rails3 以降 に対応した高速, 軽量なテンプレートエンジンです。
- HTMLの< >や閉じタグなどを無くして、最低限必要なものだけを残したシンプルなテンプレート言語
- 軽量
といった特徴を持つ、Ruby製のテンプレートエンジンです。
つまり、このslimの記法を用いることによって、HTMLがより簡潔に記述できるという訳ですね。
使い方
slim-railsをインストールする
Railsにはデフォルトでerbというテンプレートエンジンが導入されています。
これをslimに変更したい場合、
# Gemfile gem 'slim-rails'
とGemfileに追記してあげた上で、bundle intall
を実行して、viewファイルの拡張子をhtml.slim
としてあげればOKです。
slim-rails
インストールした後に、ジェネレーターで生成されるviewファイルの拡張子は、.html.erb
から.html.slim
に変更されます。
既にerbで記載したコードがある場合の変更
# Gemfile gem 'html2slim'
erbをslimに変更したい場合は、html2slim
などのgemを用いて記述を書き換えてしまうのが一般的です。
# -dを付けるとslimに変換した後にerbを削除する
bundle exec erb2slim app/views app/views -d
gemをインストール後に上記のコマンドを打つことで、app/views
配下のerbファイルやerbで記載したコードを、slimに変換してくれます。
https://github.com/slim-template/html2slim
slimの記法
slimはテンプレートエンジンであるため、最終的にはHTMLとなって出力されます。
例えばerbの中でrubyのeach記法を使用したい場合、
<% @users.each do |user| %> <p><%= user.name %></p> <% end %>
こんな形で書きます。
これをslim記法になると、
- @users.each do |user| p = user.name
このような記述となります。
<% %>
というruby記法の使用宣言が、「-」となっている<%= %>
というruby記法の使用宣言 + 出力が、「=」となっていること- 閉じタグが不要なこと (段落によって閉じタグを判断している)
<p> ~~ </p>
という記法が、p
となっている(HTMLタグの <> や は不要)
といったルールにより、この短いコードで記述することができました。
# slim p 段落 a アンカー # 出力 <p>段落</p> <a>アンカー</a>
HTMLも<p>
や</p>
など必要ないです。
上記のように書けます。
dev p.title 段落 dev p#title 段落 # 出力 <dev> <p class="title">段落</hoge> </dev> <dev> <p id="title">段落</hoge> </dev>
class属性やid属性はcssのように.
や#
を使って書きます。
p.title.text-center 段落 # 出力 <p class="title text-center">段落</hoge>
class属性やid属性を連続して書くときも上記のように繋げてかけます。
p | テキスト # 出力 <p>テキスト</p>
テキストはパイプラインを使って書きます。
# = を使った場合 div - if policy(article).edit? = link_to edit_admin_article_path(article.uuid), class: %w[btn btn-default btn-xs btn-flat] i.fa.fa-edit ' | 編集
# =>を使った場合 div - if policy(article).edit? => link_to edit_admin_article_path(article.uuid), class: %w[btn btn-default btn-xs btn-flat] i.fa.fa-edit ' | 編集
Rubyスクリプトを書く<%= %>
は =
で書くことが多いですが、=>
で書くこともできます。
=>
は末尾のスペースを伴った出力をします。
なので画像のように=
で書くと「編集」と「プレビュー」がくっついていますが、=>
で書くとスペースが空いていることがわかります。
他にも色々ありますが、下記記事を参考にしてください。