はじめに
実務で、タブを切り替えることで表示するデータを変更するようなUIを実装することになりました。
この実装をするにあたり、設計時に、状態管理の方法として以下の2つのアプローチを検討しました。
- Stateによって切り替える方法
- クエリパラメーターによって切り替える方法
それぞれの方法にはメリットとデメリットがあるため、これらを比較し、最適な使い分けを考えてみます🎉
結論
先に両者の使い分けについての結論を書いておきます。
stateを使う場合
- 簡単なUIや内部的なタブ切り替えで、URLの共有を気にする必要がない場合
- パフォーマンスが重要視される場合
クエリパラメータを使う場合
- URLの共有やブックマークが重要な場合。例えば、ユーザーが特定のタブの情報を他のユーザーと共有したい場合
メリット・デメリットの比較
stateを使ってタブを切り替える場合
stateを使ってタブを切り替える場合、状態管理が全てReactコンポーネント内に収まるため、以下のようなメリットがあります。
stateでタブを切り替えるメリット
- 実装がシンプル
- パフォーマンスがいい
- 外部依存が少ない
実装がシンプル
「選択されているタブは何か？」というstateを1つ定義するだけで、タブの状態を管理することができます。
コードがシンプルでわかりやすくなります。
パフォーマンスがいい
URLが変更されないので、高速にUIが切り替わります。
外部依存が少ない
React Routerなどの外部ライブラリに依存しません。
一方でURLにタブの状態が含まれないため、以下のようなデメリットがあります。
stateでタブを切り替えるデメリット
- 指定したタブをURLを共有できない
- ブラウザのブックマークや履歴が活用できない
指定したタブのURLを共有できない
URLを共有した際にタブの初期状態で開かれてしまいます。
試しにXのHomeにアクセスし、タブを「Following」に切り替えた状態で、URLを共有してみてください。タブが「For You」の状態で開かれるはずです。「Following」タブをURLで誰かに共有することはできません😢
ブラウザのブックマークや履歴が活用できない
ユーザーが特定のタブの状態をブックマークしたり、履歴から特定のタブに戻る・進む操作をすることはできません。
クエリパラメータを使ってタブを切り替える場合
クエリパラメータを使ってタブを切り替える場合、 タブの状態がURLに含まれるため、以下のようなメリットがあります。
クエリパラメータでタブを切り替えるメリット
- 指定した特定のタブのURLを共有できる
- ブラウザのブックマークや履歴が活用できる
指定した特定のタブのURLを共有できる
URLを共有した際に直接特定のタブを開くことができます。
試しにXの「Notificaitions」ページで「Mentions」タブに切り替えた状態のこちらのURL（https://twitter.com/notifications/mentions） に遷移してみてください。初めて「Notificaitions」ページを開くと、「All」タブが開かれますが、リンクを開くと「Mentions」タブが開くことが確認できます。
ブラウザのブックマークや履歴が活用できる
ユーザーが特定のタブの状態をブックマークしたり、履歴から特定のタブに戻る・進む操作をすることができます。
一方で、以下のようなデメリットがあります。
クエリパラメータでタブを切り替えるデメリット
- 実装が複雑になる
- パフォーマンスが落ちるかも…
- 外部依存が増える
- URLが長くなる
実装が複雑になる
クエリパラメータを扱うため、React Routerなどの外部ライブラリとの連携が必要になり、stateだけの実装に比べて複雑になります。
パフォーマンスが落ちるかも…
URLの変更に伴うリダイレクトやページの再レンダリングが発生するため、パフォーマンスが落ちる可能性があります。（まあそこまで気になるレベルではないと思いますが…）
外部依存が増える
状態管理がURLやルーティングに依存するため、React Routerなどの外部ライブラリに依存することになります。
使い分け
両者のメリット・デメリットを考慮すると、以下のような使い分けが良さそうです。
stateを使う場合
- 簡単なUIや内部的なタブ切り替えで、URLの共有を気にする必要がない場合
- パフォーマンスが重要視される場合
クエリパラメータを使う場合
- URLの共有やブックマークが重要な場合。例えば、ユーザーが特定のタブの情報を他のユーザーと共有したい場合
基本的にはstateを使って実装する。ユーザーさんがURLでタブの情報を共有するようなケースが想定される場合は、クエリパラメータを使って実装するという方針が良さそうですね🎉
終わりに
今回の実務では、タブごとの情報を共有するケースがありそうだったので、クエリパラメータを使ってタブを切り替える方法を採用しました。
初心者さんは、ついつい、stateを使って実装しがちですが、必ずしもUXが良いとは限らないので注意しましょう。（最近ハマっているYouTuberのナコンさん風に言ってみました😇）
紹介した2つ以外にも実装方法はありそうですね。いい方法がありましたら教えて下さい🙇
Xで日々の業務や日常を発信しています！
よろしければフォローをお願いします🍢
追記
XのHomeについて、URLにはタブの情報は含まれないのですが、リンクからは開いていたタブに遷移できることがわかりました。何か別の方法でタブの状態を保持しているようです🤔わかる方いらしたら教えて下さい🙇