言語学習

JavaScriptで使えるencodeURI関数の使い方7選

JavaScriptでURLを操作する際に便利なencodeURI関数。特に、日本語や特殊文字が含まれるURLを安全に扱うために欠かせない関数です。この記事では、encodeURI関数の基本的な使い方から、具体例を交えた7の使い道を紹介します。備忘録としてまとめたので、使う場面が来たらすぐに活用してください！

1. encodeURIとは？

encodeURIは、URI（Uniform Resource Identifier）の形式を保ちながら、不正な文字（日本語やスペースなど）を安全にエンコードする関数です。
例えば、「/」や「:」といったURIの構造的に重要な文字はそのまま残し、その他の特殊文字をパーセントエンコーディングします。

例：

encodeURI(URI文字列);

この変換により、ブラウザやサーバーがURLを正しく解釈できます。

2. 基本的な使い方

日本語や特殊文字を含むURLは、未エンコードのまま使用するとエラーや誤動作の原因になります。encodeURIでエンコードすることで、安全なURLに変換できます。

詳細解説： 日本語（例えば「検索」）はマルチバイト文字です。そのままではURLとして使用できないため、UTF-8形式でエンコードしてURLに適した形式（例：%E6%A4%9C%E7%B4%A2）に変換されます。

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

3. スペースのエンコード

URLにスペース（空白）が含まれる場合、そのままだと認識できません。encodeURIはスペースを%20にエンコードします。

例：

console.log(encodeURI("https://example.com/query with spaces"));
// 結果: https://example.com/query%20with%20spaces

ポイント：

  • %20はスペースのエンコード結果。
  • URLにスペースが含まれるケースは多いので、必ずエンコードする習慣をつけましょう。

4. 日本語のエンコード

日本語を含むURLをそのまま使うと、ブラウザで正しく処理できないことがあります。encodeURIを使えば、日本語文字列を安全にエンコードできます。

例：

console.log(encodeURI("https://example.com/こんにちは"));
// 結果: https://example.com/%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF

ポイント：

  • 日本語の文字列はUTF-8形式でエンコードされ、ブラウザやサーバーで正確に認識されます。
  • 日本語を含むサイトでは必須の処理。

5. 特殊文字を含むURL

encodeURIは一部の特殊文字（:, /, ?, &, =, #など）をエンコードしません。これにより、URLの構造を損なわずに使用できます。

例：

console.log(encodeURI("https://example.com/?name=John&Doe"));
// 結果: https://example.com/?name=John&Doe

ポイント：

  • URLの一部として認識される文字はエンコードされず、そのまま利用されます。
  • クエリパラメータやアンカー（#）を扱う場合に便利。

6. パスだけをエンコードする

URL全体ではなく、部分的にエンコードしたい場合は、エンコード対象を明確に指定します。

例：

const path = "日本語のページ";
console.log(`https://example.com/${encodeURI(path)}`);
// 結果: https://example.com/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8

ポイント：

  • ドメイン名や固定部分をエンコードせずに動的パスのみエンコード可能。
  • 柔軟なURL生成に役立ちます。

7. クエリパラメータをエンコード

クエリパラメータ（例：検索キーワード）に特殊文字やスペースが含まれる場合でも、エンコードして安全に使用できます。

例：

const queryParam = "検索 クエリ";
console.log(`https://example.com/?q=${encodeURI(queryParam)}`);
// 結果: https://example.com/?q=%E6%A4%9C%E7%B4%A2%20%E3%82%AF%E3%82%A8%E3%83%AA

総評

encodeURIは、URL全体を操作する際に非常に便利で、特に日本語や特殊文字が絡む場面では必須なので、これらの使い方を覚えておくと、実際の開発で大いに役立つでしょう。

どのケースで使用するかをイメージしながら、ぜひプロジェクトに取り入れてみてください！