【Rails】パンくず設定で引数の理解が深まった話｜一覧ページと編集ページの違い

プログラミング学習をはじめて丸日。

プログラミング学習はよくアウトプットが大事だといわれるため、理解を深めるために今日もブログで学んだことをアウトプットします。

今回は、パンくず機能（Gretel）の「引数あり・なし」の違いでつまずきました。

同じように悩んでいる方の参考になれば幸いです。

パンくず設定とは

パンくず（Breadcrumb）は、「いまアプリのどの位置にいるのか」を示すナビゲーションのことを指します。

例：

トップ > カテゴリ一覧 > カテゴリ名

このように、EC サイトやブログの上部に記載されていることが多いですね。

パンくずの役割

• 現在地がわかる
• 上の階層に戻りやすい
• UI/UX が向上する

管理画面や階層の深いページで特に重宝します。

Rails では「Gretel」という Gem が定番

パンくずを Rails で簡単に実装するために、GretelというGem を使うことが多いです。

Gretel の導入はとてもシンプルで、Gemfile に以下を追記することで利用できます。

# Gemfile
gem "gretel"

# Gemfile
gem "gretel"

bundle install をすればすぐ使えるようになります。

ただ、インストール手順や config の設定方法は、今回の記事の主目的ではないため詳細は割愛します。

この記事では、

• パンくずの “引数” がなぜ必要になるのか
• view 側で渡す意味は何か

にフォーカスして説明していきます。

パンくず設定：カテゴリ管理

管理画面のカテゴリ一覧・編集ページを例にしてパンくずを設定します。

管理画面内のカテゴリ一覧とカテゴリ編集ページのパンくずを設定するとき、config/breadcrumbs.rbに以下のようなコードを書きます。

# カテゴリ一覧
crumb :admin_categories do
  link 'カテゴリ一覧', admin_categories_path
  parent :admin_dashboard
end

# カテゴリ編集
crumb :edit_admin_category do |category|
  link 'カテゴリ編集', edit_admin_category_path(category)
  parent :admin_categories
end

# カテゴリ一覧
crumb :admin_categories do
  link 'カテゴリ一覧', admin_categories_path
  parent :admin_dashboard
end

# カテゴリ編集
crumb :edit_admin_category do |category|
  link 'カテゴリ編集', edit_admin_category_path(category)
  parent :admin_categories
end

上記2つを見比べると、カテゴリ一覧は|category|がなく、カテゴリ編集は書かれていますね。

この理由について詳しく深掘ります。

カテゴリ一覧ページ

まずは管理画面内のカテゴリの一覧ページです。

パンくずの定義をconfig/breadcrumbs.rbに書きます。

# カテゴリ一覧
crumb :admin_categories do
  link 'カテゴリ一覧', admin_categories_path
  parent :admin_dashboard
end

# カテゴリ一覧
crumb :admin_categories do
  link 'カテゴリ一覧', admin_categories_path
  parent :admin_dashboard
end

ここでは|category|の引数は必要ありません。

カテゴリ一覧ページのURLは/admin/categoriesで常に同じURLで、どのレコードにも依存しないから引数は不要なんですね。

カテゴリ編集ページ

続いて、管理画面内のカテゴリ編集ページです。

# カテゴリ編集
crumb :edit_admin_category do |category|
  link 'カテゴリ編集', edit_admin_category_path(category)
  parent :admin_categories
end

# カテゴリ編集
crumb :edit_admin_category do |category|
  link 'カテゴリ編集', edit_admin_category_path(category)
  parent :admin_categories
end

ここでは|category| という引数を受け取るブロックが必要です。

カテゴリ編集ページのURLは、

• /admin/categories/2/edit
• /admin/categories/3/edit

のようにページごとにURLが変わるため、パンくずもレコードを知っている必要があるため、引数が必須なんですね。

viewで breadcrumb に値を渡す

パンくずの定義をconfig/breadcrumbs.rbに書いたあと、viewは次のように記載します。

# index.html.slim
- breadcrumb :admin_tags

# edit.html.slim
- breadcrumb :edit_admin_category, @category

# index.html.slim
- breadcrumb :admin_tags

# edit.html.slim
- breadcrumb :edit_admin_category, @category

なぜ @category を渡す必要があるのか？

index.html.slimはカテゴリ一覧、edit.html.slimはカテゴリ編集ページです。

edit.html.slimにだけ@categoryと記載する必要があります。

理由は、これがないとパンくずが「どのカテゴリを編集しているの？」と判断できないから。

パンくずがURLを生成するときに「どのカテゴリなのか」を判断しないといけないため、@categoryが必要になります。

まとめ

以上、パンくず設定で引数の理解が深まった話でした。

引き続き学びのためにもアウトプットしたいと思います。