implementing-navigation

ナビゲーションパターンとルーティングの実装

目的

このスキルでは、フロントエンドとバックエンドの両方のアプリケーションでナビゲーションシステムを実装するための包括的なガイダンスを提供します。クライアントサイドのナビゲーションパターン（メニュー、タブ、パンくずリスト）とルーティング（React Router、Next.js）、およびサーバーサイドのルート設定（Flask、Django、FastAPI）を扱います。

使用するタイミング

次のような場合に、このスキルを使用します。

• プライマリナビゲーション（トップ、サイド、メガメニュー）の構築
• セカンダリナビゲーション（パンくずリスト、タブ、ページネーション）の実装
• クライアントサイドルーティング（React Router、Next.js）の設定
• サーバーサイドのルート（Flask、Django、FastAPI）の設定
• モバイルナビゲーションパターン（ハンバーガーメニュー、ボトムナビゲーション）の作成
• キーボード操作に対応したナビゲーションの実装
• コマンドパレットや検索主導のナビゲーションの構築
• 複数ステップのウィザードやステッパーの作成
• ナビゲーションにおける WCAG 2.1 AA 準拠の確保

ナビゲーションの選択フレームワーク

Information Architecture → Navigation Pattern

Flat (1-2 levels)      → Top Navigation
Deep (3+ levels)       → Side Navigation
E-commerce/Large       → Mega Menu
Linear Process         → Stepper/Wizard
Long Content          → Table of Contents
Power Users           → Command Palette
Multi-section Page    → Tabs
Large Data Sets       → Pagination

フロントエンドのナビゲーションコンポーネント

プライマリナビゲーションのパターン

トップナビゲーション（水平）

• 階層が浅いサイトやマーケティングサイトに最適です
• 認知負荷を抑えるため、プライマリリンクは最大 5～7 個にします
• 実装については references/menu-patterns.md を参照してください

サイドナビゲーション（垂直）

• 階層が深いサイト、管理パネル、ダッシュボードに最適です
• 複数階層のネストと折りたたみ可能なセクションに対応します
• サイドバーのパターンについては references/menu-patterns.md を参照してください

メガメニュー

• Eコマースサイトやコンテンツ量の多いサイトに最適です
• 画像や説明を含む豊富なコンテンツを表示します
• メガメニューの構造については references/menu-patterns.md を参照してください

セカンダリナビゲーションコンポーネント

パンくずリスト

• 階層上のパスと現在の位置を表示します
• 階層が深いサイトや Eコマースサイトでは不可欠です
• パンくずリストのパターンについては references/navigation-components.md を参照してください

タブ

• ページを再読み込みせずにコンテンツを切り替えます
• ブックマークできるよう URL と同期します
• タブの実装については references/navigation-components.md を参照してください

ページネーション

• 検索結果、商品リスト、記事に使用します
• パフォーマンス向上のため、仮想化を検討してください
• ページネーションのパターンについては references/navigation-components.md を参照してください

クライアントサイドルーティング

React Router（業界標準）

• ローダーパターンを使用した型安全なルーティング
• ネストされたルートと遅延読み込みに対応します
• React Router のパターンについては references/client-routing.md を参照してください

Next.js App Router

• RSC に対応したファイルベースのルーティング
• 並列ルートとインターセプトルート
• Next.js のルーティングについては references/client-routing.md を参照してください

バックエンドのルーティングパターン

Python Web フレームワーク

Flask

• Blueprint ベースの構成
• ルートデコレーターと URL ルール
• Flask のパターンについては references/flask-routing.md を参照してください

Django

• 名前空間を使用した URL 設定
• パスコンバーターと正規表現パターン
• Django の URL 設定については references/django-urls.md を参照してください

FastAPI

• ルーターベースの構成
• パス操作と依存関係
• FastAPI のルーターについては references/fastapi-routing.md を参照してください

モバイルナビゲーション

タッチデバイス向けのパターン

ハンバーガーメニュー

• プライマリナビゲーション用のスライド式ドロワー
• モバイルドロワーについては references/menu-patterns.md を参照してください

ボトムナビゲーション

• 親指で操作しやすい、3～5 個の主要アクション
• ボトムナビゲーションについては references/menu-patterns.md を参照してください

タブバー

• スワイプできる水平スクロールタブ
• モバイルファーストのアプリケーションに適しています

アクセシビリティ要件

キーボード操作

Tab       → Move forward through links
Shift+Tab → Move backward through links
Enter     → Activate link/button
Space     → Activate button
Arrow keys → Navigate within menus
Escape    → Close dropdowns/modals

ARIA パターン

アクセシブルなナビゲーションに不可欠な ARIA 属性：

• ARIA パターンの詳細については references/accessibility-navigation.md を参照してください
• ランドマークロール、状態、プロパティを含みます
• スクリーンリーダー向けの最適化手法

フォーカス管理

• 視認できるフォーカスインジケーター（最小 2px、コントラスト比 3:1）
• モーダルとドロップダウンではフォーカストラップを使用します
• キーボードユーザー向けのナビゲーションスキップリンク
• フォーカスパターンについては references/accessibility-navigation.md を参照してください

実装ユーティリティ

ナビゲーション構造の管理

ナビゲーションツリーを生成して検証します：

# Validate navigation structure
node scripts/validate_navigation_tree.js nav-config.json

# Generate breadcrumb trails
node scripts/calculate_breadcrumbs.js current-path

ルート生成（Python）

ルート設定を生成します：

# Generate Flask/Django/FastAPI routes
python scripts/generate_routes.py --framework flask --config routes.yaml

コード例

フロントエンドの例

ナビゲーションの実装例：

• examples/horizontal-menu.tsx - レスポンシブなトップナビゲーション
• examples/tab-navigation.tsx - URL と同期するタブ
• examples/mobile-navigation.tsx - ハンバーガーメニューとドロワー

バックエンドの例

ルーティング設定の例：

• examples/flask_routes.py - Flask ブループリントの設定
• examples/django_urls.py - Django の URL パターン
• examples/fastapi_routes.py - FastAPI ルーターの構成

ナビゲーション設定

複雑なナビゲーション構造には、設定スキーマを使用します：

• assets/navigation-config-schema.json - ナビゲーションツリーのスキーマ
• assets/route-templates.json - 一般的なルートパターン

実装前に、検証スクリプトを使用して設定を検証してください。

ライブラリの推奨事項

フロントエンドのルーティング

React アプリケーションには、React Router が推奨されます：

• 優れた TypeScript サポートを備えた業界標準
• NavLink のアクティブ状態による組み込みのアクセシビリティ
• 代替案については references/library-comparison.md を参照してください

コンポーネントライブラリ

迅速な開発には、次のライブラリを検討してください：

• ヘッドレス UI ライブラリ（Radix UI、React Aria）
• デフォルトでアクセシブル
• あらゆるスタイリング手法に対応

プログレッシブエンハンスメント

JavaScript がなくても動作するナビゲーションを構築します：

• サーバーでレンダリングされる HTML ナビゲーション
• クライアントサイドルーティングによるプログレッシブエンハンスメント
• JavaScript の障害に対するフォールバック

パフォーマンスに関する考慮事項

• ルートコンポーネントを遅延読み込みする
• ナビゲーション先をプリフェッチする
• ルートベースのコード分割を使用する
• ナビゲーションの読み込み状態を実装する

ナビゲーションのテスト

重要なナビゲーションテスト：

• キーボードナビゲーションの流れ
• スクリーンリーダーによる通知
• モバイルでのタッチ操作
• ルートパラメーターの検証
• ディープリンク機能

次のステップ

1. 情報アーキテクチャを分析する
2. 適切なナビゲーションパターンを選択する
3. アクセシビリティを最優先に実装する
4. プログレッシブエンハンスメントを追加する
5. デバイスと支援技術を横断してテストする

詳細な実装ガイドについては、特定の要件に応じて、参照先のドキュメントファイルを確認してください。