文字列のエンコード・デコードについては、「URLエンコードオンライン」みたいにググったらなんぼでもツールが出てくるのですが、だいたいどこのサイトも、「文字列を入力して変換をクリック」ってそのクリックする手間がイラッとしません？
あげくサーバサイドに通信しにいってHTTPの応答を待つ時間とかもうほんとに無駄！

あと、「URLエンコード・デコードができるサイトです」とか、それしか出来ないんかーい！どうせどれも似たような処理なんだから一つのサイトで出来たっていいじゃん。

よく働くコンピュータの代わりにぼくがどんどん怠惰になった結果、そんなふうに今あるサイトが不便に感じるようになってきたので、文字列を入れたら、その瞬間にエンコード・デコードを一通り試して結果が出力されるサイトというのを作りました。

encodemax.com

構成

ソース: github.com/mogya/encodemax

たった１ページしかないのにNuxt.jsでgenerateした(だって楽だし)ものをNetlifyでホスティングしています。

ユーザーさんの入力をv-modelのバインディングで変数につっこんで、エンコード・デコードのロジックをcomputedで書いておけば、入力が更新されるたびに勝手に演算されて結果が更新される感じですね。

<textarea v-model="original_code"

  <label>
    Base64 Decode
  </label>
  <input type="text"
    :value="base64_decode" />

computed: {
  base64_encode: function(){
    return window.btoa(unescape(encodeURIComponent(this.original_code)))
  },

あと演算結果欄は、余計な編集ができると使いづらいので、read-onlyにしつつ、こういうコードを付けておくことで、タップした瞬間全選択状態になって、ctrl+Aを押さなくていいようにしてあります。

  methods: {
    on_click: function(event){
      event.target.select();
    }

よかったら使ってみてください。

encodemax.com