Rails Slimの癖が強いので、これだけは覚えておく

Posted at 2025-10-13

RailsでERBに慣れ親しんでいるエンジニアがSlimを使い始めると、「なんじゃこの書き方は！」となることがよくあります。Slimは確かに簡潔で美しいテンプレートエンジンですが、独特の記法に慣れるまでは戸惑うもの。

この記事では、**これだけは絶対覚えておけ！**というSlimの重要ポイントを、ERBとの比較で分かりやすく解説します。

1. インデントが全て！タブ vs スペース問題

<div class="container">
  <h1>タイトル</h1>
  <p>内容</p>
</div>

.container
  h1 タイトル
  p 内容

⚠️ 超重要ポイント

// ❌ ダメな例（インデントがバラバラ）
.container
 h1 タイトル
   p 内容

// ✅ 正しい例
.container
  h1 タイトル
  p 内容

<!-- ERB -->
<div class="card shadow-lg">

// Slim - 複数の書き方がある
.card.shadow-lg
// または
div class="card shadow-lg"
// または
div class=["card", "shadow-lg"]

<!-- ERB -->
<input type="text" name="email" value="<%= @user.email %>" required>

// Slim
input type="text" name="email" value=@user.email required=true
// または括弧を使って
input(type="text" name="email" value=@user.email required)

🔥 ハマりがちポイント

// ❌ これは動かない
input type="text" value="<%= @user.email %>"

// ✅ 正しい書き方
input type="text" value=@user.email

<!-- ERB -->
<% if user_signed_in? %>
  <p>ログイン済み</p>
<% else %>
  <p>未ログイン</p>
<% end %>

// Slim
- if user_signed_in?
  p ログイン済み
- else
  p 未ログイン

<!-- ERB -->
<% @posts.each do |post| %>
  <div class="post">
    <h2><%= post.title %></h2>
  </div>
<% end %>

// Slim
- @posts.each do |post|
  .post
    h2 = post.title

重要な記号の使い分け

<!-- ERB -->
<h1><%= @post.title %></h1>
<p><%= @post.content %></p>

// Slim
h1 = @post.title
p = @post.content

<!-- ERB -->
<div><%= raw @post.html_content %></div>

// Slim
div == @post.html_content

// 複数行のプレーンテキスト
p
  | これは長いテキストです。
    複数行にわたって書くことができます。
    パイプ記号を使います。

// または
p
  ' これは長いテキストです。
    シングルクォートを使う方法もあります。

// HTMLに出力されるコメント
<!-- このコメントはHTMLに表示される -->

/ HTMLに出力されないコメント（開発者用）

/! 条件付きコメント（IE対応など）

<!-- ERB -->
<%= link_to "編集", edit_post_path(@post), class: "btn btn-primary" %>

// Slim
= link_to "編集", edit_post_path(@post), class: "btn btn-primary"
// またはブロック形式
= link_to edit_post_path(@post), class: "btn btn-primary"
  | 編集

<!-- ERB -->
<%= form_with model: @post do |f| %>
  <%= f.text_field :title %>
  <%= f.submit %>
<% end %>

// Slim
= form_with model: @post do |f|
  = f.text_field :title
  = f.submit

// 開発中にデバッグ
- puts @user.inspect  // ログに出力
= debug @user         // 画面に表示（開発環境のみ）

.card class=(@post.published? ? "published" : "draft")
// または
.card class=["card", (@post.featured? ? "featured" : nil)]

// settings.json
{
  "files.associations": {
    "*.slim": "slim"
  },
  "[slim]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}

拡張機能「Slim Language Support」も必須です！

Slimは慣れると本当に書きやすくて、ERBには戻れなくなります。最初は癖が強く感じるかもしれませんが、この記事のポイントを押さえれば大丈夫！ぜひ挑戦してみてください 🚀