【初心者】RailsでSlimを書いてみよう

そもそもSlimとは

Railsのテンプレートエンジンの種類の１つ
デフォルトではERBというテンプレートエンジンを採用しています。
※テンプレートエンジン：HTMLのテンプレートとそこに記述された動的な処理からHTMLを生成するための仕組みのこと

Slimを使うメリット

• インデントでツリー構造を表現しているので、ERBと比較してタグの開始と終了を記述しないため簡潔で読みやすい
• 他のテンプレートエンジンに比べて高速・軽量に動作する

Slimの導入

Gemfile

gem 'slim-rails'
gem 'html2slim'

ターミナル

$ bundle install

次にERB形式のファイルが存在しているので、erb2slimを用いてSlimに変更します。
あとERBファイルも削除します。

ターミナル

$ bundle exec erb2slim app/views/layouts/ --delete

config/application.rbにあるconfigを以下のように記述する。

config/application.rb

module App
  class Application < Rails::Application
    config.generators.template_engine = :slim #slimに変更
  end                                                                                                                                                                     
end

基本的な記述方法

ERBがわかる方は、以下の内容を見ればなんとなく書けると思います。

html.erb	html.slim
<%= %>	=
<% %>	-
id="hoge"	#hoge
class="hoge"	.hoge
	/

htmlタグの記述

html.slim

h1 タイトル
p テキスト
a リンク
img src="https://hogeimage"

.html

<h1>タイトル</h1>
<p>テキスト</p>
<a>リンク</a>
<img src="https://hogeimage" />

*テキストについての記述はこの後に詳細を書きます。

テキストの記述

テキストは |(パイプ)を使います。
メリットとして、|より後ろはテキストとして扱われるため、タグの横ではなく、タグの下に記述することで長文の場合に見やすくなる

html.slim

p
  | 
　　テキストテキストテキストテキストテキストテキスト

.html

<p>テキストテキストテキストテキストテキストテキスト</p>

【＊注意点＊】
タグのすぐ後ろに|をいれると、|もテキストとして認識されます。

html.slim

p | テキスト

.html

<p>| テキスト</p>

class, idの記述

先程の表を参考に「.」「#」を使ってclassとidを指定した記述をしてみます。

html.slim

div.container
  div.content1
    h1#title タイトル
    p.text1 テキスト1
  div.content2
    p.text2 テキスト2

<div class="container">
  <div class="content1">
    <h1 id="title">タイトル</h1>
    <p class="text1">テキスト1</p>
  </div>
  <div class="content2">
    <p class="text2">テキスト2</p>
  </div>
</div>

if文の記述

endの記述忘れがなくなるから助かります。

html.erb

- if current_user.nil?
  li 新規登録
- else
  li ログイン

html.erb

<% if current_user.nil? %>
  <li>新規登録</li>
<% else %>
  <li>ログイン</li>
<% end %>

終わりに

私自身がまだまだSlimを触り始めたばかりですので、基礎的な記述方法しか扱えません。
今後も内容追加していきますので、お願い致します。