JavaScriptでURIエンコードを行うために使用される`encodeURI()`関数について、基本的な使い方から実践的な例まで詳しく解説します。

encodeURI()とは

`encodeURI()`は、URLに含まれる特殊文字や日本語などの文字列をエンコードするためのJavaScript組み込み関数です。WebブラウザでURLとして使用できる形式に変換することができます。

基本的な使い方

const encodedURL = encodeURI(文字列);

使用例

// 日本語を含むURL
const url = "https://example.com/検索";
const encodedUrl = encodeURI(url);
console.log(encodedUrl);
// 出力: https://example.com/%E6%A4%9C%E7%B4%A2

encodeURI()が変換する文字

以下の文字は自動的にエンコードされます：

  • スペース
  • 日本語などの非ASCII文字
  • `<`、`>`などの特殊文字

ただし、以下の文字はエンコードされません：

  • アルファベット（A-Z, a-z）
  • 数字（0-9）
  • `-`、`_`、`.`、`!`、`~`、`*`、`'`、`(`、`)`
  • `;`、`,`、`/`、`?`、`:`、`@`、`&`、`=`、`+`、`$`、`#`

encodeURIComponent()との違い

`encodeURI()`は完全なURLをエンコードするために使用され、`encodeURIComponent()`はURLの一部（クエリパラメータなど）をエンコードするために使用されます。

// encodeURI()の例
console.log(encodeURI('https://example.com/path?name=山田'));
// 出力: https://example.com/path?name=%E5%B1%B1%E7%94%B0

// encodeURIComponent()の例
console.log(encodeURIComponent('https://example.com/path?name=山田'));
// 出力: https%3A%2F%2Fexample.com%2Fpath%3Fname%3D%E5%B1%B1%E7%94%B0

実践的な使用例

1. 検索クエリの作成

const searchTerm = "JavaScript 入門";
const baseUrl = "https://example.com/search";
const searchUrl = `${baseUrl}?q=${encodeURI(searchTerm)}`;

2. 日本語を含むパスの処理

const japanesePathName = "プログラミング/JavaScript";
const url = `https://example.com/${encodeURI(japanesePathName)}`;

エラー処理

`encodeURI()`を使用する際は、無効なURIをエンコードしようとした場合にエラーが発生する可能性があります。try-catchを使用して適切にエラーを処理することをお勧めします。

try {
  const encodedUrl = encodeURI(url);
} catch (error) {
  console.error('URIエンコードに失敗しました:', error);
}

まとめ

`encodeURI()`は、URLに含まれる特殊文字や日本語をエンコードするための便利な関数です。完全なURLをエンコードする際に使用し、URLの一部をエンコードする場合は`encodeURIComponent()`を使用することを推奨します。適切なエラー処理と組み合わせることで、より堅牢なWebアプリケーションを作成することができます。

この関数を使いこなすことで、国際化対応したWebアプリケーションの開発がより簡単になります。