SLIMでのコードの書き方【Ruby on Rails】

Ruby on RailsにおけるSLIMのテンプレートエンジンの書き方を紹介します。

これを見れば基本的な書き方が分かるので、SLIMを書き始めたような人は参考にしてみてください。

この記事はフリーランスエンジニアでブロガーの著者が書いています。

オンライン学習サイトの「Udemy 」でサイバーウィークセール開催中!

  • 30日間返金保証付き
  • 対象コースが1,200円〜(12/4まで)

おすすめWordPress講座5選

おすすめRuby on Rails講座6選

Ruby on Railsのテンプレートエンジンの種類

Ruby on Railsのテンプレートエンジンの種類は3つです。

  • ERB
  • SLIM
  • HAML

Ruby on Railsのテンプレートエンジンはデフォルト設定だと「ERB」になっています。
他に使うことができるものとして「HAML」と「SLIM」があります。

ERBでコードを書くよりもHAMLやSLIMで書いたほうが、コードがすっきりとして、見やすくなります。

ERBとSLIMの違い

ERBとSLIMでコードがどのように違うのか、form_withのコードで比較してみます。

ERBで書いた場合はこうなります。


<%= form_with model: @task do |f| %>
        <%= f.label :name %>
        <%= f.text_field :name, class: 'form-control' %>
        <%= f.label :description %>
        <%= f.text_area :description, class: 'form-control' %>
    <%= f.submit "提出する", class: 'btn btn-info' %>
<% end %>

上記のerbのコードをslimで書くと以下のようになります。


= form_with model: task do |f|
    = f.label :name
    = f.text_field :name, class: 'form-control', id: 'task_name'
    = f.label :description
    = f.text_area :description, class: 'form-control', id: 'task_description'
  = f.submit "提出する", class: 'btn btn-info'

パット見て、ERBとSLIMではコードの多さが違うことが分かると思います。
それでは詳しく解説していきます。

SLIMを使ったRubyコードの書き方

Slimはどのように書くのかをErbと比較して、詳しく説明していきます。

%を使った書き方

ERBではRubyのコードを<% %>を使って書きます。

<% if current_user? %>

ERBでの<% %>を使った書き方は、SLIMで書くと以下のようになります。

- if current_user?

このようにERBでは<% %>と書くのを、SLIMでは-で書くことができます。
閉じタグも必要ありません。

%=を使った書き方

<%= link_to '新規登録', new_user_path %>
=link_to '新規登録', new_user_path

<%= %>のコードは<% %>が全て省略され=のみで表現することができます。
こちらも閉じタグは必要ありません。

SLIMを使ったHTMLコードの書き方

見出しタグの書き方

h1タグは以下のように書きます。

h1 タイトル

h+数字で見出しを表現し、半角スペースを空けた後に、見出しタグに含める文面を書きます。

pタグの書き方

pタグは以下のように書きます。

p こんにちは

pの後に半角スペースを空けて中身を書きます。

クラスの書き方

SLIMでクラスを付与するためには以下のようにします。

.text-center

divなどにクラスを付与することは、たった.を書くだけで閉じタグも書く必要がありません。

閉じタグの代わりにインデントを使って、表現するので、インデントだけは気を使いましょう。

クラスが2つ以上ある場合は以下のようになります。

.btn.btn-primary

このようにスペースを空けずに、.でつなげるだけで複数のクラスを指定することができます。

IDの書き方

IDを付与する時は以下のようになります。

#top

クラスでは.を使ってましたが、idを指定する時は#を使います。

こちらも閉じタグも書く必要がなく、インデントが閉じタグの役割をします。

まとめ:SLIMを使ってRuby on Railsのコードをすっきりさせよう

Ruby on Railsの現場ではERBは使われることがあまりなく、HAMLやSLIMが一般的です。

慣れるまでは時間はかかりますが、一度慣れると、閣僚が少なくなるため、コードを書く時間が短くなります。
また、ERBよりもスッキリしたコードになるため、可読性も高くなります。

ぜひERBからSLIMのに変えてみてください。

Ruby on RailsのデフォルトのテンプレートエンジンのERBからSLIMに変更する方法は別の記事にまとめているので参考にしてみてください。

Ruby on RailsのテンプレートエンジンをSlimにする方法

2019年2月12日
ruby on railsのおすすめ学習本

Ruby on Railsの学習にオススメな本4選

2019年2月20日
>>Ruby on Railsの学習方法のまとめはこちら

Ruby on Rasilsの学習方法まとめ

2019年7月23日

ポテパンキャンプの選考の流れとポイント【要チェック】

2019年2月10日
記事のタイトルとURLをコピーする
Amazonでお得に買い物

Amazonを使って、いろんなモノを購入されると思いますが、Amazonのギフト券(チャージ式)のキャンペーンを利用するとお得です。

現在開催されているのは

  1. チャージ金額に合わせて最大2.5%ポイントが還元されるキャンペーン
  2. 5,000円以上のチャージで1,000ポイントがもらえるキャンペーン(初回購入のみ)
の2つ。

さらに、Amazonプライム会員であれば、ゲットできるポイントの利率が一般会員よりも高くなってお得です!

ぜひこの機会に、キャンペーンを利用して、欲しい物をお得に購入してみてください。

  • クレジットカード・電子マネーでのチャージはキャンペーン対象外
ギフト券の有効期限は10年なので、急いで使い切る必要はなし! 多めにチャージしておいて損はないね!