クエリパラメータ操作3選

はじめに

最近、TAのこうすけさん(共通の調味料を使った料理の写真を送り合う仲ですw)と一緒にチーム開発をやらせていただいており、私の実装担当ページではクエリパラメータを取得する、セットするなどの操作が必要だったので、ちょっと隙間の時間で3つ紹介してみます。

実務案件課題で検索機能を実装した時にも、URLを直接操作してもページの変更や検索実行等の要件付きだったので似たような事をやりました。

前もやったなーと思ってコード見に行ってペタペタ貼って今回やりたいことに合わせて修正みたいな感じでしたが、経験積んでいくとこういったことが出来る機能がどんどん増えるんだろうな～(ワクワク)と思い、もっとコーディングしなければと改めて思いました。

では本題に入ります。

やりたいことに合わせてやり方を紹介する方式でいきます。

クエリパラメータを取得したい

useSearchParamsを使います。

import { useSearchParams } from "next/navigation";

 const searchParams = useSearchParams();  
 const startId = searchParams.get("start_id");

こんな使い方をします。

これでstartIdにはクエリパラメータ(?start_id=hoge)のstart_idの値(hoge)が入ります！

useSearchParamsは読み取り専用です。

取得したいときに使います。

クエリパラメータを削除したい

URLSearchParamsを使います。

ある処理を行ったら削除したいときに使います。

こちらはimport不要で下記のようにします。

const params = new URLSearchParams(window.location.search);
params.delete("start_id");

これでURLから?start_id=hogeが丸っとなくなります。

クエリパラメータをセットしたい

こちらもURLSearchParamsを使います。

const params = new URLSearchParams(window.location.search);
params.set("start_id", "hoge");
//URLに
//?start_id=hoge
//がセットされる

params.set("start_id", "");
//URLに
//?start_id=
//がセットされる

おわりに

useEffectでsearchParamsの変更を検知して処理を実行するような使い方をよくするのではないかと思います。

今回の実装でいうとURLの変更を検知してモーダル開くとかしてました。

クエリパラメータがあったらモーダル開く。モーダル閉じるときにクエリパラメータ削除するなどです。

取得した値はステートで管理しました。

短いですが、以上です。ご参考になれば幸いです。