JavaScriptでパラメータ付きURLを生成する方法

執筆日: 2021-10-14

概要

JavaScriptでアプリ制作をしていると、必須パラメータを付与してリダイレクトさせるといった作業がでてきます。
パラメータ付きURLを作成する際、手作業でURLを入れ込むのは手間がかかりますし、なにより間違ったコードをいれてしまいバグの温床になりかねません。
パラメータを引数に取り、URLの形で返してくれる関数を定義したほうが再利用でき、安全です。

今回はその関数の作成の方法を紹介します。

自作関数 generateUrl

以下のコードをご覧ください。

const baseUrl = 'https://xxx.com'

type Params = {
  state: string
  redirect_uri: string
  id: string
}

const params = {
  state: 'we8FWEjfoe',
  redirect_uri: 'https:△△△.com',
  id: 'ii409-effetgj'
}

/**
* ベースとなるURLとパラメータが格納されたオブジェクトを受け取り、パラメータ付きURLを返します。
* @param {string} url
* @param {object} params
* @return {string} パラメータ付与URLが返る。
*/
const generateUrl = (url: string, params: Params) => {
  const paramsUrl = Object.entries(params)
    .map(x => {
      const key = x[0]
      const value = x[1]
      return `${key}=${value}`
    })
    .join('&')
  return `${url}?${paramsUrl}`
}

console.log(generateUrl(baseUrl, params))
// https://xxx.com?state=we8FWEjfoe&redirect_uri=https:△△△.com&id=ii409-effetgj

上記はgenerateUrl関数を作成し、ベースとなるURLとパラメータを引数に渡すことでパラメータ付きURLを生成しています。

query-string

query-stringというモジュールを使用すれば、もっと簡単にできます。

import { stringifyUrl } from "query-string";

const url = stringifyUrl(
  {
    url: "https://xxx.com",
    query: {
      state: "we8FWEjfoe",
      redirect_uri: "https:△△△.com",
      id: "ii409-effetgj"
    }
  },
  {
    encode: false
  }
)

console.log(url)
// https://xxx.com?id=ii409-effetgj&redirect_uri=https:△△△.com&state=we8FWEjfoe

query-stringはさまざまなクエリアプローチが用意されていてとても便利です。

結論

直書きはなるべくさけ、どのパラメータがきても決まったURLを返すような関数ができると嬉しいですね。
チーム制作ならば尚更使用するでしょう。

ぜひ、活用してみてください。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店