Rails
erb
slim

ERBとSlimの比較

個人的に作ってるサービスの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
`