【Rails】 slimの書き方をマスターしよう！
slimとは、htmlよりもコードを早く綺麗に、そして非常にシンプルに作ることができます。またerbと同じでRubyのコードを埋め込むことができます。
1
2
3
4
5
6
div
h1 ピカわかメニュー
ul
li Ruby
li Rails
li HTML
これは下記のようにコンパイルされます。
1
2
3
4
5
6
7
8
<div>
<h1>ピカわかメニュー</h1>
<ul>
<li>Ruby</li>
<li>Rails</li>
<li>HTML</li>
</ul>
</div>
slimはRubyで使うテンプレートエンジンの一つです。
他にも有名なテンプレートエンジンとしておなじみのerbやslimに似たhamlというものがあります。
slimには閉じタグが存在しないのでコード自体が非常にスッキリしています。ただ、erbの書き方に慣れているとslimの書き方に慣れるのが大変というデメリットがあります。
しかし、slimの書き方をマスターしてしまえば、効率よく、綺麗にビューファイルを作成することができます。
テンプレートと呼ばれる通常のhtmlで書いたコードと変数などプログラミングによって書かれたコードを合成してビューファイルを作り出すものです。
slimの使い方
この章では、slimの使い方について解説します。
Railsにslimを導入してみよう
Railsではデフォルトのテンプレートエンジンはerbです。
そのためslimを使うには、gemをインストールする必要があります。
Gemfileに下記のコードを追加し、bundle installコマンドを実行しましょう。
1
gem 'slim-rails'
これにより、index.html.slimのようにビューファイルの拡張子にslimが使えるようになります。
slim→htmlのように右から順にコンパイルされ、表示される際にはHTMLのコードに変換されます。
ビューファイルの中に同盟のerbファイルとslimファイルがある場合は、erbが優先して読み込まれるのでslimを使いたい場合はerbファイルは削除しておきましょう。
gemを使ってerbをslimに変更してみよう
もともと存在するapplication.html.erbなどをslimに手動で書き直すのは手間ですよね。
そんな時はgemを使って自動でerbをslimに変換することができます。
Gemfileに下記のコードを追加し、bundle installコマンドを実行しましょう。
1
gem 'html2slim'
変換するにはターミナルで下記のコマンドを実行します。
1
2
3
4
5
# erbファイルを残して変換
erb2slim 変換するファイルがあるフォルダまたはファイル名
# erbを削除して変換
erb2slim 変換するファイルがあるフォルダまたはファイル名 -d
application.html.erbを変換したかったら下記のように記述します。
1
2
# erbファイルを残して変換
erb2slim app/views/layouts/application.html.erb
基本的な書き方を覚えよう
それでは、slimの基本的な書き方を解説します。
slimには閉じタグという概念がありません。
代わりにインデントを使い、マークアップする範囲を指定します。
インデントの深さは自由ですが、2スペースを使用した場合はその後も2スペースにする必要があります。
1
2
3
4
5
6
div
h1 ピカわかメニュー
ul
li Ruby
li Rails
li HTML
これは下記のようにコンパイルされます。
1
2
3
4
5
6
7
8
<div>
<h1>ピカわかメニュー</h1>
<ul>
<li>Ruby</li>
<li>Rails</li>
<li>HTML</li>
</ul>
</div>
htmlファイルの一番最初に書く<!DOCTYPE html>は下記のように記述します。
1
2
3
4
doctype html
# このコードにコンパイルされる
<!DOCTYPE html>
各タグなどの書き方
上の例のようにタグを使用する際はタグの前後の<と>を外します。
1
2
3
4
5
6
7
8
9
10
11
div
html
meta
header
footer
table
h1
p
a
ul
li
下記のようにコンパイルされます。
1
2
3
4
5
6
7
8
9
10
11
<div></div>
<html></html>
<meta></meta>
<header></header>
<footer></footer>
<table></table>
<h1></h1>
<p></p>
<a><a>
<ul></ul>
<li></li>
テキストの書き方
テキストは|で定義します。
1
2
p
| ピカわか
下記のようにコンパイルされます。
1
<p>ピカわか</p>
長いテキストも書くことができます。
1
2
3
4
p
|
ピカいちわかりやすい
プログラミングサイトです。
下記のようにコンパイルされます。
1
2
<p>ピカいちわかりやすい
プログラミングサイトです。</p>
上の例では改行はされません。
改行をしたいときにはhtmlと同じように<br>を使います。
1
2
3
4
p
|
ピカいちわかりやすい<br>
プログラミングサイトです。
下記のようにコンパイルされます。
1
2
<p>ピカいちわかりやすい<br>
プログラミングサイトです。</p>
属性の書き方
タグ内の属性は下記のように記述します。
aタグの例をみてみましょう。
1
a href='http://www.pikawaka.com' ピカわか
上のコードはコンパイルされると下記のコードになります。
1
<a href="http://www.pikawaka.com">ピカわか</a>
imgタグなどの場合もこうなります。
1
img src="pika.jpg" alt="ピカわか"
このコードは下記のようにコンパイルされます。
1
<img src="pika.jpg" alt="ピカわか">
IDとclassの書き方
IDとクラスの指定は下記のように記述します。
divは省略することができるので書いても書かなくても大丈夫です。
1
2
3
4
5
6
7
8
#pikawaka
ピカわか
div.pikawaka
ピカわか
.pikawaka
ピカわか
このコードは下記のようにコンパイルされます。
1
2
3
4
5
<div id="pikawaka">ピカわか</p>
<div class="pikawaka">ピカわか</p>
<div class="pikawaka">ピカわか</p>
このようにidは#を、クラスは.をつけるだけで定義することができます。
非常に簡潔にかけますね！
複数定義する場合は下記のように記述します。
1
2
3
4
5
#pikawaka.hoge.fuga
ピカわか
.pikawaka.hoge
ピカわか
このコードは下記のようにコンパイルされます。
1
2
3
<div id="pikawaka" class="hoge fuga">ピカわか</p>
<div class="pikawaka hoge"ピカわか</p>
非常に簡潔に書けますね！
コメントアウトの書き方
コメントアウトしたいときは/を使用します。
コメントアウトは下記のように記述します。
1
2
3
p ピカわか
/haml内だけに表示したいコメントアウトです
p ピカいちわかりやすい
このようにコンパイル後のファイルにはコメントは表示されません。
1
2
<p>ピカわか</p>
<p>ピカいちわかりやすい</p>
JavaScriptの書き方
JavaScriptは、下記のように記述します。
1
2
:javascript
コード
下記のようにコンパイルされます。
1
2
3
<script>
コード
</script>
カスタムデータ属性の書き方
HTML5から追加されたカスタムデータ属性は下記のように記述します。
1
span data-属性名="値"
例を見てみましょう。
1
2
3
4
span data-target='hogehoge'
# 下記のようにコンパイル
<span data-target='hogehoge'></span>
link_toのときは下記のように記述します。
1
2
3
4
5
6
7
= link_to "テキスト", "パス", data: { 属性名: '値' }
# 例
= link_to "TOP", root_path, data: {target: "hoge"}
# 下記のようにコンパイル
<a data-target="hoge" href="/">TOP</a>
カスタムデータ属性とは、「data-hogehoge」 のような形式で、「data-」を最初につけて定義します。これは自分で自由に指定ができる属性です。
主にJavaScriptで定義した属性にアクセスしたいときなどに使用します。
Rubyのコードを書いてみよう
slimファイル内でRubyのコード使用するには下記のように記述します。
Rubyタグの書き方
<%= ... >は = ...のように記述します。
<% ... >は - ...のように記述します。
1
2
3
4
<% @articles.each do |article| %>
<p><%= article.title %></p>
<p><%= article.body %></p>
<% end %>
上のコードをslimで書くと下記のコードになります。
1
2
3
- @articles.each do |article|
p = article.title
p = article.body
閉じタグの<% end %>はインデントで指定しているので、不要です。
今回はRailsにslimを導入する方法からslimの使い方を解説しました。Railsについてもっと知識を増やしたいという方は、こちらの書籍も併用しながら学習すると理解を深めることができます。
この記事のまとめ
- slimはerbよりもコードの記述を少なく書ける言語だよ
- 閉じタグが不要なためコードがとてもシンプルになる
- 変数なども使うことができる
