🦓
[Rails] gemなしでパンくずリストを実装する
はじめに
Railsアプリにパンくずリストを追加していきます。
環境
Rails 7.0.7
ruby 3.2.1
流れ
- パンくずリスト用メソッドを作成する
- パンくずリストメソッドにパラメーターを渡す
- パンくずリスト用パーシャルを作成する
- パーシャルを読み込む
パンくずリスト用メソッドを作成する
パンくずリストにリンクの名前とURLを渡すメソッドを作成します。
ヘルパメソッドでも良いです。
app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
...
before_action :set_breadcrumbs
private
def add_breadcrumb(label, path = nil)
@breadcrumbs << {
label: label,
path: path
}
end
def set_breadcrumbs
@breadcrumbs = []
end
end
labelパラメータは、パンくず項目の表示テキスト（ラベル）を指定します。
pathパラメータは、パンくず項目がクリックされた場合に遷移させるURLまたはパスを指定します。指定しない場合はcurrentページになります。
set_breadcrumbsメソッドは、パンくずリストを初期化するために使用されます。新しいページにアクセスすると、以前のパンくずリストがクリアされ、新しいページのためのパンくずリストが作成されます。
パンくずリストメソッドにパラメーターを渡す
app/controllers/todos_controller.rb
class TodosController < ApplicationController
before_action :add_index_breadcrumb, only: %i[show new edit]
def index
add_breadcrumb('Todos一覧')
end
def show
add_breadcrumb(@todo.title)
end
def new
add_breadcrumb('新規作成')
end
def edit
add_breadcrumb(@todo.title, @todo)
add_breadcrumb('編集')
end
private
def add_index_breadcrumb
add_breadcrumb('Todos一覧', todos_url)
end
end
before_action フィルター:show、new、edit アクションが実行される前にadd_index_breadcrumb メソッドを呼び出すことを指定しています。
これらのアクションで共通のパンくずリストラベル（Todo一覧）が追加されます。
パンくずリスト用パーシャルを作成する
app/views/shared/_breadcrumbs.html.erb
<nav>
<ol>
<li>
<div>
<a href="/">
<span class="sr-only">ホーム</span>
</a>
</div>
</li>
<% @breadcrumbs.each do |breadcrumb| %>
<% if breadcrumb[:path].blank? %>
<li>
<a href="#"><%= breadcrumb[:label] %></a>
</li>
<% else %>
<li>
<%= link_to breadcrumb[:label], breadcrumb[:path] %>
</li>
<% end %>
<% end %>
</ol>
</nav>
TailwindCSSのテンプレートを使いました。
パーシャルを読み込む
ヘッダーとコンテンツの間に追加します。
app/views/shared/breadcrumbs.html.erb
<%= render 'shared/header' %>
<%= render 'shared/flash_messages' %>
# 追加する
<%= render 'shared/breadcrumbs' %>
<%= yield %>
詳細：
編集：
新規作成：
終わりに
パンくずリストがあると今自分がサイトのどのページにいるかをわかりやすいですね。
参考した記事：
Discussion