URLエンコード、デコードとは
・URLエンコードとは、URLに使用できない文字が含まれる場合に、使用できる文字に変換する処理のことです。
・URLデコードは、逆でURLエンコードされた文字を元に戻す処理のことです。
・URLエンコードおよびデコードは、データをクエリ文字列としてWebサーバーに送信する場合などで使われます。
・JavaScriptでは、URLエンコードおよびデコードを行うための関数をグローバル関数として用意しています。
以下、URLエンコードおよびデコードを行うグローバル関数（encodeURIComponent、encodeURI、decodeURIComponent、decodeURI）のエンコード、デコードの処理の違いになります。
| 関数名 | 説明 |
|---|---|
| encodeURIComponent(引数) | 引数の文字列をURLエンコードする。 ただし、英数字と「-」、「_」、「.」、「!」、「˜」、「*」、「'」、「(」、「)」は対象外 |
| encodeURI(引数) | 引数の文字列をURLエンコードする。 encodeURIComponent(引数)で対象外の文字に加え、 「/」、「#」、「&」、「@」、「:」、「;」、「,」、「+」、「$」、「?」、「=」も対象外 |
| decodeURIComponent(引数) | URLエンコードされた文字列をデコードする。 対象は、encodeURIComponent(引数)でURLエンコードされる文字列 |
| decodeURI(引数) | URLエンコードされた文字列をデコードする。 対象は、encodeURI(引数)でURLエンコードされる文字列 |
使い方例
HTML↓↓（Scriptタグに上記グローバル関数を使った処理を記載）
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<script>
var url1 = "from-data=2022/06/11&to-date=2022/06/11";
var url2 = encodeURIComponent(url1);
console.log(url2);//「from-data%3D2018%2F07%2F01%26to-date%3D2018%2F07%2F31」が表示される
</script>
</body>
</html>
上記のHTMLをアクセスしたときのデベロッパーツールのコンソール結果↓↓
※上記の例では、「/」や「＆」がエンコードされる関数を選択する必要があるため、encodeURIComponentメソッドを利用しました。って感じで利用する。