Edited at

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

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