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

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

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

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の学習にオススメな本4選

2019年2月20日

Ruby on Rasilsの学習方法まとめ

2019年7月23日

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

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

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

キャンペーンを利用すれば、普通に購入するのに比べて、

  • Amazonギフト券のチャージ金額に合わせてポイントが貯まる(最大2.5%)
  • 5,000円以上のチャージで1,000ポイントがもらえる(初回購入の人のみ)

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

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

  • クレジットカード・電子マネーでのチャージはキャンペーン対象外なので注意

ABOUTこの記事をかいた人

1989年生まれの29歳。留学、ワーホリ、世界一周から帰ってきました。 iSara5thに参加して、現在駆け出しフリーランスとして頑張っています。 旅行が好きで、バックパッカーとしていろんなところに行きました。世界一周の情報をまとめたブログも運営中。
世界一周ライフトラベラー