JavaScriptで簡単に理解するURLエンコード・デコードの基本ガイド！初心者でもわかるencodeURIとdecodeURIの使い方

1. URLエンコードとは何か？

1. URLエンコードとは何か？

URLエンコードとは、URLに使えない文字を安全な形式に変換することです。例えば日本語やスペース、記号などは直接URLに使えないため、%**という形に置き換えます。JavaScriptではencodeURIやencodeURIComponentがこの処理に使われます。

2. encodeURIの基本的な使い方

2. encodeURIの基本的な使い方

encodeURIは、URL全体を安全に送信できる形式に変換します。主にURL全体を変換する場合に使います。例えば日本語を含むURLを送るときです。

const url = "https://example.com/検索?query=JavaScript 入門";
const encodedUrl = encodeURI(url);
console.log(encodedUrl);

https://example.com/%E6%A4%9C%E7%B4%A2?query=JavaScript%20%E5%85%A5%E9%96%80

このように日本語やスペースが安全な文字に変換されます。

3. encodeURIComponentの違いと使い方

3. encodeURIComponentの違いと使い方

encodeURIComponentはURLの一部、例えばパラメータだけを安全にする場合に使います。URL全体を変換すると不都合な場合があります。

const param = "JavaScript 入門";
const encodedParam = encodeURIComponent(param);
console.log(encodedParam);

JavaScript%E5%85%A5%E9%96%80

URL全体ではなく、クエリパラメータなど一部分の文字列を変換する時に便利です。

4. decodeURIで元のURLに戻す方法

4. decodeURIで元のURLに戻す方法

decodeURIは、encodeURIで変換したURLを元に戻すための関数です。表示用や処理用に元の文字列に復元できます。

const encodedUrl = "https://example.com/%E6%A4%9C%E7%B4%A2?query=JavaScript%20%E5%85%A5%E9%96%80";
const decodedUrl = decodeURI(encodedUrl);
console.log(decodedUrl);

https://example.com/検索?query=JavaScript 入門

これで元の日本語やスペースを含むURLに戻ります。

5. decodeURIComponentでパラメータを復元する

5. decodeURIComponentでパラメータを復元する

同じように、encodeURIComponentで変換した文字列を元に戻すにはdecodeURIComponentを使います。

const encodedParam = "JavaScript%E5%85%A5%E9%96%80";
const decodedParam = decodeURIComponent(encodedParam);
console.log(decodedParam);

JavaScript 入門

パラメータ単位で安全にエンコード・デコードが可能です。

6. 実際のURL送信での活用例

6. 実際のURL送信での活用例

フォームから検索キーワードをURLで送る場合を考えます。日本語や特殊文字が含まれると正しく送信できません。encodeURIComponentで安全に変換して送ります。

const searchWord = "JavaScript 基礎";
const url = "https://example.com/search?query=" + encodeURIComponent(searchWord);
console.log(url);

https://example.com/search?query=JavaScript%20%E5%9F%BA%E7%A4%8E

このようにしてURLエンコードを使うと、どんな文字でも安全に送信できます。

7. URLエンコード・デコードの注意点

7. URLエンコード・デコードの注意点

注意点として、encodeURIはURL全体向け、encodeURIComponentはパラメータ向けで使い分けることが重要です。また、二重にエンコードしないように注意しましょう。デコードも同様に対応する関数を使います。

const wrongEncoding = encodeURIComponent(encodeURIComponent("JavaScript 入門"));
console.log(decodeURIComponent(wrongEncoding)); // まだ %E5%85%A5%E9%96%80 が残る

JavaScript%E5%85%A5%E9%96%80

二重にエンコードするとデコードが1回では戻らなくなるので注意してください。

8. まとめの前に実践で覚えるポイント

8. まとめの前に実践で覚えるポイント

JavaScriptでURLを扱うときは、まず何を送るのかを考え、URL全体かパラメータかで関数を選びます。encodeURIとdecodeURIは全体用、encodeURIComponentとdecodeURIComponentはパラメータ用です。文字化けを防ぎ、安全に通信するための基本として覚えておきましょう。

const baseUrl = "https://example.com/search";
const keyword = "プログラミング 入門";
const finalUrl = baseUrl + "?q=" + encodeURIComponent(keyword);
console.log(finalUrl);

https://example.com/search?q=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%20%E5%85%A5%E9%96%80

このようにして正しくURLを扱えることが、Web開発の基本です。

まとめ

まとめ

本記事では、JavaScriptでのURLエンコードとデコードの基本をわかりやすく解説しました。URLには半角英数字以外に日本語やスペース、特殊文字を含めることができません。そのため、encodeURIやencodeURIComponentを使って安全に文字列を変換し、逆にdecodeURIやdecodeURIComponentで元の文字列に復元する方法を学びました。encodeURIはURL全体を対象に変換する場合に使用し、encodeURIComponentはURLパラメータなど一部分を変換する際に便利です。また、二重にエンコードすると正しくデコードできない点にも注意が必要です。フォームやリンクで日本語や特殊文字を扱う際、これらの関数を正しく使うことで文字化けや通信エラーを防ぐことができます。

実践で覚えるポイント

• URL全体の変換にはencodeURI、パラメータの変換にはencodeURIComponentを使う。
• デコードはそれぞれdecodeURI、decodeURIComponentを使う。
• 二重にエンコードしないよう注意する。
• フォームや検索キーワードなど動的に生成するURLでも安全に通信できる。
• 日本語や特殊文字を含むURLを扱う際の文字化け対策として必須。

 const searchKeyword = "JavaScript 入門"; const url = "https://example.com/search?query=" + encodeURIComponent(searchKeyword); console.log(url);

 https://example.com/search?query=JavaScript%20%E5%85%A5%E9%96%80

このコード例のように、パラメータを安全にエンコードするだけで、ユーザーが入力した日本語やスペースを含む文字列を正しく送信できます。WebアプリケーションやAPI連携の際にも応用可能です。