slimの書き方を学びました~slim入門~

はじめに

今は、Ruby on Railsの国際化を学んでいるのですが、テンプレートエンジンは、デフォルトで生成されるerbを使っていました。

しかし、現場ではslimを使うことが多いということを聞き、なんとなく避けていたslimの書き方を学ぶ必要があると思い、今回、slimの書き方を勉強しました。

基本的な書き方は、参考にさせていただいたドキュメントに記載されているので、主に学んだ感想に書いていきたいと思います。

slimとは

slimとは、viewファイルに使われるテンプレートエンジンです。htmlから、構文としての分かりやすさを損ねない範囲で、記述を削ぎ落としていったシンプルな言語です。

特徴として、閉じタグの代わりにインデントを用いるなどが挙げられます。

基本的な記法

見出しタグ

html

<h1>頭が悪くても</h1>

slim

h1 頭が悪くても

クラス

html

<div class= container>
</div>

slim

.container

id

html

<div id= id>

slim

#id

<%= %>

html

<%= array.each do |a| %>
<%= puts a %>
<% end %>

slim

= array.each do |a|
  = puts a

実際にerbファイルをslimで書き換えてみました

以下は、rails scaffoldで作成したビューファイルになります。

<h1>Books</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Memo</th>
      <th>Author</th>
      <th>Picture</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @books.each do |book| %>
      <tr>
        <td><%= book.title %></td>
        <td><%= book.memo %></td>
        <td><%= book.author %></td>
        <td><%= book.picture %></td>
        <td><%= link_to 'Show', book %></td>
        <td><%= link_to 'Edit', edit_book_path(book) %></td>
        <td><%= link_to 'Destroy', book, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

slimで書くと以下のようになりました‼️

h1 = Books

table
  thead
    tr
      th = Title
      th = Memo
      th = Author
      th = Picture
      th colspan='3'

  tbody
    - @books.each do |book|
      tr
        td = book.title
        td = book.memo
        td = book.author
        td = book.picture
        td = link_to 'Show', book
        td = link_to 'Edit', edit_book_path(book)
        td = link_to 'Destroy', book, method: :delete, data: { confirm: 'Are You Sure?' }

slimを勉強した感想

slimは、なんとなく難しそうだなー😅、と勝手に思っていましたが、実はそんなことはなく、むしろ少し勉強すればとても便利なものだと感じました。

テキストエディタによってはemmetにより、タグを補完してくれますが、それがあっても、記述量が減るslimの方が直感的に書きやすい感じがします。

simple is the best　とはこのこと‼️

slimの素晴らしさに感動した一日でした。

参考にさせていただいたサイト

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

RailsのHTMLテンプレートエンジン、Slimの基本的な記法 - Qiita

slim/README.jp.md at master · slim-template/slim