Nested Navigation について調べた
ざっと検索すると、主にネイティブアプリ、特にReact Nativeの文脈での記事を多く見かける
今回は以下の記事を参考にした
Nested Navigation は、複数のナビゲーターを組み合わせて階層を作成し、ユーザーがアプリ内の画面間を移動できるようにするナビゲーションの仕組み
ここでいうナビゲーターとは、例えばReact Nativeでは以下の3 つのナビゲーターがある
- Stack Navigator
- ナビゲーターの「デフォルト」
- 名前の通り、プッシュとポップを備えたスタックで、階層的に画面間を移動する
- Tab Navigator
- 上部または下部のタブで画面を切り替えることができる
- 上部のナビゲーターはヘッダーの下に配置され、タブ間を水平にスワイプできる
- 下部のナビゲーターは異なるルートを切り替えることができる
- Drawer Navigator
- 画面の片側から引き出しのようにスライドするモーダル
Nested Navigation は、通常のコンポーネントをネストするのと同じように、これらのナビゲーターの画面内に別のナビゲーターをネストしてレンダリングする
アプリに他の画面を含む場合や、関連する画面をグループ化する必要がある場合に便利
主な特徴のまとめ
- 階層的な画面遷移の管理:
- 複数の画面を入れ子構造で管理し、1つのルート（親画面）に複数のサブルート（子画面）が存在する形になる。これにより、異なる画面のグループをまとめて一貫して管理できる
- モジュール性の向上:
- 各階層ごとに独立したナビゲーションのロジックを持たせることで、特定のルートの変更や追加が他のルートに影響を与えにくくなる。これにより、アプリの拡張やメンテナンスがしやすくなる
- 状態の維持:
- 親画面から子画面に遷移しても、親画面の状態を維持できる。例えば、リストの詳細画面に遷移して戻った場合に、リストのスクロール位置が保持されるような動作が可能
- URL構造が階層的になる（Webの場合）:
- Nested Navigationは通常URLに反映され、例えば
/productsというルートに対して/products/1という詳細ルートが追加される形で階層的なURLが構築される
- Nested Navigationは通常URLに反映され、例えば
- コンポーネントや画面間の独立性:
- 各階層が独立しているため、異なる画面でのナビゲーションロジックが干渉することが少ない。たとえば、タブバーを持つアプリで、タブごとに異なるナビゲーションを提供できる
- 再利用性:
- Nested Navigationを使用することで、同じ子ルートを複数の親ルートで使い回すことができる。これにより、共通部分の再利用性が向上する
- バックスタックの管理:
- 各階層で独自のバックスタックを管理できる。これにより、サブナビゲーション内での戻る操作が、アプリ全体のナビゲーションに影響を与えないようにすることが可能
これらの特徴により、Nested Navigationは複雑なアプリケーションの画面遷移を整理しやすくし、ユーザー体験を向上させることができる手法となっている
ただし、React Navigationはメモリとパフォーマンスの問題と、コードが理解しにくい問題、そして混乱を招きやすいUXになる可能性があるあるため、最小限に抑えることが推奨されているので注意が必要
