Help us understand the problem. What is going on with this article?

Slim入門をして書き方を練習をしました

More than 3 years have passed since last update.

Slim入門ということで書き方の練習を始めました。この記事ではHTMLのViewをSlim形式に書き換える際のポイントを書いていきます。

Slimとは

Ruby製のテンプレートエンジンです。HTMLタグを短く書くことができます。
ボクはRailsのビューを書くのに使っていますので、Railsでの使用を想定しています。

Railsへの導入

gemファイルにslimの読み込みを記述します。

Gemfileへslim-railsを記述
gem 'slim-rails'

あとはbundle installでslimがインストールされます。

slim-rails が入った後にrails generate コマンド経由でviewが生成された場合に、.erbのファイルではなく.slim拡張子のファイルが出力されます。

HTMLからSlimへの変換ツール

HTMLからSlimへの変換は、変換ツールがあります。まだSlimに慣れていない場合は、ツールを使いながら練習するとわかりやすいです。

erbをslimに変換する

変換する場合は、html2slimというgemを利用しました。

erbをslimに変換
html2slim slimへ変化したいerbのパス

コマンドにerbのパスを指定すると、erbファイルがslimファイルに変換されました。

大量のerbを一括変換する場合には以下の記事が参考になります。
http://qiita.com/mocchicc/items/abab4cdfac7b542742a6

Rubyコードの書き方

RailsのSlimを使用したViewに、Rubyのコードを書く書き方です。

<% %>の書き方

Rubyのコード<% %>を書く場合は、Slimでは-で書ことができました。
以下はSlimでのif文を書く場合です。

Slimでif文
- if logged_in?
 li = link_to 'イベントを作る', new_event_path
 li = link_to 'ログアウト', logout_path
- else
 li = link_to 'Twitterでログイン', '/auth/twitter'

<%= %>の書き方

Rubyの<%= %>を書く場合は、Slimでは=で書ことができました。

Slimでformタグ
= form_for @event, :html => { class: "ui form"} do |f|
  = f.text_field :title, placeholder: "タイトル"
  = f.submit "イベントを作成", class: "btn"
出力されたformタグ
<form class="ui form" id="new_event" action="/events" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden"name="authenticity_token" value="xWNf4uQj5lW1s2070bCmu3f4NzzfhdOfZno4M1INX5hZnCF4TSKYPu1vczQYwPOK0YggtE62BB3FfNLFZbCJlA==" />
  <input placeholder="タイトル" type="text" name="event[title]" id="event_title" />
  <input type="submit" name="commit" value="イベントを作成" class="btn" />
</form>

コメントの書き方

Slimのコメントは/を使うとコメントにすることができます

Slimでコメント
- if logged_in?
 li = link_to 'イベントを作る', new_event_path
 /li = link_to 'ログアウト', logout_path

/を付けたので、元々2つあったliタグのうち、ログアウトの方のタグは表示されなくなりました。

ちなみに#でもコメントを付けられるみたいです。ただ、こちらはコメントされた形でソースに書きだされます。

HTMLタグの書き方

よく使うタグの書き方です。

Slimでpタグ
p
pタグの出力
<p></p>

タグを打つだけで<>の囲いと綴じタグが不要になります。

aタグ

Slimでaタグ
a href="//example.com" hoge
aタグの出力
<a href="//example.com">hoge</a>

target属性を付ける

他に属性を付けたい場合は、属性を後ろに追加します。よくあるのはtarget属性ですね。

Slimでaタグにtarget属性
a href="//example.com" target="_blank" hoge
属性ありのaタグ出力
<a href="//example.com" target="_blank">hoge</a>

imgタグ

Slimでimgタグ
img src="https://pbs.twimg.com/profile_images/1739640742/20120108024459Comic20120102_001-1_normal.jpg" alt="ぷぎえもん"
imgタグの出力
<img alt="ぷぎえもん" src="https://pbs.twimg.com/profile_images/1739640742/20120108024459Comic20120102_001-1_normal.jpg">

imgタグの属性をさらに足す場合は、後ろに属性を足せばいいことがわかりやすいです。

HTMLタグへテキストを加える

pタグの後ろへテキストを書きます。

Slimでテキストを挿入
p ほげほげ ふがふが
タグに挿入されたテキスト
<p>
      ほげほげ ふがふが
</p>

長いテキストなど、改行してテキストを書くにはパイプを使用します。

Slimで改行テキストを挿入
p
  |
    ほげほげ ふがふが
    ほげほげ ふがふが
タグに改行されたテキスト
<p>
      ほげほげ ふがふが
      ほげほげ ふがふが
</p>

また、パイプを使用する場合はパイプの後ろに書いてもOKです。

Slimで改行テキストを挿入
p
  | ほげほげ ふがふが

Rubyの変数を渡す場合は以下の様になります。

SlimでRubyの変数からテキストを挿入
h1 = @event.title

h1
  = @event.title

2パターン挙げましたが、上記は2つとも同じHTMLを出力します。

タグにRubyの変数が出力
<h1>
  イベントタイトル
</h1>

ではパイプを使ってRubyの変数を書く場合はどうなるでしょうか。

SlimでRubyの変数からテキストを挿入
h1
  |
    = @event.title
タグにRubyの変数が出力されない
<h1>
  = @event.title
</h1>

パイプを使うとRubyと認識してくれませんでした。

IDとクラスの指定

#.を使用してIDとクラスを指定します。

SlimでID
#pam
ID付きタグの出力
<div id="pam">
</div>

上記の場合HTMLエレメントを指定しないので自動でdivタグになります。

クラスを複数付ける書き方

クラスを複数付ける場合は、.classをつなげて書きます。

Slimで複数クラス
.piyo.hoge
クラスを複数付けた出力
<div class="piyo hoge">
</div>

複数のクラスを付けることができました。

ネスト

インデントをするとネストされて表示されます。

Slimでネスト
#pam
  .hoge
    p.huga.piyo
      |
        わーいわーい
出力されたネスト
<div id="pam">
  <div class="hoge">
    <p class="huga piyo">
      わーいわーい
    </p>
  </div>
</div>

divタグがネストされて表示されています。

インラインHTMLの書き方

Slim内にHTMLを書きたい場合は、そのままHTMLを書くと動作します。
<がHTMLタグと認識されるようです。

 @quizという2つ値が入った変数をループさせて、idにindexをフル例です。

SlimでインラインHTMLタグ
.ui.grid
  - @quiz.each do |q|
    <div id="quiz_#{q.id}">クイズ#{q.id}</div>
インラインHTMLタグの出力
<div class="ui grid">
  <div id="quiz_1">クイズ1</div>
  <div id="quiz_2">クイズ2</div>
</div>

インラインHTML内の場合は、Rubyのコード出力が#{}になるのがポイントでしょうか。

参考

その他Slimの書き方は @yterajima さんの以下の記事が参考になります。

pugiemonn
GoogleTagManagerを利用してGAを操るようなマーケターとしてお仕事しています(☝ ՞ਊ ՞)
pugiemonn_com
pugiemonn.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした