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の学習方法のまとめはこちら
