【紅茶ECサイト 制作日誌 Vol.4】「ページ遷移」の正解はこれ！NavigationMixinとパンくずリストの実装ガイド

LWRで構築する英国紅茶ブランドサイト 「The Royal Brew」 制作日誌、第4弾です。

前回までで、商品詳細ページの「見た目（UI）」と「カート連携（LMS）」が完成しました。

しかし、画面左上にある 「パンくずリスト (Breadcrumbs)」 に目を向けてみてください。 Home / Shop / Orange Flower 今はただのテキストとして表示されているだけで、クリックしてもどこにも行けません。

今回は、このパンくずリストに命を吹き込み、LWRサイトにおける 「正しいページ遷移」 を実装します。

LWRにおける「遷移」の落とし穴

Salesforce開発者なら、画面遷移といえば lightning-navigation モジュールを使うのが常識です。 しかし、LWRサイト（Experience Cloud）では、社内用画面（Lightning Experience）と同じコードを書くと痛い目を見ます。

PageReferenceタイプの違い

社内用ではホーム画面への遷移に standard__namedPage を使いますが、LWRサイトでは comm__namedPage を使うのが一般的です。 ここを間違えると、クリックしても「無反応」という寂しい結果になります。

その他のエクスペリエンスビルダー独自のPageReferenceタイプ

以下のページ種別は特にExperience Cloud (LWR) サイト独自に設けられた PageReference タイプです。

• ログインページ / ログアウトページ: comm__loginPage
• 管理コンテンツページ (Salesforce CMS) : standard__managedContentPage

実装：NavigationMixin を組み込む

それでは、商品詳細コンポーネント royalProductDetail.js を改修しましょう。

Step 1: クラスの定義（ここが最大の罠！）

まず、モジュールをインポートし、クラスをラップします。

ここで私が実際に遭遇したエラーを紹介しましょう。

Error: TypeError: this[n.NavigationMixin.Navigate] is not a function

このエラーが出たら、原因は十中八九ここです。 extends LightningElement のままだと、ナビゲーション機能が継承されません。必ず extends NavigationMixin(LightningElement) に書き換える必要があります。

// royalProductDetail.js
import { LightningElement, api, wire } from 'lwc';
// ★ 1. NavigationMixinをインポート
import { NavigationMixin } from 'lightning/navigation'; 

// ... (その他のimport)

// ★ 2. ここ重要！ NavigationMixin(...) で囲む
export default class RoyalProductDetail extends NavigationMixin(LightningElement) {
    
    // Homeへ戻る処理
    navigateToHome(event) {
        // リンクのデフォルト動作（href遷移）をキャンセル
        event.preventDefault();

        this[NavigationMixin.Navigate]({
            type: 'comm__namedPage', // LWRではこれを使う
            attributes: {
                name: 'Home' // 標準のホーム画面のAPI参照名
            }
        });
    }

    // Shopへ戻る処理（今回はHomeと同じ挙動に設定）
    navigateToShop(event) {
        event.preventDefault();
        this[NavigationMixin.Navigate]({
            type: 'comm__namedPage',
            attributes: {
                name: 'Home'
            }
        });
    }
    
    // ... (その他のコード)
}

Step 2: HTMLでリンクを作る（SEO対策）

次にHTML側です。

単に div onclick={...} で実装することもできますが、それはSEO（検索エンジン最適化）的によくありません。Googleのクローラーは <a> タグの href を辿ってサイトを巡回するからです。

そこで、以下のような 「ハイブリッド実装」 を行います。

1. <a> タグを使う。
2. href には正しいURL（またはダミー）を入れる。
3. onclick で preventDefault() して、SPAとしての高速遷移を行う。

<div class="breadcrumbs">
    <a href="/theroyalbrew/" onclick={navigateToHome} class="breadcrumb-link">Home</a>
    
    <span class="separator">/</span>
    
    <a href="/theroyalbrew/shop" onclick={navigateToShop} class="breadcrumb-link">Shop</a>
    
    <span class="separator">/</span>
    
    <span class="current">{name}</span>
</div>

こうすることで、「人間には高速なSPA遷移」 を、「検索エンジンには正しいリンク構造」 を提供できます。

完成した画面遷移

これで、商品詳細ページから「Home」をクリックすると、画面のリロード（白画面の点滅）なしで、スムーズにトップページへ戻れるようになりました。

今回のまとめ

LWRサイトのナビゲーション実装における3つの鉄則です。

1. comm__namedPage を使う: Experience Cloud 独自の記法を覚えましょう。
2. extends NavigationMixin(...): これを忘れると is not a function エラーが出る。
3. <a> タグ + preventDefault(): SEOとUXを両立させるベストプラクティス。

次回の制作日誌

これで、商品詳細ページの機能実装はすべて完了しました！

次回はこのサイトに 「AIエージェント（執事セバスチャン）」 を住まわせる、Agentforceの実装に挑戦します。お楽しみに。

参考URL

名前付きページ種別 (エクスペリエンスビルダーサイト)｜Lightning Web Components 開発者ガイド