JavaScript での URL エンコーディング — encodeURI、encodeURIComponent、ベストプラクティス

JavaScript には URL エンコーディング用の組み込み関数が 2 つあります：

encodeURIComponent()

A-Z a-z 0-9 - _ . ! ~ * ' ( ) を除くすべての文字をエンコードします。

const name = 'John Doe'
const query = '?name=' + encodeURIComponent(name)
// ?name=John%20Doe

個々のクエリパラメータの値、パスセグメント、または URL の一部になるデータをエンコードするには、これを使用します。

encodeURI()

上記の文字に加えて、予約済み URL 文字（: / ? # [ ] @ ! $ & ' ( ) * + , ; =）を除くすべての文字をエンコードします。

const url = 'https://example.com/search?q=hello world'
const encoded = encodeURI(url)
// https://example.com/search?q=hello%20world

完全な URL 文字列をエンコードするときはこれを使用します。

よくある落とし穴

// 誤り — URL 構造を壊します
encodeURIComponent('https://example.com/page')
// https%3A%2F%2Fexample.com%2Fpage

// 正しい — 構造を保持します
encodeURI('https://example.com/page')
// https://example.com/page

当サイトのURL エンコーダ・デコーダツールで、これらの関数をライブでテストしてみましょう。