JavaScriptでURLエンコードされた文字列をデコードする際に使用する`decodeURI()`関数について、基本的な使い方から実践的な例まで詳しく解説します。

decodeURI()関数とは

`decodeURI()`は、URLエンコードされた文字列を元の文字列に戻すためのJavaScript組み込み関数です。主にURLに含まれる日本語や特殊文字をデコードする際に使用されます。

基本的な使い方

const encodedString = "https://example.com/%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF";
const decodedString = decodeURI(encodedString);
console.log(decodedString); // 出力: https://example.com/こんにちは

デコード可能な文字

`decodeURI()`は以下の文字をデコードすることができます：

  • 日本語などの非ASCII文字
  • スペース（%20）
  • その他のURLエンコードされた特殊文字

ただし、URLの構造を維持するために以下の文字はデコードされません：

`;,/?:@&=+$#`

エラーが発生するケース

不正なURLエンコード文字列を引数として渡した場合、`URIError`が発生します：

try {
    decodeURI('%E0%A4'); // 不正なエンコード
} catch (e) {
    console.error('デコードエラーが発生しました:', e);
}

decodeURIComponent()との違い

`decodeURI()`の代わりに`decodeURIComponent()`を使用するケースもあります。主な違いは以下の通りです：

  • `decodeURI()`: URLの構造を維持する文字（`;,/?:@&=+$#`）はデコードしない
  • `decodeURIComponent()`: すべての文字をデコードする
const url = "https://example.com?name=%E5%B1%B1%E7%94%B0&age=30";
console.log(decodeURI(url));           // https://example.com?name=山田&age=30
console.log(decodeURIComponent(url));   // https://example.com?name=山田&age=30

実践的な使用例

1. URLパラメータのデコード

const url = new URL('https://example.com?name=%E5%B1%B1%E7%94%B0');
const decodedName = decodeURI(url.searchParams.get('name'));
console.log(decodedName); // 出力: 山田

2. ファイル名のデコード

const filename = '%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88.pdf';
const decodedFilename = decodeURI(filename);
console.log(decodedFilename); // 出力: ドキュメント.pdf

まとめ

`decodeURI()`は、JavaScriptでURLエンコードされた文字列を安全にデコードするための重要な関数です。URLの構造を維持しながら日本語や特殊文字をデコードする必要がある場合に適しています。より完全なデコードが必要な場合は`decodeURIComponent()`の使用を検討してください。

エラー処理を適切に行い、不正な入力に対して適切に対応することで、より堅牢なアプリケーションを作成することができます。