Slim記法カンペシート - ちんあなごのプログラミング学習帳

Slimから逃げるな

~~小学生の頃からHTMLによるタグうちに触れていたインターネッツ老人会出身の~~あなごにとっては、Slimで書かれたViewページを見るのはとても苦痛であった。

しかし、現場ではViewファイルはSlimで書かれていることの方が多いという。

実際erbファイルよりも読みやすいしファイル名等が頭に入ってきやすいのはわかる。

わかるのだ。

Slimの書き方のルールが頭に入ってこないだけで。

~~まずい、このままではタグ打ち全盛期の話ばかりする老害になりはててしまう。~~

という訳で、Slimの書き方や変換の仕方を学ぶことにした。

ルール

ルール	HTML	Slim
タグ	<>	不要
ID	id="content"	#content
クラス	class="content"	.content
Rubyの式	<%= hoge %> <% if %>	= hoge - if
コメントアウト	<!-- コメント-->	/ コメント
テキスト	テキスト	p \| テキスト

まあ、ルールはね、言いたいことはわかるんですよ. IDが#でクラスが.なのはcssと同じなんで。

でもね、目が慣れないんですよ。
こちとら小学生の頃からタグ触ってたガチガチのインターネッツ老人会出身なんで。

なので、テンプレートによく出てきそうなViewファイルの定型文を、Slimに変換していきましょう。

Viewファイルにありがちな定型分

テキストボックス

HTML

<input class="form-control" 
type="text" name="article[title]"
 id="article_title">

Slim

= f.text_field :title, class: 'form-control'

実際例

セレクトボックス

HTML

<select class="form-control" name="article[category]" id="article_category">
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option></pre>
</select>

Slim

 = f.select :category, [['a', 1], ['b', 2], ['c', 3]], {}, 
  class: 'form-control'

実際例

入力フォーム(※Rails)

HTML

<%= form_with model: @task do |f| %>
 <%= f.label :name %>
 <%= f.text_field :name, class: 'form-control' %>
 <%= f.label :description %>
 <%= f.text_area :description, class: 'form-control' %>
 <%= f.submit "提出する", class: 'btn btn-info' %>
<% end %>

Slim

= form_with model: task do |f|
    = f.label :name
    = f.text_field :name, class: 'form-control', id: 'task_name'
    = f.label :description
    = f.text_area :description, class: 'form-control', 
      id: 'task_description'
  = f.submit "提出する", class: 'btn btn-info'

CLUDメニュー(※Rails)

HTML

<ul class='crud-menu-btn list-inline float-right'>
　　<li class="list-inline">
　　　　<%= link_to edit_board_path(board), id: 'button-edit-#{board.id}' do %>
　　　　　<%= icon 'fa', 'pen' %>
　　　　<% end %>
　　　　<%= link_to board_path(board), id: 'button-delete-#{board.id}', method: :delete, data: {confirm: t('defaults.message.delete_confirm')} do %>
　　　　　<%= icon 'fas', 'trash' %>
　　　　<% end %>
　　　</li>
</ul>

Slim

ul.crud-menu-btn.list-inline.float-right
  li.list-inline
    = link_to edit_board_path(board), id: 'button-edit-#{board.id}' do
      = icon 'fa', 'pen'
    = link_to board_path(board), id: 'button-delete-#{board.id}', method: :delete, data: {confirm: t('defaults.message.delete_confirm')} do
      = icon 'fas', 'trash'

検索フォーム(※Rails)

HTML

<%= search_form_for @q, url: url do |f| %>
  <div class="input-group mb-3">
    <%= f.search_field :title_or_body_cont, 
     class: 'form-control', placeholder: '検索ワード' %>
    <div class="input-group-append">
      <%= f.submit '検索', class: 'btn btn-primary' %>
<% end %>

Slim

= search_form_for @q, url: url do |f|
  .input-group.mb-3
    = f.search_field :title_or_body_cont,
     class: 'form-control', placeholder: '検索ワード'
    .input-group-append
      = f.submit '検索', class: 'btn btn-primary'

エラーメッセージ(※Rails)

HTML

<% if object.errors.any? %>
<div id="error_messages", class="alert alert-danger" >
  <ul class="mb-0">
    <% object.errors.full_messages.each do |message| %>
      <li><%= message %></li>
    <% end %>
  </ul>
</div>
<% end %>

Slim

 - if object.errors.any?
  |  

  ul.mb-0
    - object.errors.full_messages.each do |message|
      li
        = message

apprication.rbのよくあるやつ(※Rails)

HTML

<!DOCTYPE html>
<html>
  <head>
  <title><%= content_for?(:title) ? yield(:title) + ' | ANAGO BLOG' : 'ANAGO BLOG' %></title>
    <%= csrf_meta_tags  %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all'%>
    <%= javascript_include_tag 'application' %>
  </head>
  <body>
    <% if logged_in? %>
      <%= render 'shared/header' %>
    <% else %>
      <%= render 'shared/before_login_header' %>
    <% end %>
      <%= render 'shared/flash_message' %>
      <%= yield %>
      <%= render 'shared/footer' %>
  </body>
</html>

Slim

doctype html
html
  head
    title
      = content_for?(:title) ? yield(:title) + ' | ANAGO BLOG' : 'ANAGO BLOG'
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all'
    = javascript_include_tag 'application'
  body
    - if logged_in?
      = render 'shared/header'
    - else
      = render 'shared/before_login_header'
    = render 'shared/flash_message'
    = yield
    = render 'shared/footer'

多少見慣れれば、いつか目が慣れてくるようになるでしょ、多分…。

Railsで仕方なく書かざるを得ない時は、Rails上でerbファイルをSlimに変換してます。

bundle exec erb2slim [ファイルの相対パス]

魔法のコードだけ覚えて帰ってください。

ではでは。