フロントで、クエリパラメータをいい感じにkey-valueのObjectに変換したい...っていうことをやりたくて、探したところ、Web標準のAPIとして提供されていました。

正規表現やVueRouterのようなライブラリを用いる手段のみと思っていたので、忘れないよう書き留めときます。

使い方

URLパラメータの構築

typescript-sandbox/fb-login-sample at master · zakizaki-ri9/typescript-sandbox · GitHub

上記リポジトリで、FacebookログインおよびSDKの素振りをおこなっています。

長期ユーザートークンを発行するため、以下のようにURLSearchParamsを利用し、クエリパラメータを構築しています。

// https://github.com/zakizaki-ri9/typescript-sandbox/blob/03b4e49fb64dfbe116620827a666946922780a72/fb-login-sample/src/components/FacebookLoginForm.vue#L74-L92
// から抜粋
    // https://developers.facebook.com/docs/instagram-api/getting-started Step3
    const onGetLongAccessToken = async () => {
      const params = new URLSearchParams({
        grant_type: "fb_exchange_token",
        client_id: appId.value,
        client_secret: appSecrets.value,
        fb_exchange_token: getAccessToken() // Long Access Tokenでもいける
      });
      const response = await fetch(
        "https://graph.facebook.com/oauth/access_token?" + params
      );
      // 〜省略〜
    };

axiosを使わず、Web標準のfetchを用いる場面だと、有効活用できそうです。

github.com

developer.mozilla.org

クエリパラメータをkey-valueなObjectに変換

クエリパラメータを抜き出したいURLをURLにインスタンス化 -> searchParamsでURLSearchParamsを取得 -> key-valueなObjectを取得できます。

以下、コード例です。

TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript

// "クエリパラメータ"でGoogle検索したときのURL
const url = "https://www.google.com/search?q=%E3%82%AF%E3%82%A8%E3%83%AA%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF&rlz=1C5CHFA_enJP848JP848&oq=%E3%82%AF%E3%82%A8%E3%83%AA%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF&aqs=chrome..69i57j0l7.2154j0j7&sourceid=chrome&ie=UTF-8";

console.log({
  params: new Array(...new URL(url).searchParams.entries())
});
/*
output↓
{
  "params": [
    [
      "q",
      "クエリパラメータ"
    ],
    [
      "rlz",
      "1C5CHFA_enJP848JP848"
    ],
    [
      "oq",
      "クエリパラメータ"
    ],
    [
      "aqs",
      "chrome..69i57j0l7.2154j0j7"
    ],
    [
      "sourceid",
      "chrome"
    ],
    [
      "ie",
      "UTF-8"
    ]
  ]
} 
*/