シンプルで使いやすいURLエンコード・デコードツールを作ってみた

# はじめに

こんにちは、システム開発チーム「presto」です。
開発業務（プログラミング中）に「こんなツール、あんなツールが身近なところにあったらいいなぁ」と思ったことはありませんか？

ここではそんなツールをVuetifyを使って作ってみたので紹介させてください。

# URLエンコード・デコードツール

今回紹介させていただくのは、[URLエンコード・デコードツール](https://web-tools.presto-service.com/url-encode-decode)です。

画面は以下の通りです。

![URLエンコード・デコードツール](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227155/4f43f0ce-9907-9389-d238-2e57020bdf62.png "URLエンコード・デコードツール")

# 使い方

使い方は以下の通りです。
1. 変換前のURL文字列を入力する
2. 変換方法を選択する
3. 結果確認

## 1. 変換前のURL文字列を入力する

![変換前のURL文字列を入力する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227155/a85b76d0-4f32-2588-2c50-4549b977a838.png "変換前のURL文字列を入力する")

例として、以下を入力します。

```
https://あいうえお.com/
```

![変換前のURL文字列を入力する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227155/afeae4dc-fd22-ddbd-b791-4f0857565b03.png "変換前のURL文字列を入力する")

## 2. 変換方法を選択する

![変換方法を選択する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227155/4a22cf06-9495-b647-eed8-8f8a05cd61ea.png "変換方法を選択する")

変換方法は以下の4通りがあります。
エンコードもしくはデコードのそれぞれを選んでください。

| 変換方法 | 概要 |
| :- | :- |
| EncodeURI | URI (Uniform Resource Identifier; 統一資源識別子) をエンコードし、各文字のインスタンスをそれぞれ UTF-8 符号の文字を表す 1 個から 4 個のエスケープシーケンスに置き換えます (サロゲート文字のペアのみ 4 個のエスケープシーケンスになります)。<br>[参考 encodeURI()｜MDN web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)<br><br>以下、エンコードされない文字列<br>A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # |
| EncodeURIComponent | URI (Uniform Resource Identifier) 構成要素を特定の文字を UTF-8 文字エンコーディングで表された 1 個から 4 個のエスケープシーケンスに置き換えることでエンコードします (サロゲートペアで構成される文字のみ 4 個のエスケープシーケンスになります)。<br>[参考 encodeURIComponent()｜MDN web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)<br><br>以下、エンコードされない文字列<br>A-Z a-z 0-9 - _ . ! ~ * ' ( ) |
| DecodeURI | encodeURI() 関数あるいは同様のルーチンによって事前に作成された URI (Uniform Resource Identifier; 統一資源識別子) をデコードします。<br>[参考 decodeURI()｜MDN web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/decodeURI) |
| DecodeURIComponent | encodeURIComponent() 関数あるいは同様のルーチンによって事前に作成された URI (Uniform Resource Identifier; 統一資源識別子) の構成要素をデコードします。<br>[参考 encodeURIComponent()｜MDN web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) |

## 3. 結果確認

上記例でEncodeURLした場合、以下のような値が表示されます。

```
https://%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A.com/
```

![エンコード結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227155/da35f0f7-5b7e-7c8b-4580-27c9ff5b9685.png "エンコード結果")

エンコード済みの文字列をデコードする場合、以下のような値が表示されます。

```
https://あいうえお.com/
```

![デコード結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227155/6cf8a417-d905-41a7-b111-860382312ded.png "デコード結果")

# まとめ

今回は、[URLエンコード・デコードツール](https://web-tools.presto-service.com/url-encode-decode)の紹介をさせていただきました。

他にも、私達が作った[presto web tools](https://web-tools.presto-service.com/)の紹介もしていますので、良ければ合わせてご覧ください。

https://qiita.com/presto/items/cd5f4cd6e3f364025606

https://qiita.com/presto/items/62e962c1f50572f8d399

https://qiita.com/presto/items/2d79f8208f78685ff990

https://qiita.com/presto/items/21a6713a108da35075c0

https://qiita.com/presto/items/8dfa800eb8d3008686b1

今後もよろしくお願いします。
ありがとうございましたー！