Railsでslimを使ってみた

Slimとは？

Slimは、HTMLを簡潔に記述できるテンプレートエンジンです。RubyのRailsアプリケーションでよく使用され、ERBやHamlの代替として人気があります。Slimの最大の特徴は、最小限の構文でHTMLを記述できることです。

Slimの特徴

• 簡潔な構文: HTMLタグの閉じタグが不要
• インデントベース: インデントでネストを表現
• 高速: ERBやHamlよりも高速に動作
• 読みやすい: 余計な記号が少なく、コードが見やすい

基本的な書き方

HTMLタグの記述

# 基本的なタグ
h1 タイトルです
p これは段落です
div コンテンツ

上記は以下のHTMLに変換されます：

<h1>タイトルです</h1>
<p>これは段落です</p>
<div>コンテンツ</div>

ネストした要素

div
  h2 見出し
  p 段落テキスト
  ul
    li 項目1
    li 項目2
    li 項目3

属性の指定

# クラスとID
div.container#main
h1.title.large タイトル
p.text データ

# 属性を明示的に指定
a href="/about" target="_blank" リンク
img src="image.jpg" alt="画像"

# 複数行での属性指定
input type="text" 
      name="username" 
      placeholder="ユーザー名を入力"

実践的な例

完全なHTMLページの例

doctype html
html lang="ja"
  head
    meta charset="UTF-8"
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    title ページタイトル
    link rel="stylesheet" href="style.css"
  
  body
    header.header
      nav.navigation
        ul.nav-list
          li.nav-item
            a.nav-link href="/" ホーム
          li.nav-item
            a.nav-link href="/about" について
          li.nav-item
            a.nav-link href="/contact" お問い合わせ
    
    main.main-content
      section.hero
        h1.hero-title ようこそ
        p.hero-description このサイトへようこそ！
        
      section.content
        article.post
          h2.post-title 記事タイトル
          p.post-meta 投稿日: 2024年1月1日
          .post-content
            p 記事の内容がここに入ります。
            p 複数の段落を含むことができます。
    
    footer.footer
      p.copyright © 2024 サイト名

Rails での使用例

# app/views/users/index.html.slim
.users-index
  h1 ユーザー一覧
  
  .search-form
    = form_with url: users_path, method: :get, local: true do |f|
      = f.text_field :search, placeholder: "ユーザー名で検索", value: params[:search]
      = f.submit "検索", class: "btn btn-primary"
  
  .users-list
    - @users.each do |user|
      .user-card
        .user-avatar
          = image_tag user.avatar.presence || "default-avatar.png"
        .user-info
          h3.user-name = link_to user.name, user_path(user)
          p.user-email = user.email
          p.user-created = "登録日: #{user.created_at.strftime('%Y年%m月%d日')}"
        .user-actions
          = link_to "詳細", user_path(user), class: "btn btn-outline"
          = link_to "編集", edit_user_path(user), class: "btn btn-secondary"
          = link_to "削除", user_path(user), method: :delete, 
                    confirm: "本当に削除しますか？", class: "btn btn-danger"

Slimの便利な機能

Ruby コードの埋め込み

# 変数の出力
p = @user.name

# 条件分岐
- if user_signed_in?
  p ログイン中: #{current_user.name}
- else
  p ゲストユーザー

# ループ処理
ul
  - @posts.each do |post|
    li = post.title

パーシャルの使用

# メインテンプレート
.page
  = render 'shared/header'
  .content
    h1 ページタイトル
    = render 'posts/list', posts: @posts
  = render 'shared/footer'

コメント

/ HTMLコメント（出力される）
/! HTML条件付きコメント
/- Slimコメント（出力されない）

/- これは開発者向けのメモです
div.container
  / ここはユーザーに見えるコメント
  p コンテンツ

ERBとの比較

ERBで書いた場合

<div class="user-profile">
  <% if @user.present? %>
    <h1><%= @user.name %></h1>
    <div class="user-details">
      <p><strong>Email:</strong> <%= @user.email %></p>
      <p><strong>登録日:</strong> <%= @user.created_at.strftime('%Y年%m月%d日') %></p>
    </div>
    <div class="user-posts">
      <h2>投稿一覧</h2>
      <% if @user.posts.any? %>
        <ul class="posts-list">
          <% @user.posts.each do |post| %>
            <li class="post-item">
              <%= link_to post.title, post_path(post) %>
              <span class="post-date">(<%= post.created_at.strftime('%m/%d') %>)</span>
            </li>
          <% end %>
        </ul>
      <% else %>
        <p>投稿がありません。</p>
      <% end %>
    </div>
  <% else %>
    <p>ユーザーが見つかりません。</p>
  <% end %>
</div>

Slimで書いた場合

.user-profile
  - if @user.present?
    h1 = @user.name
    .user-details
      p
        strong Email: 
        = @user.email
      p
        strong 登録日: 
        = @user.created_at.strftime('%Y年%m月%d日')
    .user-posts
      h2 投稿一覧
      - if @user.posts.any?
        ul.posts-list
          - @user.posts.each do |post|
            li.post-item
              = link_to post.title, post_path(post)
              span.post-date = "(#{post.created_at.strftime('%m/%d')})"
      - else
        p 投稿がありません。
  - else
    p ユーザーが見つかりません。

導入方法

Railsプロジェクトでの設定

1. Gemfileに追加

gem 'slim-rails'

1. bundleインストール

bundle install

1. 既存のERBファイルをSlimに変換（オプション）

# erb2slim gemを使用
gem install erb2slim
erb2slim app/views/ --delete

よく使うTips

CSSクラスとIDの省略記法

# div.class-name#id-name と書く代わりに
.container#main-content
  .row
    .col-md-6
      .card.shadow
        .card-body
          h5.card-title タイトル

属性のマージ

# クラスは自動的にマージされる
.btn class="primary large" ボタン
# 結果: <button class="btn primary large">ボタン</button>

動的属性

# 条件付きクラス
.card class=("active" if @post.published?)
div class=["post", ("featured" if @post.featured?)]

# データ属性
.widget data-id=@widget.id data-type=@widget.type

まとめ

Slimは以下のような場面で特に威力を発揮します：

• 大量のHTMLを書く必要があるプロジェクト
• コードの可読性を重視する開発
• チーム開発でのテンプレート統一
• 保守性の高いビューファイルを作りたい場合

ERBに比べて学習コストは少しありますが、慣れると非常に効率的にビューファイルを作成できるようになります。特にRailsプロジェクトでは、Slimの簡潔さがコードベースの保守性向上に大きく貢献します。