slim完全攻略

slimについてまとめてみる

プロジェクトでerbを全てslimにする作業を通して、「slim最高！」と思った一方でslimについては体系的にまとめられていなかったため、今後挑戦する人のために書いておく。
ちなみに、公式ドキュメントはこちら

1. slimの特徴

slimはhtmlの煩わしい部分を全部省略して文字通りコードを"slim"にすることを可能にしてくれる・特徴は以下の通り

1. <>タグは省略
2. 閉じタグは省略
3. 入れ子構造はインデントで表現
   htmlの表現に慣れている人から見ると何が何だか分からないが、逆にslimになれると正規のhtml表現がとても読みにくくなる。タグが邪魔w

2. slim変換の例

hoge.html.erb

 <% hoge %>                    #1
 <%= hoge %>                   #2
 <h1> hoge </h1>               #3
 <h1 class="hoge"> fuga </h1>  #4
 <div id="hoge"></div>         #5
 <div class="hoge"></div>      #6
 <%= render 'hoge' %>          #7
 <%= yield %>                  #8

これをslimに変換すると

hoge.html.slim

 - hoge                 #1
 = hoge                 #2
 h1 hoge                #3
 h1.hoge fuga           #4
 div#hoge               #5
 #hoge                  #5
 div.hoge               #6
 .hoge                  #6
 == render 'hoge'       #7
 == yield               #8

3. 実例を交えて解説する

hoge.html.erb

 <div class="container">
   <div class="header-left">
     <img class="logo" src="example.png">
   </div>
   <div class="header-right">
     <a href="#" class="login">ログイン</a>
   </div>
 </div>
 <div class="top-wrapper">
   <div class="container">
     <h1 class="<%= 'feature' if user.silm.present? %>">Slim完全攻略</h1>
     <p>slimはとても簡単<br>ぜひ挑戦してみましょう！</p>
     <% unless user_signed_in? %>
       <%= link_to "新規登録", "http://hoge.com", class: "btn signup" %>
       <p>ログイン</p>
       <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebook</a>
     <% else %>
       <%= link_to user_path do %>
         <%= current_user.name %>さんのマイページ 
       <% end %>
     <% end %>
   </div>
 </div>
 <div class="main-content">
   <%= render "main_content" %>
 </div>

これをslimに変換すると

hoge.html.slim

 div.container
   div.header-left
     img.logo src="example.png"
   div.header-right
     a href="#" class="login"
       |
         ログイン
 div.top-wrapper
   div.container
     h1 class="#{'feature' if usr.slim.present?}" Slim完全攻略
     p 
       'slimはとても簡単
       br
       'ぜひ挑戦してみましょう！
     - unless user_signed_in?
       = link_to "新規登録", "http://hoge.com", class: "btn signup"
       p ログイン
       a href="#" class="btn facebook"
         span.fa.fa-facebook
           'Facebook
     - else
       = link_to user_path do
         = current_user.name
         'さんのマイページ 
 div.main-content
   == render "main_content"

注意するべき点としては、

1. div.containerとしても.containerとしてもどちらもブロック要素を作るから変わりはない。しかし、それを明確に示すためにもdivはつけておいたほうがわかりやすいと思う。
2. インライン要素は、'か|+インデントで表現する
3. 閉じタグは当然だが、<% end %>も省略する
4. ""内で<% %>を使いたい時は#{}を用いる

4. 最後に

slimにしてからコードを書く時間がとてもはやくなりました。さらに良かったのは、インデントにものすごい意識するようになったこと。メリットだらけです、是非使ってみては！