escape vs encodeURI vs encodeURIComponent：違いを理解して使い分ける

2024-04-04

JavaScriptでクエリ文字列エンコード：escape vs encodeURI vs encodeURIComponent

各関数の概要

1 escape

最も古いエンコード関数
すべての予約文字（RFC 2396 以外）をエスケープ
スペースは+ではなく%20にエンコード
非推奨

2 encodeURI

URI全体をエンコード
予約文字（RFC 3986）と一部の特殊文字をエスケープ
クエリ文字列を含むURL全体をエンコードする場合に有効

3 encodeURIComponent

クエリ文字列のみをエンコード

エンコード方法の比較

関数	エンコード対象	エスケープ対象	スペース	用途
`escape`	すべての文字	予約文字（RFC 2396 以外）	`%20`	非推奨
`encodeURI`	URI全体	予約文字（RFC 3986）と一部の特殊文字	`+`	URL全体
`encodeURIComponent`	クエリ文字列	予約文字（RFC 3986）と一部の特殊文字	`+`	クエリ文字列のみ

使用例

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

const query = "q=日本語";
const encodedQuery = encodeURIComponent(query);
// 出力: q=%E6%97%A5%E6%9C%AC%E8%AA%9E

まとめ

escapeは非推奨なので、代わりにencodeURIまたはencodeURIComponentを使用
URL全体をエンコードするにはencodeURI
クエリ文字列のみをエンコードするにはencodeURIComponent
それぞれの関数の役割と用途を理解して、適切なエンコード方法を選択

escape

// 非推奨

const str = "日本語";
const escapedStr = escape(str);
console.log(escapedStr); // 出力: %E6%97%A5%E6%9C%AC%E8%AA%9E

encodeURI

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

encodeURIComponent

const query = "q=日本語";
const encodedQuery = encodeURIComponent(query);
console.log(encodedQuery); // 出力: q=%E6%97%A5%E6%9C%AC%E8%AA%9E

URLパラメータを含むオブジェクトを生成

const params = {
  name: "山田太郎",
  age: 30,
};

const encodedParams = Object.keys(params)
  .map((key) => `${key}=${encodeURIComponent(params[key])}`)
  .join("&");

console.log(encodedParams); // 出力: name=%E5%B1%B1%E7%94%B0%E5%A4%AA%E9%83%8E&age=30

URL全体をエンコードしてGETリクエストを送信

const url = "https://example.com/api?q=" + encodeURIComponent("日本語");

const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();

これらのサンプルコードは、実際の開発でエンコード処理をどのように活用できるかを示しています。

JavaScriptでクエリ文字列をエンコードする他の方法

URLSearchParamsインターフェースを使用すると、クエリ文字列をより簡単に操作できます。

const params = new URLSearchParams();
params.append("name", "山田太郎");
params.append("age", 30);

const encodedParams = params.toString();

console.log(encodedParams); // 出力: name=%E5%B1%B1%E7%94%B0%E5%A4%AA%E9%83%8E&age=30

ライブラリ

qsなど、クエリ文字列処理に特化したライブラリを使用する方法もあります。

const qs = require("qs");

const params = {
  name: "山田太郎",
  age: 30,
};

const encodedParams = qs.stringify(params);

console.log(encodedParams); // 出力: name=%E5%B1%B1%E7%94%B0%E5%A4%AA%E9%83%8E&age=30

自作関数

上記の方法以外にも、必要な機能に特化した自作関数を作成することもできます。

function encodeQuery(obj) {
  const keys = Object.keys(obj);
  return keys.map((key) => `${key}=${encodeURIComponent(obj[key])}`).join("&");
}

const params = {
  name: "山田太郎",
  age: 30,
};

const encodedParams = encodeQuery(params);

console.log(encodedParams); // 出力: name=%E5%B1%B1%E7%94%B0%E5%A4%AA%E9%83%8E&age=30