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で書いた場合はこうなります。

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

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

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

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

%を使った書き方

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

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

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

%=を使った書き方

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

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

見出しタグの書き方

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

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

pタグの書き方

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

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

クラスの書き方

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

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

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

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

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

IDの書き方

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

クラスでは.を使ってましたが、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日

「役に立ったよ」と思ったらシェアお願いします!

ABOUTこの記事をかいた人

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