一番わかりやすいパンくずの実装（gem 'gretel')

今回はパンくずの実装についての記事を分かり易く説明します。

パンくずとは？

下記の画像のように画面遷移してきて、自分がどの位置にいるのか視覚的に分かり易く表示しているこれらをパンくずと総称しています。
また、リンクも持たせられるので、画面を戻る際にクリックしたら遷移するのでUI的にも優しいです。

下記メルカリの参考画像です。

導入手順

使用gemは下記です。

gem 'gretel'

---

_breadcrumbs.html.haml（パンくずview）の説明

パンくずを表示させるViewを部分テンプレートに分けておく。
（分けないでも良いが、変更や調整の際にメンテナンスを容易にするため）
下記以外の方法もあるが、私の場合は分かり易く呼び出されたコントローラーと、その先のアクション名でパンくずの表示を切り替えれるようにcase文を使い組んでいる。

case文については過去の記事を参考にしてください。
┗ case文での条件分岐方法

case params.values_at :controller, :actionの部分は
binding.pryでデバックした際にコントローラー名とアクション名が入っているのを確認できるので、
when ['users', 'show']とすることでusersコントローラーのshowアクションに遷移したい際にこちらが参照される。

breadcrumb :user_showの部分は次々項で説明するconfig/breadcrumbs.rb内のメソッドを呼び出すためのメソッド名（readcrumbs.rb側のメソッド名）。
少し紛らわしいが、先にこちらでメソッド名を命名してしまってreadcrumbs.rb側に当てがった方がスムーズなので私の場合はこのような手順で進めています。

末尾にあるに下記のコードは、表示を区切る際に間に入る記号などを指定できる。
見慣れない文字が入っている部分はHTMLの特殊文字になる。
下記のサイトのように様々な記号を当てれる。
https://www.benricho.org/symbol/tokusyu_02_arrow.html

= breadcrumbs separator: "   〉  "

上記の結果が下記のように変換される。
＞の前後に空白を入れている。
= breadcrumbs separator: "   〉  "

app/views/shared/_breadcrumbs.html.haml

- case params.values_at :controller, :action

- when ['users', 'show']
  - breadcrumb :user_show

- when ['user_chat_rooms', 'index']
  - breadcrumb :user_chat_rooms_index

= breadcrumbs separator: "   〉  "

---

部分テンプレート反映の準備

上記の部分テンプレートをパンくずを表示させた場所に下記のようにおく。
大体の場合はヘッダーの下に置かれていることがほとんどだと思うので、
ヘッダーの部分テンプレート中に組み込ませた方が効率は良いと思う。

 =render 'shared/breadcrumbs'

---

gretel（パンくず）メソッド作成

次にconfig下にbreadcrumbs.rbを作成し下記のように記述。
linkの後に続く部分に画面に表示させたいパンくず名を入力する。
後にroot_pathやuser_chat_rooms_path(user_id:current_user.id)とあるが、
こちらはパンくずの表示部がクリックされた際に画面遷移するためのpathなので、クリックして遷移の必要がなければ記述しなくてのよい。
parent :rootの部分は親のメソッド名を記述する。

config/breadcrumbs.rb

crumb :root do
  link 'ホーム', root_path
end

crumb :user_show do
  link "#{current_user.name}"
  parent :root
end

crumb :user_chat_rooms_index do
  link "メッセージ一覧",user_chat_rooms_path(user_id:current_user.id)
  parent :user_show
end

完成

そして最終的には下記のようになる。

``