[Rails]テンプレートエンジン(haml.slim)の導入方法と書き方

10138 ワード
slim Rails erb Ruby haml Ruby テキストリンク

パフォーマンス比較グラフ

erb(比較用)

~.html.erb
<h1>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 %>

haml

1.導入方法

Gemfile
gem 'haml-rails' #hamlファイルを使えるようにする
ターミナル
$ bundle
ターミナル
$ rails haml:erb2haml
ターミナル
<!-- 下記の様に問われるので、既存のerbファイルを削除してもいいなら「y + Enter」、駄目なら 「n + Enter」 -->
Would you like to delete the original .erb files? (This is not recommended unless you are under version control.) (y/n)

既存のerbファイルをhamlファイルに変換

2.書き方

~.html.haml
%h1 Users

%table
  %thead
    %tr
      %th Name
      %th Email
      %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, method: :delete, data: { confirm: 'Are you sure?' }

%br

= link_to 'New User', new_user_path

slim

1.導入方法

Gemfile
gem 'slim-rails' #slimファイルを使えるようにする
gem 'html2slim' #既存のerbファイルをslimファイルに変換出来る様にする
ターミナル
$ bundle

既存のerbファイルをslimファイルに変換し、erbファイルを全削除する。

ターミナル
$ bundle exec erb2slim app/views app/views -d

ビューを作成時、自動的にslimに変換する。

application.rb
module Devise
  class Application < Rails::Application
    config.load_defaults 5.2
    config.generators.template_engine = :slim #追記
  end
end

2.書き方

~.html.slim
h1 Users

table
  thead
    tr
      th Name
      th Email
      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, method: :delete, data: { confirm: 'Are you sure?' }

br

= link_to 'New User', new_user_path