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

  • 107
    いいね
  • 0
    コメント

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 さんの以下の記事が参考になります。