Railsのテンプレートファイルはデフォルトではerb形式ですが、記述が簡単になるということでSlim形式を利用しています。

今回は、Slim形式についての内容をまとめておきます。

Slimとは

Railsのテンプレートファイルはerb形式が採用されています。

erbとはテンプレートエンジンと呼ばれているもので、今回の場合はRubyコードを用いてHTMLを動的に出力するための仕組みです。

なのでerb自体便利なものなのですが、記述方法をもっと簡単にする方法としてSlim形式を利用することが挙げられます。

Slim形式はerb形式と比べてコード量も削減できるのでおすすめです。

RailsでSlimを利用する場合はgemをインストールする必要があります。

Slimの導入

Gemfileに以下の行を追加しインストールを行います。

gem 'slim-rails'

インストール後、Slimが利用可能になるので、テンプレートファイルの拡張子「.erb」を「.slim」に変更しましょう。

書き方

Rubyコードを挿入

SlimファイルにRubyのコードを挿入する方法は二種類あります。

一つは、命令の実行結果を出力させる場合、行の先頭にイコール「=」を挟みます。

/ コントローラー側で用意されたユーザー変数のidメンバーを表示
= @user.id

命令の実行のみ行いたい場合は、行の先頭にハイフン「-」を挟みます。

/ ユーザーが存在する場合はIDを表示
- if @user.blank?
  = @user.id

HTMLタグ

HTMLタグを挿入する場合、直接タグ名を記述します。

コンテンツの部分はネストして表現します。

/ pタグを挿入
p
  テキスト

/ このやり方でも同じ動作
p= テキスト

この場合、実行結果として以下のようなHTMLが出力されます。

<p>テキスト</p>

属性を指定する

HTMLタグに属性を設定したい場合、タグの後に属性名を指定します。

/ 属性の指定
a href='https://www.twei-blog.com'= 'ブログへ'

/ 複数の属性の指定
a href='https://www.twei-blog.com' id='#blog_link'= 'ブログへ'
<a href="https://www.twei-blog.com">ブログへ</a>
<a href="https://www.twei-blog.com" id="blog_link">ブログへ</a>

複数の属性を設定する場合は、スペースで空けてから続けて指定します。

コメントアウト

行をコメントアウトする場合、行の先頭にスラッシュ「/」を入れます。

/ コメントとなる行

コメントアウトした行のネストされた行も一緒にコメントアウトされます。

/ 下の二行はコメントアウトされる
/ p
    テキスト

/ pタグの行はコメントアウトされない
p
  / テキスト

改行があるテキスト

改行があるテキストを挿入したい場合、行の先頭にパイプ「|」を入れます。

p
  |
    テキスト1
    テキスト2

上記の例の場合、以下の出力結果となります。

<p>
  テキスト1
  テキスト2
</p>

クラスやIDの指定

/ クラスの場合
.class.hoge

/ IDの場合
#id

上記の例のような場合、以下のように出力されます。

/ クラスの場合
<div class="class hoge">
</div>

/ IDの場合
<div id="id">
</div>

クラスやIDの指定の場合、デフォルトとしてdiv属性として出力されます。

投稿者: TWEI

趣味はプログラミング。 以前は仕事でプログラミングをやっていました。現在はWebエンジニアを目指して勉強中。 勉強で得た知識などをブログで発信していく予定です。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA