背景
最近、Next.jsで一覧画面から詳細を開いたり、新規登録や編集をその場で完結させるようなUIを試していました。
その中で、パラレルルートとインターセプトを実際に触ってみたのですが、最初は正直、
「これってサイドバーUIを使って中身だけ差し替えたら十分なのでは？」
と思っていました。
見た目としてはかなり近いものが作れそうですし、実装コストだけを考えると、サイドバーの方が手軽そうに見えたからです。
ただ、公式ドキュメントを確認しながら整理していくと、
この2つは見た目が似ていても、役割がかなり違うことが分かりました。
今回は、そのときに自分が理解できたことを学習記録としてまとめます。
まず理解したこと
今回触ってみて、特に大きいと感じたのは次の点です。
パラレルルート + インターセプト
- URLを持たせられる
- ブラウザの戻る・進むに閉じる挙動を乗せやすい
- リロードしても状態を保ちやすい
- 一覧画面などの流れを残したまま詳細を開ける
- URL付きでその画面を共有しやすい
サイドバー実装
- 実装のイメージがしやすい
- UIとしては作りやすい
- 開閉だけならシンプルに構成できる
- ただし、URLや履歴との連動は別で考える必要がある
最初は「UIの違い」くらいに思っていましたが、
触ってみると実際は、状態管理で見せるUIなのか、routeとして扱うUIなのか の違いが大きいと感じました。
Intercepting Routesで理解したこと
Next.jsの公式ドキュメントでは、Intercepting Routes は
現在のlayoutの中で別のrouteを読み込むための仕組み とされています。
モーダルのようなUIにも使えることが紹介されています。
この説明を見て、自分の中ではかなり腑に落ちました。
最初は「その場で開く便利なモーダル機能」くらいの印象だったのですが、
実際にはただの見た目の話ではなく、
今見ている画面の流れを保ったまま、別のrouteを重ねて表示するための仕組み
として考える方がしっくりきました。
たとえば一覧画面の上で詳細を開きたいときに、
完全に別ページへ飛ぶのではなく、今の画面を残したまま表示できるのがよいところだと思いました。
Parallel Routesで理解したこと
Parallel Routes は、同じviewの中で複数のページを独立して表示できる仕組みです。
Next.js公式でも、独立した表示枠を同じレイアウト内に描画できることや、Intercepting Routes と組み合わせてモーダルに使えることが説明されています。
これも最初は少し難しく感じたのですが、
「メイン画面とは別枠で、もう1つのrouteの表示場所を持てる」と考えると、少し理解しやすくなりました。
つまり、
- 一覧はそのまま残す
- 詳細や新規登録フォームは別の表示枠で出す
という構成ができるわけです。
この仕組みがあるからこそ、
ただの開閉UIではなく、routeとして管理されたモーダルのような挙動が作れるのだと分かりました。
サイドバー実装との違いを感じた部分
今回一番学びになったのはここでした。
サイドバー実装でも、見た目としてはかなり近いものが作れると思います。
実際、自分も最初はそちらの方が楽そうに感じました。
ただ、公式ドキュメントで紹介されているモーダル用途の利点を見ると、
パラレルルート + インターセプトには次のような強みがあることが分かります。
- モーダルの内容をURL付きで共有できる
- ページをリロードしても流れを維持しやすい
- 戻る操作でモーダルを閉じられる
- 進む操作で再度開ける
これらは公式でも、Intercepting Routes と Parallel Routes を組み合わせるメリットとして説明されていました。
このあたりは、ただのサイドバーだとそのままでは手に入らず、
必要なら自分で履歴管理やURL設計まで考えないといけません。
なので、見た目が似ていても、
サイドバーはUI実装
パラレルルート + インターセプトはroutingを活かしたUI実装
という違いがあるのだと思いました。
今回の学び
今回触ってみて、自分の中で特に印象に残ったのは、
「実装が楽そうかどうか」と「要件に合っているかどうか」は別
ということでした。
最初はどうしても、サイドバーで済ませた方がシンプルに見えました。
でも実際には、
- URLを残したい
- 戻る操作で自然に閉じたい
- リロードしても破綻しにくくしたい
- その画面を他の人にも共有したい
といった要件があるなら、
最初からrouteとして設計できる方がかなり便利そうだと感じました。
逆に、
- ただ開閉できればよい
- URLは不要
- 履歴連動もいらない
という場合は、普通のサイドバーやモーダルの方が実装しやすそうです。
このあたりは、実際に触ってみたからこそ少し分かった部分かなと思います。
まとめ
今回、Next.jsのパラレルルートとインターセプトを触ってみて、
最初に思っていた以上に便利な仕組みだと感じました。
見た目だけで見ると、サイドバー実装でも近いことはできます。
ただ、実際にはURL・履歴・リロード耐性まで含めて考えられるのが大きな違いでした。
まだ自分の中でも完璧に理解できているわけではありませんが、
少なくとも今回は、
「その場で開けるUIを作る」だけでなく、
「それをrouteとして扱うかどうか」が設計上かなり重要
ということを学べました。
自分としては、この要件なら導入しなくてもよいと頭では分かっていても、せっかく覚えた技術は自分のアプリにも入れてみたくなるタイプです（笑）
実務経験はないですが、実務では要件にあった設計や工数とコストなどを考えて実装されているんだろうと思うと自由度はなさそうですがお客様に満足いただけると達成感がすごいんだろうなっと思います。
今後は、似たUIを実装するときには選べる選択肢として活用したいと思います。
参考にした公式ドキュメント