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に変換してくれます。

erbをslimに変換する html2slim

https://github.com/slim-template/html2slim

ERB 2 SLIM

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
       '
       | 編集

f:id:weblog_tec:20210610094259p:plain

# =>を使った場合
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
     '
     | 編集

f:id:weblog_tec:20210610094312p:plain