はじめに
こんにちは、システム開発チーム「presto」です。
開発業務（プログラミング中）に「こんなツール、あんなツールが身近なところにあったらいいなぁ」と思ったことはありませんか？
ここではそんなツールをVuetifyを使って作ってみたので紹介させてください。
URLエンコード・デコードツール
今回紹介させていただくのは、URLエンコード・デコードツールです。
画面は以下の通りです。
使い方
使い方は以下の通りです。
- 変換前のURL文字列を入力する
- 変換方法を選択する
- 結果確認
1. 変換前のURL文字列を入力する
例として、以下を入力します。
https://あいうえお.com/
2. 変換方法を選択する
変換方法は以下の4通りがあります。
エンコードもしくはデコードのそれぞれを選んでください。
| 変換方法 | 概要 |
|---|---|
| EncodeURI | URI (Uniform Resource Identifier; 統一資源識別子) をエンコードし、各文字のインスタンスをそれぞれ UTF-8 符号の文字を表す 1 個から 4 個のエスケープシーケンスに置き換えます (サロゲート文字のペアのみ 4 個のエスケープシーケンスになります)。 参考 encodeURI()｜MDN web Docs 以下、エンコードされない文字列 A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # |
| EncodeURIComponent | URI (Uniform Resource Identifier) 構成要素を特定の文字を UTF-8 文字エンコーディングで表された 1 個から 4 個のエスケープシーケンスに置き換えることでエンコードします (サロゲートペアで構成される文字のみ 4 個のエスケープシーケンスになります)。 参考 encodeURIComponent()｜MDN web Docs 以下、エンコードされない文字列 A-Z a-z 0-9 - _ . ! ~ * ' ( ) |
| DecodeURI | encodeURI() 関数あるいは同様のルーチンによって事前に作成された URI (Uniform Resource Identifier; 統一資源識別子) をデコードします。 参考 decodeURI()｜MDN web Docs |
| DecodeURIComponent | encodeURIComponent() 関数あるいは同様のルーチンによって事前に作成された URI (Uniform Resource Identifier; 統一資源識別子) の構成要素をデコードします。 参考 encodeURIComponent()｜MDN web Docs |
3. 結果確認
上記例でEncodeURLした場合、以下のような値が表示されます。
https://%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A.com/
エンコード済みの文字列をデコードする場合、以下のような値が表示されます。
https://あいうえお.com/
まとめ
今回は、URLエンコード・デコードツールの紹介をさせていただきました。
他にも、私達が作ったpresto web toolsの紹介もしていますので、良ければ合わせてご覧ください。
今後もよろしくお願いします。
ありがとうございましたー！