erbからslimへのテンプレートエンジンの変更方法&slimの記法まとめ

Slimの導入方法

１. Gemfileにrails-slimを加え、bundle installコマンドを実行

# Gemfile

gem 'slim-rails'
=>bundle installコマンドを実行

２. デフォルトで生成されるviewファイルのテンプレートエンジンをslimに変更することも可能

# config/application.rb

class Application < Rails::Application
  config.generators.template_engine = :slim  
end

基本的な書き方一覧

・HTMLタグの<>や閉じタグが不要

# index.html.erb
<h1>Users</h1>

# index.html.slim
  h1 Users

・classはh1.name, idはp#nameのように、.と#で書く。複数のクラスを記載したい場合は.で繋げる必要がある。

# index.html.erb
<h1 class="name">Users</h1>
<h1 class="name email">Users</h1>
<p id="name">Users</p>

# index.html.slim
  h1.name Users
  h1.name.email Users
  p#name Users

・erbの<% %>というruby記法の使用宣言が「-」に変更する

<% if @blogs.present? %>
  <p>在庫あり</p>
<% end %>

- @blogs.present?
  p 在庫あり

・<%= %> というruby記法の使用宣言と出力が、「=」に変更する

<% @blogs.each do |blog| %>
  <p><%= blog.title %></p>
<% end %>

- @blogs.each do |blog|
  p = blog.title

・renderやyieldは、=ではなく==を使う
==を使用することで、HTMLエスケープを無効にして出力することができる。
一例として、render_to_stringによって返された「画像を表示する文字列」から画像を表示する場合、以下のようなコードなる。

# admin/articles_controller.rb

class Admin::ArticlesController < ApplicationController
  def show
    @article = Article.find_by!(id: params[:article_id])
    @article.body = @article.controller.render_to_string("shared/_media_image", locals: { medium: medium })
  end
end

irb(#<Admin::Articles::PreviewsController:0x00007fe4cd0b4b40>):001:0> @article.body
=> "<div class=\"media-image\"><img src=\"http://localhost:3000/rails/active_storage/representations/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4420d225322ef11058618687b5a47ec403e7c6c8/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9MY21WemFYcGxTU0lOTVRBeU5IZzNOamdHT2daRlZBPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--6ec66a681693b203f182cf67cd6ee51b8eb65eca/sample01.jpg\" /></div>"

# articles/show.html.slim

article.article
    == @article.body

viewファイルの== @article.bodyの部分を= @article.bodyとすると、コンソールで表示した<div class= 〜 </div>までのコードを表示することになるが、== @article.bodyとすることでHTMLエスケープを無効にし、画像を表示することができる。

公式リファレンス

詳しい日本語のリファレンスはこちら。

github.com