導入
Web開発において、ブラウザのアドレスバーやAPIリクエストのURLに日本語や特殊文字を含めたい場面は多々あります。しかし、URLには使える文字が制限されており、そのまま含めると予期せぬエラーや文字化けの原因になります。この課題を解決するのがJavaScriptの encodeURI です。適切に使うことで、安全で堅牢なWebアプリケーションを構築できるようになります。
基礎知識
URLには「予約文字」と呼ばれる、特定の意味を持つ文字（例えば ? や & や / など）が存在します。これらをそのままデータとしてURLに含めてしまうと、サーバー側は「これはデータの値なのか、それともクエリの区切りなのか」を判別できなくなります。
encodeURI は、URL全体をエンコード（符号化）して、ブラウザが正しく解釈できる「URLとして安全な文字列」に変換するための関数です。似た関数に encodeURIComponent がありますが、encodeURI は「URL全体を構築する」際に使用し、一部のURL予約文字（: / ? # など）は変換せずに保持するという特徴があります。
実装/解決策
encodeURI を使う際は、まずベースとなるURLと、動的に追加したいパラメータを切り分けます。パラメータ部分には必要に応じて encodeURIComponent を使い、URL全体を encodeURI で囲むことで、不正な文字が含まれていても安全なURLを作成できます。
サンプルプログラム
以下のコードは、検索キーワードをURLに含める際の標準的な実装例です。
// 検索キーワード（日本語やスペースが含まれる）
const keyword = "フロントエンド 豆知識";
// URLのベース部分
const baseUrl = "https://example.com/search?q=";
// 1. まずパラメータ部分だけを個別にエンコードする
const encodedKeyword = encodeURIComponent(keyword);
// 2. URL全体を構築し、encodeURIで保護する
// （既にエンコード済みのクエリが含まれるURL全体を安全な形に整えます）
const finalUrl = encodeURI(baseUrl + encodedKeyword);
// 結果を表示
console.log("生成されたURL:", finalUrl);
// 出力: https://example.com/search?q=%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%20%E8%B1%86%E7%9F%A5%E8%AD%98
// ブラウザのAPIなどで直接URLを扱う際にこの finalUrl を使用します
応用・注意点
現場で最も陥りやすい罠は、encodeURI と encodeURIComponent の使い分けです。
encodeURI はURL全体を対象にしますが、クエリパラメータの「値」の中に ? や & が含まれている場合、encodeURI ではそれらが変換されず、URLの構造が壊れてしまうことがあります。
・URL全体を扱うなら：encodeURI
・URLのパラメータ部分（値）だけを扱うなら：encodeURIComponent
この使い分けを意識するだけで、URLに関する不具合の大部分を防ぐことができます。また、パスの一部に日本語が含まれる場合も、encodeURI を通すことで、サーバー側が正しく解釈できるエンコード形式（UTF-8）に変換されるため、ぜひ活用してください。