hwc-navigation-content

ナビゲーションとコンテンツ表示

Turbo Drive と Turbo Frames を使って、ナビゲーションとコンテンツの検出動作を実装します。

コアワークフロー

1. ナビゲーションモードを分類します：タブ、ページネーション、遅延フレーム読み込み、ファセット検索、またはカスタムのレンダリング／キャッシュライフサイクル。
2. まず URL と履歴の管理方法を決定します（data-turbo-action、フレームの src、クエリパラメーター、戻る／進むの動作）。
3. フレームのライフサイクルイベントと訪問イベントを使って、アクティブ状態、リクエストパラメーター、スクロール位置の復元を更新します。
4. Turbo のキャッシュスナップショットを作成する前に、一時的な UI 状態をクリーンアップします。
5. 戻る／進むのナビゲーションと再読み込みの両方で動作を検証します。

ガードレール

• アクティブ状態やタブ状態は、クリック意図のイベントではなく、読み込み／レンダリングのイベントで更新します。
• フィルターとページネーションの URL 状態は正規化された状態に保ちます。
• 一時的な UI の痕跡をキャッシュスナップショットに残さないようにします。
• 遅延読み込みは意図的に使用し、読み込み境界とオブザーバーの動作を検証します。

リファレンスは必要なものだけ読み込む

現在のリクエストに必要なファイルだけを開きます。

• タブ付きフレームのナビゲーション：references/2023-06-20-turbo-frames-tabbed-navigation.md
• ページネーションと履歴管理：references/2023-07-04-turbo-frames-pagination.md
• 遅延フレームのライフサイクル：references/2023-09-26-turbo-frames-lazy-loading-lifecycle.md
• スクロール位置の復元：references/2023-09-12-turbo-frames-scroll-position-restoration.md
• キャッシュライフサイクルのクリーンアップ：references/2023-05-23-turbo-drive-cache-lifecycle.md
• カスタムレンダリングのインターセプト：references/2023-05-09-turbo-drive-custom-rendering.md
• 条件付きインスタントクリック戦略：references/2024-02-13-turbo-drive-conditional-instant-click.md
• Stimulus を使ったファセット検索：references/2024-12-10-stimulus-turbo-frames-faceted-search.md
• Markdown プレビューのフロー：references/2024-10-08-turbo-frames-markdown-preview.md

すべての項目については references/INDEX.md を参照してください。

関連スキルへのエスカレーション

• フォーム送信と検証の動作：hwc-forms-validation を使用します
• プッシュ型リアルタイム更新：hwc-realtime-streaming を使用します
• メディア固有のインタラクション設計：hwc-media-content を使用します
• 汎用的なフィードバック／トランジションと体感パフォーマンスの仕上げ：hwc-ux-feedback を使用します
• ナビゲーション以外の Stimulus API の基礎：hwc-stimulus-fundamentals を使用します