読者です 読者をやめる 読者になる 読者になる

手取り足取りプログラミング

cloud9、railsについて自分がつまずいた所を詳しく説明します。なぜなら一番読み返すのは自分だから。

【Rails】Slimの使い方

Rails

slimの使い方まとめておきます。
と言っても使い始めたばかりなので後々追記していきます。
自分用メモレベルですので、他の人の記事見たほうが良い。

そもそもSlimって何?

一言で言うと便利なテンプレートエンジンのこと。
railsのデフォルトはerb形式で、viewフォルダ内のファイルは ファイル名.html.erb となっている。
Slimを使うと ファイル名.html.slim になる。
どちらもhtmlにプログラムを埋め込めるものだが、erbに比べて記述がとても楽。

どれくらい楽になるの?

どれくらい差があるのか下記のコマンドerb、slimeそれぞれで実行して自動生成される index.html.erb(slim)の差を比べてみます。
Slimをインストールしてコマンドを入力すると自動生成されるHTMLファイルもSlim形式になるよ。便利だね。

rails g scaffold user name email

下記のような登録したデータ一覧が表示されるファイルが自動生成されました。これで記述量を比較します。
f:id:yonayonaru:20161003075527p:plain

user.html.erb(空行は削除した)24行 477字

<p id="notice"><%= notice %></p>
<h1>Listing Users</h1>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.email %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>
<br>
<%= link_to 'New User', new_user_path %>


index.html.slim(空行は削除した)19行 293文字

h1 Listing users
table
  thead
    tr
      th Name
      th Email
      th
      th
      th
  tbody
    - @users.each do |user|
      tr
        td = user.name
        td = user.email
        td = link_to 'Show', user
        td = link_to 'Edit', edit_user_path(user)
        td = link_to 'Destroy', user, data: { confirm: 'Are you sure?' }, method: :delete
br
= link_to 'New User', new_user_path

Slimが圧倒的に書く量が少ない。

テンプレート 文字数
erb 24 477
slim 19 293

Slimの使い方

変換ツール

変換ツールがあるので困ったらこれで
html2slim.herokuapp.com

タグの書き方

HTMLのタグは<>でくくるけどいらない。閉じタグもなし。

<title>タイトル</title>

って書きたいときは

title タイトル

だけ。楽だね。

埋め込みプログラムの書き方

erbで

<% @users.each do |user| %>

となっているところは

- @users.each do |user|

となる<% が - になって閉じタグなし

erbで

<%= link_to 'New User', new_user_path %>

となっているところ(表示するもの)は

= link_to 'New User', new_user_path

となる。<%= が = になって閉じタグなし

yieldとrenderのときは == とする。
(これでしばらく詰まってた)

閉じタグはどこにいったの?

Slimはインデントで判断します。

body
  p テスト文章

上記のように書くと下記のようになります。

<body>
  <p>テスト文章</p>
</body>


インデントを同じにすると

body
p テスト文章
<body></body>
<p>テスト文章</p>

となり、pがbodyの中に含まれなくなります。


とりあえず以上。後々更新する。多分