encodeURI()関数とencodeURIComponent()関数の違い

JavaScriptでURLエンコードを行うには、主に以下の3つの方法があります。

encodeURI() 関数は、URL全体をエンコードします。

const url = "https://example.com/?param1=日本語&param2=漢字";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // "https://example.com/?param1=%E6%97%A5%E6%9C%AC%E8%AA%9E&param2=%E6%BC%A2%E5%AD%97"

const param1 = "日本語";
const encodedParam1 = encodeURIComponent(param1);
console.log(encodedParam1); // "%E6%97%A5%E6%9C%AC%E8%AA%9E"

URLSearchParams クラスは、URLのパラメータをエンコードする際に便利です。

const url = new URL("https://example.com/");
const params = new URLSearchParams();
params.append("param1", "日本語");
params.append("param2", "漢字");

const encodedUrl = url.toString() + "?" + params.toString();
console.log(encodedUrl); // "https://example.com/?param1=%E6%97%A5%E6%9C%AC%E8%AA%9E&param2=%E6%BC%A2%E5%AD%97"

注意点

• エンコード後のURLは、デコードしないと人間が読みにくい形式になります。
• エンコード後のURLは、ブラウザによって異なる結果になる場合があります。

JavaScriptでURLエンコードを行うサンプルコード

encodeURI() 関数

const url = "https://example.com/?param1=日本語&param2=漢字";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // "https://example.com/?param1=%E6%97%A5%E6%9C%AC%E8%AA%9E&param2=%E6%BC%A2%E5%AD%97"

encodeURIComponent() 関数

const param1 = "日本語";
const encodedParam1 = encodeURIComponent(param1);
console.log(encodedParam1); // "%E6%97%A5%E6%9C%AC%E8%AA%9E"

URLSearchParams クラス

const url = new URL("https://example.com/");
const params = new URLSearchParams();
params.append("param1", "日本語");
params.append("param2", "漢字");

const encodedUrl = url.toString() + "?" + params.toString();
console.log(encodedUrl); // "https://example.com/?param1=%E6%97%A5%E6%9C%AC%E8%AA%9E&param2=%E6%BC%A2%E5%AD%97"

• デコードを行う場合は、decodeURI() 関数または decodeURIComponent() 関数を使用します。

const encodedUrl = "https://example.com/?param1=%E6%97%A5%E6%9C%AC%E8%AA%9E&param2=%E6%BC%A2%E5%AD%97";
const decodedUrl = decodeURI(encodedUrl);
console.log(decodedUrl); // "https://example.com/?param1=日本語&param2=漢字"

• URLエンコードを行う必要があるのは、URLに特殊文字が含まれている場合のみです。

const url = "https://example.com/";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // "https://example.com/"

• URLエンコードを行うと、URLが長くなる場合があります。

const url = "https://example.com/?param1=This is a very long string";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // "https://example.com/?param1=This%20is%20a%20very%20long%20string"

const url = "https://example.com/?param1=日本語";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // "https://example.com/?param1=%E6%97%A5%E6%9C%AC%E8%AA%9E"

JavaScriptでURLエンコードを行うその他の方法

URLエンコードを行うライブラリが多数存在します。これらのライブラリを使用することで、より簡単にURLエンコードを行うことができます。

自作の関数を使用する

URLエンコードを行う自作の関数を作成することもできます。

function encodeUrl(url) {
  // エンコードする文字列を定義
  const encodeChars = [
    " ",
    "!",
    "\"",
    "#",
    "$",
    "%",
    "&",
    "'",
    "(",
    ")",
    "*",
    "+",
    ",",
    "-",
    ".",
    "/",
    ":",
    ";",
    "<",
    "=",
    ">",
    "?",
    "@",
    "[",
    "\\",
    "]",
    "^",
    "_",
    "`",
    "{",
    "|",
    "}",
    "~",
  ];

  // URLをエンコード
  const encodedUrl = url.replace(/./g, (char) => {
    if (encodeChars.includes(char)) {
      return `%${char.charCodeAt(0).toString(16).toUpperCase()}`;
    } else {
      return char;
    }
  });

  return encodedUrl;
}

const url = "https://example.com/?param1=日本語&param2=漢字";
const encodedUrl = encodeUrl(url);
console.log(encodedUrl); // "https://example.com/?param1=%E6%97%A5%E6%9C%AC%E8%AA%9E&param2=%E6%BC%A2%E5%AD%97"

各方法の比較

• URLエンコードを行う際は、注意点に理解しておきましょう。