Railsで共通パーツの一部をページごとに変更する方法

はじめに

アプリ制作の過程で、ヘッダーの一部を特定のページで戻るボタンに変更するという実装を行いました。
ここではその実装過程で得られた気づきをまとめます。

本記事の内容

Railsで共通パーツとして使っているものの一部分を特定のページで変更する方法。

ヘッダーのView

_header.html.erb

<div id="header" class="sticky-top">
  <nav class="navbar navbar-dark bg-dark py-3">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">
          <span class="navbar-toggler-icon"></span>
        </button>
    </div>
  </nav>
</div>

上記は修正を加える前のトグルボタンを持った一般的なヘッダーです。
パーシャル化してありapplication.html.erbで読み込まれているため全ページで共通の表示がされます。
例えばトグルボタンの表示を一部のページでは戻るボタンに変更したいという場合があったとします。

単一のページの場合

1. コントローラーでヘルパーメソッドを定義して、現在のページが戻るボタンを表示すべきかどうかを判断します
2. ビューテンプレートを条件分岐で更新し、適切な場合に戻るボタンを表示します

まず、ApplicationControllerに以下のようなヘルパーメソッドを追加します

application_controller.rb

class ApplicationController < ActionController::Base
  helper_method :show_back_button?

  private

  def show_back_button?
    # ここに戻るボタンを表示すべきページの条件を記述
    # 例: %w[show edit].include?(action_name) || controller_name == 'some_specific_controller'
    false
  end
end

次に、先ほどのヘッダーを以下のように更新します

_header.html.erb

<div id="header" class="sticky-top">
  <nav class="navbar navbar-dark bg-dark py-3">
    <div class="container-fluid">
      <% if show_back_button? %>
        <%= link_to :back, class: 'navbar-toggler', aria: { label: '戻る' } do %>
          <i class="bi bi-arrow-left"></i>
        <% end %>
      <% else %>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">
          <span class="navbar-toggler-icon"></span>
        </button>
      <% end %>
    </div>
  </nav>
</div>

上記の実装では、show_back_button?メソッドがtrueを返す場合に戻るボタンが表示され、それ以外の場合は元のトグルボタンが表示されます。
特定のコントローラーやアクションでのみ戻るボタンを表示したい場合は、その条件をメソッド内に記述することにより、柔軟にヘッダーの内容を切り替えることができます。

複数のページの場合

複数のページの場合も基本的には単一のページの場合と考え方は変わりません。
ヘルパーメソッドに以下のような記述をします。

application_helper.rb

module ApplicationHelper
  def show_back_button?(controller_name, action_name)
    (controller_name == 'posts' && action_name == 'show') ||
    (controller_name == 'users' && action_name == 'edit') ||
    (controller_name == 'products' && action_name == 'index')
  end
end

これを汎用化させるために以下のような記述をすることもできます。

application_helper.rb

# app/helpers/application_helper.rb
module ApplicationHelper
  BACK_BUTTON_PAGES = [
    { controller: 'posts', action: 'show' },
    { controller: 'users', action: 'edit' },
    { controller: 'products', action: 'index' }
  ]

  def show_back_button?(controller_name, action_name)
    BACK_BUTTON_PAGES.any? { |page| page[:controller] == controller_name && page[:action] == action_name }
  end
end

まとめ

本記事では、Railsアプリケーションでヘッダーの一部を特定のページで戻るボタンに変更する方法を紹介しました。単一のページや複数のページでの条件分岐の方法を理解することで、柔軟にヘッダーの表示を変更できるようになります。