すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

Rails

【Rails】slimの書き方をマスターしよう!

ぴっかちゃん
ぴっかちゃん

slimとは、htmlよりもコードを早く綺麗に、そして非常にシンプルに作ることができます。またerbと同じでrubyのコードを埋め込むことができます。

slimの使用例
1
2
3
4
5
6
div
  h1 ピカわかメニュー
  ul
    li Ruby
    li Rails
    li HTML

これは下記のようにコンパイルされます。

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コマンドを実行しましょう。

Gemfile
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コマンドを実行しましょう。

Gemfile
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スペースにする必要があります。

slim
1
2
3
4
5
6
div
  h1 ピカわかメニュー
  ul
    li Ruby
    li Rails
    li HTML

これは下記のようにコンパイルされます。

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>は下記のように記述します。

slim→html
1
2
3
4
doctype html

# このコードにコンパイルされる
<!DOCTYPE html>

各タグなどの書き方

上の例のようにタグを使用する際はタグの前後の<>を外します。

slim
1
2
3
4
5
6
7
8
9
10
11
div
html
meta
header
footer
table
h1
p
a
ul
li

下記のようにコンパイルされます。

html | コンパイルされるコード
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>

テキストの書き方

テキストは|で定義します。

slim
1
2
p
  | ピカわか

下記のようにコンパイルされます。

html | コンパイルされるコード
1
<p>ピカわか</p>

長いテキストも書くことができます。

slim
1
2
3
4
p
  |
    ピカいちわかりやすい
    プログラミングサイトです。

下記のようにコンパイルされます。

html | コンパイルされるコード
1
2
<p>ピカいちわかりやすい
プログラミングサイトです。</p>

上の例では改行はされません。
改行をしたいときにはhtmlと同じように<br>を使います。

slim
1
2
3
4
p
  |
    ピカいちわかりやすい<br>
    プログラミングサイトです。

下記のようにコンパイルされます。

html | コンパイルされるコード
1
2
<p>ピカいちわかりやすい<br>
プログラミングサイトです。</p>

属性の書き方

タグ内の属性は下記のように記述します。
aタグの例をみてみましょう。

slim
1
a href='http://www.pikawaka.com' ピカわか

上のコードはコンパイルされると下記のコードになります。

html | コンパイルされるコード
1
<a href="http://www.pikawaka.com">ピカわか</a>

imgタグなどの場合もこうなります。

slim
1
img src="pika.jpg" alt="ピカわか"

このコードは下記のようにコンパイルされます。

html | コンパイルされるコード
1
<img  src="pika.jpg" alt="ピカわか">

IDとclassの書き方

IDとクラスの指定は下記のように記述します。
divは省略することができるので書いても書かなくても大丈夫です。

slim
1
2
3
4
5
6
7
8
#pikawaka
  ピカわか

div.pikawaka
  ピカわか

.pikawaka
  ピカわか

このコードは下記のようにコンパイルされます。

html | コンパイルされるコード
1
2
3
4
5
<div id="pikawaka">ピカわか</p>

<div class="pikawaka">ピカわか</p>

<div class="pikawaka">ピカわか</p>

このようにidは#を、クラスは.をつけるだけで定義することができます。
非常に簡潔にかけますね!

複数定義する場合は下記のように記述します。

slim
1
2
3
4
5
#pikawaka.hoge.fuga
  ピカわか

.pikawaka.hoge
  ピカわか

このコードは下記のようにコンパイルされます。

html | コンパイルされるコード
1
2
3
<div id="pikawaka" class="hoge fuga">ピカわか</p>

<div class="pikawaka hoge"ピカわか</p>

非常に簡潔に書けますね!

コメントアウトの書き方

コメントアウトしたいときは/を使用します。
コメントアウトは下記のように記述します。

slim
1
2
3
p ピカわか
/haml内だけに表示したいコメントアウトです
p ピカいちわかりやすい

このようにコンパイル後のファイルにはコメントは表示されません。

html | コンパイルされるコード
1
2
<p>ピカわか</p>
<p>ピカいちわかりやすい</p>

javascriptの書き方

javascriptは下記のように記述します。

slim
1
2
:javascript
  コード

下記のようにコンパイルされます。

html | コンパイルされるコード
1
2
3
<script>
  コード
</script>

カスタムデータ属性の書き方

HTML5から追加されたカスタムデータ属性は下記のように記述します。

slim
1
span data-属性名="値"

例を見てみましょう。

slim→html
1
2
3
4
span data-target='hogehoge'

# 下記のようにコンパイル
<span data-target='hogehoge'></span>

link_toのときは下記のように記述します。

slim→html
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>

rubyのコードを書いてみよう

slimファイル内でrubyのコード使用するには下記のように記述します。

rubyタグの書き方

<%= ... >= ...のように記述します。
<% ... >- ...のように記述します。

ビューファイル
1
2
3
4
<% @articles.each do |article| %>
  <p><%= article.title %></p>
  <p><%= article.body %></p>
<% end %>

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

slim
1
2
3
- @articles.each do |article| 
  p = article.title
  p = article.body

閉じタグの<% end %>はインデントで指定しているので、不要です。

この記事のまとめ

  • slimはerbよりもコードの記述を少なく書ける言語だよ
  • 閉じタグが不要なためコードがとてもシンプルになる
  • 変数なども使うことができる

9

わかった!