LoginSignup
104
104

More than 5 years have passed since last update.

ERBとSlimの比較

Last updated at Posted at 2015-03-19

個人的に作ってるサービスのERBをSlimに入れ替えて、大幅にすっきりして感動したので少しだけ

Slimってなんぞ

ERB同様テンプレートエンジンです
他にもHamlというものもあって、HamlとSlimはほとんど同じ書き方ですがほんのちょっとだけSlimの方がシンプルです

Slimの基本構文

コメント

Slimのコメントは/から始まる1行です


/ ここがコメントです

タグ、属性

タグ 属性[ 属性...] コンテンツ

span id="notice" class="anounce" マイクテスト

さらにSlimが賢いのは、#(ID)や.(クラス)といったシンタックスシュガーを使えること
例えば上のものをシンタックスシュガーを使って書き換えると以下のようになります
span#notice.anounce マイクテスト

Rubyコード

また、Rubyコードは以下のようになります

- ~Rubyコード~
= ~出力を伴うRubyコード~

- @books.each do |b|
 p = b.name
 p = b.price

なお、Slimでは終了タグやendを記述する必要はありません。インデントの深さによって勝手に判断されるためです
従ってインデントの深さは正しく記述する必要があります

入れ子構造の表現

また、タグの入れ子構造も次のようにインデントによって判断されます

div#header
 a href="#"
  span こっちはヘッダだよ
div#content
 a href="#"
  span こっちはコンテンツだよ

このように、記述を最低限にすることができるのでERBよりもすっきりとビューを書くことができます
最初は面食らうと思いますが(私も驚きました)、慣れればビューのコーディング時間を大きく短縮できるとともに可読性を上げられると思うので、ぜひ挑戦してみてください

オマケ:比較サンプルコード

ERB

<%= javascript_include_tag "posters_index" %>
<%= stylesheet_link_tag "posters_index" %>
<input type="hidden" id="server" value="<%= @server %>">

<div class="container">
  <%= paginate @posters %>
  <div id="list">
    <table border="1" class="table-striped">
      <tr>
        <th class="category">区分</th>
        <th class="title">タイトル</th>
        <th class="contributor">投稿者</th>
        <th class="posted">投稿日</th>
        <th class="replies">返信数</th>
      </tr>

      <% @posters.each do |poster| %>
        <tr <%= "class=closed" if poster.closed %>>
          <td class="category"><%= poster.category.label %></td>
          <td class="title"><%= link_to "#{poster.title}", "/posters/#{poster.server.server}/#{poster.id}" %></td>
          <td class="contributor"><%= poster.contributor %></td>
          <td class="posted"><%= poster.posted.to_date.strftime("%Y/%m/%d") %></td>
          <td class="replies"><%= poster.replies.size %></td>
        </tr>
      <% end %>
    </table>
  </div>
</div>

Slim

= javascript_include_tag "posters_index"
= stylesheet_link_tag "posters_index"

/ JSへ選択されているサーバを伝えるための要素
/ Ruby変数をそのまま展開できるようです。素晴らしいですね!
/ input#server type="hidden" value="#{@server}"
input#server type="hidden" value=@server

/ コンテンツ(該当記事一覧)
.container
  = paginate @posters
  #list
    / 数値もクオートで囲まなくて良いそうです
    / table.table-striped border="1"
    table.table-striped border=1
      tr
        th.category 区分
        th.title タイトル
        th.contributor 投稿者
        th.posted 投稿日
        th.replies 返信数

      - @posters.each do |poster|
        / この気持ち悪い記述ももう少しすっきり!
        / tr class="#{'closed' if poster.closed}"
        tr class=('closed' if poster.closed)
          td.category = poster.category.label
          td.title = link_to "#{poster.title}", "/posters/#{poster.server.server}/#{poster.id}"
          td.contributor = poster.contributor
          td.posted = poster.posted.to_date.strftime("%Y/%m/%d")
          td.replies = poster.replies.size    
`
104
104
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
104
104