WeBlog

Webに関する情報を中心に発信してるブログ

Slimの使い方

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

Rubyスクリプトを書く<%= %>=で書くことが多いですが、=> で書くこともできます。

=>は末尾のスペースを伴った出力をします。

なので画像のように=で書くと「編集」と「プレビュー」がくっついていますが、=>で書くとスペースが空いていることがわかります。

他にも色々ありますが、下記記事を参考にしてください。

slim

https://qiita.com/ngron/items/c03e68642c2ab77e7283