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にする方法 Ruby on Railsでデフォルトのテンプレートエンジンである「ERB」からを「SLIM」に変更する方法を紹介します。 また、すでにERBで書かれてるファイルをSLIMに変換する方...


>>Ruby on Railsの学習方法のまとめはこちら
あわせて読みたい
Ruby on Rasilsの学習方法まとめ Ruby on Railsを学びたいけど、どうやって学習したらいいんだろう? そんな「Ruby on Railsを独学で学びたい人」に向けて、Ruby on Railsの学習の進め方をまとめました...
あわせて読みたい
ポテパンキャンプの選考の流れとポイント【要チェック】 この記事では、の選考について紹介していきます。 僕自身、ポテパンキャンプの無料カウンセリングを受けて、受講することになりました。無料カウンセリングは同時に選考...

シェアよろしくお願いします
URLをコピーする
URLをコピーしました!
目次
閉じる