JavaScriptのencodeURIComponent()関数：URIコンポーネントのエンコード

概念と使用方法

encodeURIComponent()関数は
URLの特定の部分（例：検索キーワード、ファイル名、パラメータ値など）に使用される文字を安全にエンコードするために利用されます。

この関数はURL全体ではなく、クエリ文字列の値やキー、path segmentなどのURI Componentデータを安全にエンコードする際に有効です。

特徴

encodeURIComponent()関数は、URLにおいてプロトコル、ドメイン、パス区切り文字（/、:、?、&、#）など特別な意味を持つ文字もエンコードします。
ほとんどの特殊文字をエンコードするため、URI Component（例：クエリパラメータ値など）をエンコードする場合に有効です。
この関数は/、:、?、&、=などほとんどの特殊文字をエンコードするため、実際にURL構造を保持する必要がある場合、つまりURL全体をエンコードする用途には適していません。これらの文字はURLにおいてプロトコル、パス、クエリ、パラメータ区切りなどの構造を定義する重要な区切り記号であり、単なる文字ではなくURL文法の要素です。これらをすべてエンコードしてしまうと、ブラウザはその文字列をもはや有効なURLとして解釈できなくなります。（ただし「単なる文字列データとして保存」したり「送信用データとして利用」する場合には全く問題ありません。むしろそのような用途では安全にエンコードする手段となります。）

覚えておきましょう！
URI ComponentではなくURL全体をエンコードする場合には、encodeURI()関数の方が適しています。

基本の例

JavaScript

const uriComponent = "https://www.example.com/search?q=JavaScript & Web Development";
const encodedUriComponent = encodeURIComponent(uriComponent);

console.log(encodedUriComponent);
// 出力: "https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3DJavaScript%20%26%20Web%20Development"

URI Componentの説明

URI（Uniform Resource Identifier）を構成する要素を指します。URIは一般的に、次の4つの主要な要素で構成されます。

Scheme（スキーム）: プロトコルを表します。例えば、HTTP、HTTPS、FTP などがあります。
Authority（オーソリティ）: ホスト名、ドメイン名、ポート番号などを表します。
Path（パス）: リソースの位置を表します。
Query（クエリ）: クエリ文字列を表します。

例えば、次のURLは、以下の4つの要素で構成されています。

Scheme: https
Authority: www.example.com
Path: /path
Query: query=value

URI Componentは、URIを識別し、URIを通じてリソースにアクセスできるようにするために使用されます。

encodeURIComponent()関数は、URI Componentの中でデータを表す部分をエンコードします。
この構成要素には、クエリ文字列の値、パスの一部、ハッシュ（フラグメント）などが含まれる場合があります。この関数は、URI構成要素内に存在する特殊文字をエンコードし、安全な形式に変換します。例えば、&、=、?などの文字をエンコードすることで、URIが正しく解釈されるようにサポートします。この関数は主に、URIのデータを安全に送信するために使用されます。

encodeURIComponent()関数の形式は、次の通りです。

構文

パラメータ

encodeURIComponent()関数のパラメータ
`uriComponent`	URI構成要素を表す文字列です。

返り値

提供された文字列を表す新しい文字列は、uriComponentとしてURIコンポーネントにエンコードされます。

`encodeURIComponent()`関数でエンコードされない文字

アルファベット文字（A-Z、a-z）
数字（0-9）
-
_
.
!
~
*
'
(
)

この一覧に記載されていないその他の文字（空白を含む）は、すべて % の後に対応する文字のユニコード値を16進数で表した形式でエンコードされます。

encodeURIComponent()関数は、encodeURI()関数と比較すると、より多くの特殊文字をエンコードします。（厳密には正確な表現ではありませんが）そのため、一般的に encodeURIComponent() 関数は、特殊文字を含むURLをエンコードする と言われます。

JavaScriptのencodeURI()関数

例

JavaScript

const searchQuery = "JavaScript & Web Development";
const page = 1;

const encodedQuery = encodeURIComponent(searchQuery);
const encodedPage = encodeURIComponent(page);

const baseUrl = "https://example.com/search";
const finalUrl = `${baseUrl}?q=${encodedQuery}&page=${encodedPage}`;

console.log(finalUrl);
// 出力: "https://example.com/search?q=JavaScript%20%26%20Web%20Development&page=1"

この例では、検索語 searchQuery とページ番号 page を URIコンポーネントと見なし、それぞれの値を encodeURIComponent() 関数でエンコードします。その後、この値を基に安全なURIを生成して出力します。このとき、& 記号や = 記号はURIのクエリ文字列で特別な意味を持つため、encodeURIComponent() 関数でエンコードされ、安全に使用されます。