はじめに

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

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

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

今回紹介させていただくのは、URLエンコード・デコードツールです。

画面は以下の通りです。

使い方は以下の通りです。

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

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

変換方法は以下の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

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

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

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

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

今回は、URLエンコード・デコードツールの紹介をさせていただきました。

他にも、私達が作ったpresto web toolsの紹介もしていますので、良ければ合わせてご覧ください。

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