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

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

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

## Railsへの導入
gemファイルにslimの読み込みを記述します。

```ruby:Gemfileへslim-railsを記述
gem 'slim-rails'
```
あとは`bundle install`でslimがインストールされます。

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

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

* https://html2slim.herokuapp.com/

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

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

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

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

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

```rb: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では`=`で書ことができました。

```rb:Slimでformタグ
= form_for @event, :html => { class: "ui form"} do |f|
  = f.text_field :title, placeholder: "タイトル"
  = f.submit "イベントを作成", class: "btn"
```

```html:出力された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のコメントは`/`を使うとコメントにすることができます

```rb:Slimでコメント
- if logged_in?
 li = link_to 'イベントを作る', new_event_path
 /li = link_to 'ログアウト', logout_path
```
`/`を付けたので、元々2つあった`li`タグのうち、ログアウトの方のタグは表示されなくなりました。

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

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

```bash:Slimでpタグ
p
```

```html:pタグの出力
<p></p>
```
タグを打つだけで`<>`の囲いと綴じタグが不要になります。

## aタグ

```bash:Slimでaタグ
a href="//example.com" hoge
```

```html:aタグの出力
<a href="//example.com">hoge</a>
```

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

```bash:Slimでaタグにtarget属性
a href="//example.com" target="_blank" hoge
```

```html:属性ありのaタグ出力
<a href="//example.com" target="_blank">hoge</a>
```

## imgタグ

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

```html:imgタグの出力
<img alt="ぷぎえもん" src="https://pbs.twimg.com/profile_images/1739640742/20120108024459Comic20120102_001-1_normal.jpg">
```
imgタグの属性をさらに足す場合は、後ろに属性を足せばいいことがわかりやすいです。

# HTMLタグへテキストを加える
pタグの後ろへテキストを書きます。

```html+erb:Slimでテキストを挿入
p ほげほげ　ふがふが
```

```html:タグに挿入されたテキスト
<p>
      ほげほげ　ふがふが
</p>
```
長いテキストなど、改行してテキストを書くにはパイプを使用します。

```html+erb:Slimで改行テキストを挿入
p
  |
    ほげほげ　ふがふが
    ほげほげ　ふがふが
```

```html:タグに改行されたテキスト
<p>
      ほげほげ　ふがふが
      ほげほげ　ふがふが
</p>
```
また、パイプを使用する場合はパイプの後ろに書いてもOKです。

```html+erb:Slimで改行テキストを挿入
p
  | ほげほげ　ふがふが
```


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

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

h1
  = @event.title
```
２パターン挙げましたが、上記は２つとも同じHTMLを出力します。

```html:タグにRubyの変数が出力
<h1>
  イベントタイトル
</h1>
```
ではパイプを使ってRubyの変数を書く場合はどうなるでしょうか。

```html+erb:SlimでRubyの変数からテキストを挿入
h1
  |
    = @event.title
```


```html:タグにRubyの変数が出力されない
<h1>
  = @event.title
</h1>
```
パイプを使うとRubyと認識してくれませんでした。

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

```html+erb:SlimでID
#pam
```

```html:ID付きタグの出力
<div id="pam">
</div>
```
上記の場合HTMLエレメントを指定しないので自動でdivタグになります。

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

```html+erb:Slimで複数クラス
.piyo.hoge
```

```html:クラスを複数付けた出力
<div class="piyo hoge">
</div>
```
複数のクラスを付けることができました。


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

```html+erb:Slimでネスト
#pam
  .hoge
    p.huga.piyo
      |
        わーいわーい
```


```html:出力されたネスト
<div id="pam">
  <div class="hoge">
    <p class="huga piyo">
      わーいわーい
    </p>
  </div>
</div>
```
divタグがネストされて表示されています。


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

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

```bash:SlimでインラインHTMLタグ
.ui.grid
　　- @quiz.each do |q|
　　　　<div id="quiz_#{q.id}">クイズ#{q.id}</div>
```

```html:インラインHTMLタグの出力
<div class="ui grid">
　　<div id="quiz_1">クイズ1</div>
　　<div id="quiz_2">クイズ2</div>
</div>
```
インラインHTML内の場合は、Rubyのコード出力が`#{}`になるのがポイントでしょうか。

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

* Slimを利用したHTMLの書き方
 * http://qiita.com/yterajima/items/53fd0387279510ff082a

* Github
 * https://github.com/slim-template/slim

* ドキュメント
 * http://www.rubydoc.info/gems/slim/frames

* erbのslim変換
 * http://qiita.com/mocchicc/items/abab4cdfac7b542742a6