JavaScriptのencodeURI()・decodeURI()とコンポーネント関数の違いと使い方

JavaScriptには、URL（URI）内の文字を安全に扱うためのエンコード／デコード用の組み込み関数が4種類用意されています。それぞれの役割と違いを正しく理解することは、Web開発において非常に重要です。

encodeURI() … URI全体をエンコードします。ただし、カンマ（,）、スラッシュ（/）、疑問符（?）、コロン（:）、アットマーク（@）、アンパサンド（&）、イコール（=）、プラス（+）、ドル（$）、シャープ（#）といった特殊文字（予約文字）はエンコードされません。
encodeURIComponent() … URIの一部（クエリパラメータなど）をエンコードします。encodeURI()で除外される上記の特殊文字も含め、ほぼすべての特殊文字がエンコード対象になります。
decodeURI() … encodeURI()によって生成されたURIを元の形式に復元（デコード）します。
decodeURIComponent() … encodeURIComponent()によって生成されたURIコンポーネントを元の形式に復元します。

encodeURI() と encodeURIComponent() の違い

両者の最大の違いは、予約文字（, / ? : @ & = + $ # など）をエンコードするかどうかという点です。

関数名	主な用途	予約文字の扱い
encodeURI()	URL全体のエンコード	そのまま保持される
encodeURIComponent()	URLの一部（パラメータ値など）のエンコード	すべてエンコードされる
decodeURI()	encodeURI()の結果を復元	―
decodeURIComponent()	encodeURIComponent()の結果を復元	―

基本的には、URL全体を処理する場合は encodeURI() を、クエリパラメータの値などURLの構成要素を個別に処理する場合は encodeURIComponent() を使用します。

サンプルコード

以下は、encodeURI()、decodeURI() およびそのコンポーネント関数を使った実装例です。ボタンをクリックすると、URLのエンコード／デコード結果が画面に表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .encode,
    .decode {
        font-size: 18px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>encodeURI()、decodeURI() およびそのコンポーネント関数</h1>
<button class="encodeUri">URIをエンコード</button>
<button class="decodeUri">URIをデコード</button>
<button class="encodeUriComponent">URIコンポーネントをエンコード</button>
<button class="decodeUriComponent">URIコンポーネントをデコード</button>
<div class="encode"></div>
<div class="decode"></div>
<p>上のボタンをクリックすると、URIのエンコードまたはデコードが実行されます</p>
<script>
    let decodeEle = document.querySelector(".decode");
    let encodeEle = document.querySelector(".encode");
    let url = "https://www.google.com/sample%20link/?img=91gf.jpg&amp;size=451px";
    let encodeUrl;
    document.querySelector(".encodeUri").addEventListener("click", () => {
        encodeUrl = encodeURI(url);
        encodeEle.innerHTML = "エンコード後のURL = " + encodeUrl;
    });
    document.querySelector(".decodeUri").addEventListener("click", () => {
        decodeEle.innerHTML = "デコード後のURL = " + decodeURI(encodeUrl);
    });
    let encodeComponent;
    document
    .querySelector(".encodeUriComponent")
    .addEventListener("click", () => {
        encodeComponent = encodeURIComponent(url);
        encodeEle.innerHTML = "エンコード後のURL = " + encodeComponent;
    });
    document
    .querySelector(".decodeUriComponent")
    .addEventListener("click", () => {
        decodeEle.innerHTML =
        "デコード後のURL = " + decodeURIComponent(encodeComponent);
    });
</script>
</body>
</html>

実行結果

JavaScriptのencodeURI()・decodeURI()とコンポーネント関数の違いと使い方

「URIをエンコード」ボタンをクリックした後、「URIをデコード」ボタンをクリックすると、以下のようにエンコードされたURLと、それを復元したURLがそれぞれ表示されます。

JavaScriptのencodeURI()・decodeURI()とコンポーネント関数の違いと使い方

JavaScriptのエラー処理と例外処理の実装例をわかりやすく解説

JavaScriptでカスタム画像スライダーを作成する方法【初心者向け解説付き】

JavaScriptのcall()とapply()で関数を呼び出す方法をわかりやすく解説
JavaScriptには、関数の呼び方を柔軟に制御できるメソッドとして call() と apply() が用意されています。どちらも「this」の値を指定しながら関数を実行できる点は共通していますが、引数の渡し方が異なります。 call() と apply() の違い call(): 引数を個別の値（カンマ区切り）として渡します。 apply(): 引数を配列（または配列風オブジェクト）として一括で渡します。それでは、実際に両方のメソッドを使って関数を呼び出すサンプルコードを見てみましょう。サンプルコード <!DOCTYPE html> <html lang=ja>
JavaScriptのアクセサプロパティとその属性を徹底解説！getterとsetterの使い方
JavaScriptにおけるアクセサプロパティ（accessor property）は、オブジェクトの値を読み書きする際に、関数（getter・setter）を実行できる特殊なプロパティです。単に値を保持するデータプロパティとは異なり、値の取得や設定のタイミングで独自の処理を挟むことができるため、データの検証や加工などに非常に便利です。アクセサプロパティの4つの属性アクセサプロパティには、以下の4つの属性があります。 get：プロパティが読み取られる際に呼び出される関数です。引数は取りません。 set：プロパティに値が設定される際に呼び出される関数です。引数は1つだけ受け取ります。