テンプレートエンジン
                 slimの紹介
                  @patorash
                 2013/01/26
13年1月26日土曜日                   1
自己紹介
  • 名前:       尾古 豊明(おこ とよあき)

  • twitter:   @patorash(パトラッシュ)

  • 所属:       株式会社 リゾーム(#R社)

  • 守備範囲:       Ruby, Rails, RSpec, PHP, jQuery, Android

  • 第6回メタプログラミングRuby読書会を2/9(土)にや
     るのでご参加お待ちしております。

13年1月26日土曜日                                                2
採用情報
  • リゾームでは優秀なエンジニアを募集しています。


  • githubでソース管理しながらRailsでグループウェアを
     作ってテストを書く、やりがいのあるお仕事です。

  • Ruby好きな人。Rails好きな人。テスト好きな人。
     AWS好きな人。自動化好きな人。好奇心の強い人。

  • これらのどれかにあてはまって、
     「あ∼、転職したいな∼」
     と思い悩んでいる人は@patorashまで。

13年1月26日土曜日                          3
ところで
              テンプレートエンジン
               何を使ってますか?


13年1月26日土曜日                4
多分、erbですよね?




13年1月26日土曜日                 5
erbのここが嫌い…

  • htmlの記述量が多い


  • <%=       @title %> という書き方がPHPみたい

  • <%        ... %>と打つのが面倒くさい

  • 行数とタグが増えると可読性が悪い




13年1月26日土曜日                             6
それを解決してくれるのが
           slimです。
13年1月26日土曜日           7
どこがいいの?slim

  • 記述量が劇的に改善


  • 閉じ括弧をかかなくてもよい


  • id,   classをCSSのセレクタみたいに書ける

  • なにより<%=    ... %>地獄にならない




13年1月26日土曜日                       8
簡単な例を…
 <div class=”header”>
   <img id=”logo” src=”/images/test.png” />
   <h1 id=”title”>
     <%= @title %>
   </h1>
   <ul class=”nav”>
     <li><a href=”#”>メニュー1</a></li>
          <li><a href=”#”>メニュー2</a></li>
          <li><a href=”#”>メニュー3</a></li>
   </ul>
   <% if login? %>
     <p><%= @current_user.name %></p>
   <% end %>
 </div>
13年1月26日土曜日                                   9
slimだとこうなる
 div.header
   img#logo src=”/images/test.png”
   h1#title = @title
   ul.nav
     li
        a href=”#” メニュー1
          li
               a href=”#” メニュー2
          li
               a href=”#” メニュー3
      - if login?
        p = @current_user.name

13年1月26日土曜日                          10
Railsでslimを使うには?
  • Gemfileに
      gem slim-rails
     を記述する。gem slim は必要ありません。

  • bundle    install する。



                これだけです!

13年1月26日土曜日                     11
とはいっても、
              既存のerbファイルが…



13年1月26日土曜日                  12
ご安心ください!




          html2slimがあります。erbからの変換も可能。
              http://html2slim.herokuapp.com/
13年1月26日土曜日                                     13
デモします。




13年1月26日土曜日            14
使ってみた感想
  ★メリット

     ✴圧倒的な記述量の少なさに惚れる

     ✴id,class指定をjqueryのセレクタ風に書けるのが素
        敵すぎる。
  ★デメリット

     ✴時々わからんようになってつまづく…
        (唯一ここが、erbと比べての難点)
     ✴hoge.js.slimを書くのはerbよりもイラッとする。
        ¦ の後にJavaScriptを記述する必要アリ。
13年1月26日土曜日                            15
slimのよさ、
       わかってもらえましたか?



13年1月26日土曜日           16
ご清聴、まことに
       ありがとうございました。



13年1月26日土曜日           17

Slimの紹介

  • 1.
    テンプレートエンジン slimの紹介 @patorash 2013/01/26 13年1月26日土曜日 1
  • 2.
    自己紹介 •名前: 尾古 豊明(おこ とよあき) • twitter: @patorash(パトラッシュ) • 所属: 株式会社 リゾーム(#R社) • 守備範囲: Ruby, Rails, RSpec, PHP, jQuery, Android • 第6回メタプログラミングRuby読書会を2/9(土)にや るのでご参加お待ちしております。 13年1月26日土曜日 2
  • 3.
    採用情報 •リゾームでは優秀なエンジニアを募集しています。 • githubでソース管理しながらRailsでグループウェアを 作ってテストを書く、やりがいのあるお仕事です。 • Ruby好きな人。Rails好きな人。テスト好きな人。 AWS好きな人。自動化好きな人。好奇心の強い人。 • これらのどれかにあてはまって、 「あ∼、転職したいな∼」 と思い悩んでいる人は@patorashまで。 13年1月26日土曜日 3
  • 4.
    ところで テンプレートエンジン 何を使ってますか? 13年1月26日土曜日 4
  • 5.
  • 6.
    erbのここが嫌い… •htmlの記述量が多い • <%= @title %> という書き方がPHPみたい • <% ... %>と打つのが面倒くさい • 行数とタグが増えると可読性が悪い 13年1月26日土曜日 6
  • 7.
    それを解決してくれるのが slimです。 13年1月26日土曜日 7
  • 8.
    どこがいいの?slim •記述量が劇的に改善 • 閉じ括弧をかかなくてもよい • id, classをCSSのセレクタみたいに書ける • なにより<%= ... %>地獄にならない 13年1月26日土曜日 8
  • 9.
    簡単な例を… <div class=”header”> <img id=”logo” src=”/images/test.png” /> <h1 id=”title”> <%= @title %> </h1> <ul class=”nav”> <li><a href=”#”>メニュー1</a></li> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー3</a></li> </ul> <% if login? %> <p><%= @current_user.name %></p> <% end %> </div> 13年1月26日土曜日 9
  • 10.
    slimだとこうなる div.header img#logo src=”/images/test.png” h1#title = @title ul.nav li a href=”#” メニュー1 li a href=”#” メニュー2 li a href=”#” メニュー3 - if login? p = @current_user.name 13年1月26日土曜日 10
  • 11.
    Railsでslimを使うには? •Gemfileに gem slim-rails を記述する。gem slim は必要ありません。 • bundle install する。 これだけです! 13年1月26日土曜日 11
  • 12.
    とはいっても、 既存のerbファイルが… 13年1月26日土曜日 12
  • 13.
    ご安心ください! html2slimがあります。erbからの変換も可能。 http://html2slim.herokuapp.com/ 13年1月26日土曜日 13
  • 14.
  • 15.
    使ってみた感想 ★メリット ✴圧倒的な記述量の少なさに惚れる ✴id,class指定をjqueryのセレクタ風に書けるのが素 敵すぎる。 ★デメリット ✴時々わからんようになってつまづく… (唯一ここが、erbと比べての難点) ✴hoge.js.slimを書くのはerbよりもイラッとする。 ¦ の後にJavaScriptを記述する必要アリ。 13年1月26日土曜日 15
  • 16.
    slimのよさ、 わかってもらえましたか? 13年1月26日土曜日 16
  • 17.
    ご清聴、まことに ありがとうございました。 13年1月26日土曜日 17