[Frontend] クエリパラメータとハッシュの区別
概要
今回は、今までクエリパラメータとハッシュパラメータの使い分けってどういう定義でやるんだっけ？というところに改めて疑問を持ったので、まとめていこうと思います。
また、先にこの記事を書くにあたって浮かんだ最初の疑問は、「ページ遷移した時に遷移方法によってコンポーネントを出し分けたい。だけど、そのための情報をクエリパラメータで送るべきか、ハッシュパラメータで送るべきか🤔」というものでした。
そのため、今回の記事の結論には、この疑問を解決する形でまとめていこうと思います。
改めてクエリパラメータとハッシュパラメータについて
query parameter
クエリパラメータは、URL の末尾に疑問符(?)で区切られる値になります。キーと値のペアで構成され、各ペアのキーと値の間はイコール（=）で繋ぐ形になります。これらは、渡されるデータに基づいて特定のコンテンツやアクションを定義するために使用される拡張機能で、複数のパラメータを追加するには、それぞれの間にアンド（&）を追加します。
// 例
https://example.com?name=test&age=25
クエリパラメータについて調べていた中で、「クエリパラメータは関数に似ており、URL のパスは関数名のようなもので、クエリパラメーターがその関数の引数」という説明があり、URL のパスだけでは表現できない情報を含ませるためには重要なツールとされています。
hash parameter
ハッシュパラメータは、URL の末尾にハッシュ(#)で区切られる値になります。一般的には URL にアクセスしたときにブラウザが表示する位置（スクロール）を指定するための値になります。この方法でブラウザの表示位置を制御する場合、HTML のタグに対して id 要素を追加し、そのハッシュパラメータと一致している箇所に自動でスクロールさせることができます。
// 例
https://example.com#test
また、シングルページアプリケーション（SPA）のルーティング方法としての使い方もできるようです。ここでは、SPAの説明は省きますが、方法としてはハッシュに指定されている値を元に、表示するコンポーネントを出し分ける形で実装を行うことができます。
クエリパラメータとハッシュパラメータの違いと使い分け
調べてわかった違いとしては、クエリパラメータはサーバーにリクエストする URL にクエリパラメータの値も含めるが、ハッシュパラメータだと含まれないということでした。
それだけ？と思ったのですが、よく考えると意外に大きな違いがありました。
それは、クエリパラメータのデータはサーバーでも使用可能な値なため、サーバーサイドレンダリング（SSR）で活用ができることになります。何気なく使用していた検索機能など、ほどんどがクエリパラメータで実装されており、このような活用を裏側で行なっていることが考えられます。（実際Youtubeは行なってました）
じゃあ基本的にはサーバーにリクエストが送られるクエリパラメータで、ブラウザの表示位置を扱いたいときだけハッシュパラメータで良いのでは？となり、最初の疑問であるコンポーネントの出し分けにはクエリパラメータが正しそうに感じます。
しかし、先述したように、ハッシュパラメータでシングルページアプリケーションの実装などが行われていることから考えると、ハッシュパラメータを用いてコンポーネントの出し分けるという方法は、割りかし一般的な方法であることが考えられます。そのため、コンポーネントの制御にハッシュを使用する方法も間違っていなさそうにも感じてしまいます。
結論
結論、時と場合によるというのが結論になりそうでした。
調べている中でもどちらで行うのが正解という正確な情報がなく、明確に答えがあるというよりも分かりやすいよう適宜チームで決めましょうね、みたいな方が良さそうだなぁと感じました。（結論に到達する前に記事を書き始めてしまったが故に、こっちが正しい！という記事にできなくて残念な気持ちです。）
とはいえ、どちらで行うべきかと迷ったときに何となくで決めるのは良くないので、以下まとめとしてそれぞれの特徴だけ記載しておこうと思います。
クエリパラメータ
- サーバーにパラメータが送られるため、SSR時の制御も可能
- key-valueのペアなので、複数のデータを管理したい場合に有効
ハッシュパラメータ
- サーバーにパラメータが送られないため、クライアントのみで使用可能
- 単一な値なため、複数のデータを管理したい場合には不向き
- SPAでの使用なども行われているため、コンポーネントの出し分けとしては一般的（かも）
- SEO的には良くない（という記事がたくさん）
先述の通り、クエリパラメータとハッシュパラメータの使い分け方わかってない！からすぐに記事にまとめ始めてしまったため、記事としてまとまりのあるものになっていなそうなのですが、どこかしらが誰かしらの学びになっていると嬉しいです。また、知識だけでなく誤字脱字も含め、間違っている箇所があれば優しく指摘いただけると嬉しいです。
参考
Discussion