JavaScript: decodeURIComponent と decodeURI の違いを徹底解説

2024-06-22

JavaScriptにおける decodeURIComponent と decodeURI の違い

decodeURIComponent と decodeURI は、どちらも JavaScript でエンコードされた URL 文字列を元の形式に戻す関数です。しかし、それぞれの関数には微妙な違いがあり、適切な場面で使用することが重要です。

詳細

decodeURIComponent
- URL コンポーネント（クエリパラメータなど）をエンコード解除します。
- :, /, ?, #, @, &, =, +, $, # などの特殊記号もエンコード解除します。
- 主に、URL コンポーネントの一部をエンコード解除する場合に使用されます。
decodeURI
- 完全な URL をエンコード解除します。
- :, /, ?, # などの特殊記号はエンコード解除 しません。

例

const encodedURIComponent = "https%3A%2F%2Fwww.example.com%2Ffoo%20bar%2F";
const decodedURIComponent = decodeURIComponent(encodedURIComponent);
console.log(decodedURIComponent); // 出力: https://www.example.com/foo bar/

const encodedURI = "https://www.example.com/foo%20bar/";
const decodedURI = decodeURI(encodedURI);
console.log(decodedURI); // 出力: https://www.example.com/foo%20bar/

注意点

エンコード対象の文字列が間違っていると、予期しない結果になる可能性があります。
適切な関数を選択することが重要です。
URL 全体エンコード解除には decodeURI、URL コンポーネントエンコード解除には decodeURIComponent を使用しましょう。

上記以外にも、JavaScript で URL を扱うための便利な関数がいくつか用意されています。例えば、

encodeURIComponent: URL コンポーネントをエンコードする
encodeURI: URL をエンコードする
URIComponent: エンコードされた URL コンポーネントを表す文字列
URI: エンコードされた URL を表す文字列

以上、decodeURIComponent と decodeURI の違いについて解説しました。理解を深めるために、実際のコード例などを試してみることをおすすめします。

URL コンポーネントのエンコード解除

const encodedURIComponent = "https%3A%2F%2Fwww.example.com%2Ffoo%20bar%2F";

// URL コンポーネントのみエンコード解除
const decodedURIComponent = decodeURIComponent(encodedURIComponent);
console.log(decodedURIComponent); // 出力: https://www.example.com/foo bar/

// URL 全体エンコード解除しようとすると、誤った結果になる
const decodedURI = decodeURI(encodedURIComponent);
console.log(decodedURI); // 出力: https://www.example.com/foo%20bar/

エンコードされたパラメータのデコード

const encodedURL = "https://www.example.com/search?q=%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84";

// エンコードされたパラメータ (q) のみデコード
const decodedURIComponent = decodeURIComponent(encodedURL.split('?')[1]);
console.log(decodedURIComponent); // 出力: 日本語

// URL 全体エンコード解除しようとすると、誤った結果になる
const decodedURI = decodeURI(encodedURL);
console.log(decodedURI); // 出力: https://www.example.com/search?q=%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84

特殊記号を含むパスのデコード

const encodedURL = "https://www.example.com/path/with/special/%E3%83%BC%E3%83%89";

// URL コンポーネントのみエンコード解除
const decodedURIComponent = decodeURIComponent(encodedURL);
console.log(decodedURIComponent); // 出力: https://www.example.com/path/with/special/ラーメン

// URL 全体エンコード解除しようとすると、誤った結果になる
const decodedURI = decodeURI(encodedURL);
console.log(decodedURI); // 出力: https://www.example.com/path/with/special/%E3%83%BC%E3%83%89

これらの例を通して、decodeURIComponent と decodeURI の違いを理解し、それぞれの使い分けを正しく行うことができるようにしましょう。

JavaScript で URL をエンコード・デコードするその他の方法

正規表現を使用して、URL エンコード・デコードを行うことができます。以下の例は、decodeURIComponent と同じ機能を正規表現で実現したものです。

const encodedURIComponent = "https%3A%2F%2Fwww.example.com%2Ffoo%20bar%2F";

const decodedURIComponent = encodedURIComponent.replace(/%(..)/g, function(match, hex) {
  return String.fromCharCode(parseInt(hex, 16));
});

console.log(decodedURIComponent); // 出力: https://www.example.com/foo bar/

第三者ライブラリ

URL エンコード・デコードを専門に行う、様々な第三者ライブラリが存在します。代表的なライブラリと、その使用方法を以下に紹介します。

const encodedURIComponent = "https%3A%2F%2Fwww.example.com%2Ffoo%20bar%2F";
const decodedURIComponent = URI.decode(encodedURIComponent);
console.log(decodedURIComponent); // 出力: https://www.example.com/foo bar/

const encodedURIComponent = "https%3A%2F%2Fwww.example.com%2Ffoo%20bar%2F?q=%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84";
const parsedURL = qs.parse(encodedURIComponent);
const decodedParam = parsedURL.q;
console.log(decodedParam); // 出力: 日本語

これらのライブラリは、decodeURIComponent や decodeURI よりも、より多くの機能を提供している場合が多いです。複雑な URL エンコード・デコード処理を行う場合は、これらのライブラリを利用することを検討しましょう。

手動デコード

URL エンコードは、RFC 3986 https://www.ietf.org/participate/lists/ で定義されています。この仕様に基づいて、URL を手動でエンコード・デコードすることも可能です。

しかし、この方法は複雑で手間がかかります。よほど特殊なケースでない限り、他の方法を使用することをおすすめします。

decodeURIComponent と decodeURI は、基本的な URL エンコード・デコードを簡単に行うための便利な関数です。しかし、より複雑な処理や、特殊なケースには、正規表現、第三者ライブラリ、手動デコードなどの方法も検討しましょう。

それぞれの方法の特徴とメリット・デメリットを理解し、状況に合わせて適切な方法を選択することが重要です。

javascript