Laravelでパンくず機能を laravel-breadcrumbs で実装する

最初に

この記事は、Laravel Advent Calendar 2022 13日目の投稿です。

自己紹介

ユニラボというスタートアップ企業でエンジニアしてます。普段はLaravelをよく触っています。AWS界隈のウォッチは趣味でしていたり、開発者体験を良くすることを通じて、より良いプロダクトをユーザに届けるために頑張ってます。直近は、爆速開発していたり、それが評価され Findy から賞をいただきました。

https://note.com/deliku0306

https://note.com/deliku0306/n/n0eb40044c49e

https://note.com/deliku0306/n/n35f2629c870a

https://note.unilabo.jp/m/mc84cf9468445

パンくず

TOPページ > カテゴリTOP > カテゴリ別記事一覧 のように、サイトのツリー構造をリンクとして表すものです。

パンくずリスト（breadcrumb list）は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。
パンくずナビ、トピックパス、フットパスとも言う。英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的である。
ウェブディレクトリのような大規模なウェブサイト内で、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。
「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

https://ja.wikipedia.org/wiki/パンくずリスト

laravel-breadcrumbs でパンくずを簡単に実装する

下記のライブラリを使用することで、簡単に実装できます。

https://github.com/diglactic/laravel-breadcrumbs

1. composer install

composer require diglactic/laravel-breadcrumbs

2. routes/breadcrumbs.php

パンくずの構造の定義は、routes/breadcrumbs.php で行います。
TOPページ > カテゴリTOP > カテゴリ別記事一覧 を表現すると下記のようなイメージになります。

<?php

use Diglactic\Breadcrumbs\Breadcrumbs;
use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;

// TOP 第1階層
Breadcrumbs::for('site.top', function (BreadcrumbTrail $trail) {
    $trail->push('TOPページ', route('site.top'));
});

// カテゴリTOP 第2階層
Breadcrumbs::for('site.category', function (BreadcrumbTrail $trail, Category $category) {
    $trail->parent('site.top');
    $trail->push($category->name, route('site.category', $category->id));
});

// カテゴリ別記事一覧 第3階層
Breadcrumbs::for('site.category.article', function (BreadcrumbTrail $trail, Category $category) {
    $trail->parent('site.category', $category);
}
$trail->push("{$category->name}新着記事一覧", route('site.category.article', $category->id));
});

3. bladeで、パンくずリストを表示する

Breadcrumbs::renderにて、 breadcrumbs.php で定義したパンくず名を第一引数に指定し、必要な引数を渡します。

{{ Breadcrumbs::render('site.category', Category $category) }}

上記の記述だけで上位階層を含めて下記のようなパンくずが表示されているかと思います。
TOPページ > {{$category->name}} > {{$category->name}}新着記事一覧

最後に

今回紹介したコードは 至ってシンプルな構造を表現するものですが、複数ネストの表現や、
JSON-LD構造化データを表現することもできます。

従来は、miroでパンくず表現をフローチャートで表現していたのですが、構造を変更するとドキュメントの更新も行う必要があったり、条件に応じて親階層が変わることを表現するコストが大きいなど辛みがありました。

実際の現場でも laravel-breadcrumbsを使ってパンくずを実装しているのですが、
条件分けやパターンによる細かなパンくずの内容を、routes/breadcrumbs.phpに集約することができ、画面の構造依存関係を把握するのに重宝しています。