vue.jsを使って憧れのページを作ってみる

概要

フロントエンドの知識・経験が浅い私です
時折、利用させていただいているサイトになんでもデコードしてくれるサイトやハッシュ化してくれるサイトがあります

そこで僕自身も入力した値に対してリアルタイムで処理を行なって同じようなことをしてみたいと考えたので、vueを使って画面ごと作ってみたいと思います

※vueのはじめ方などについては触れません、公式のクイックスタートが一番始めやすいと思います

本題

今回、入力されたテキストを他のウィンドウでデコードやハッシュ化してみるページを作ってみることにしました
デザインは2の次です

ざっとVueのクイックスタートの状態から作り終えたのが次の画像になります

App.vue

<template>
  <h1>テキストハッシュ変換</h1>
  <div id="app">
    <div class="input-section">
      <label for="inputText">テキストを入力してください</label>
      <textarea id="inputText" v-model="inputText" @input="processAll"></textarea>
    </div>

    <div class="output-section">
      <div class="output-box">
        <label for="outputText">sha256 ハッシュ</label>
        <textarea :value="sha256Text" readonly></textarea>
      </div>
    </div>

    <div class="output-section">
      <div class="output-box">
        <label for="outputText">md5 ハッシュ</label>
        <textarea :value="md5Text" readonly></textarea>
      </div>
    </div>

    <div class="output-section">
      <div class="output-box">
        <label for="outputText">sha1 ハッシュ</label>
        <textarea :value="sha1Text" readonly></textarea>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CryptoJS from 'crypto-js';

const inputText = ref('');
const sha256Text = ref('');
const md5Text = ref('');
const sha1Text = ref('');

// テキスト処理とハッシュ化をまとめて行う関数
const processAll = async () => {
  // SHA-256 ハッシュ化処理
  try {
    if (inputText.value) {
      const hash256 = CryptoJS.SHA256(inputText.value);
      sha256Text.value = hash256;
    } else {
      sha256Text.value = '';
    }
  } catch (e) {
    sha256Text.value = 'ハッシュ化エラー: ' + e.message;
  }

  // md5 ハッシュ化処理
  try {
    if (inputText.value) {
      const hashMd5 = CryptoJS.MD5(inputText.value);

      md5Text.value = hashMd5;
    } else {
      md5Text.value = '';
    }
  } catch (e) {
    md5Text.value = 'ハッシュ化エラー: ' + e.message;
  }

  // sha1 ハッシュ化処理
  try {
    if (inputText.value) {
      const hash1 = CryptoJS.SHA1(inputText.value);

      sha1Text.value = hash1;
    } else {
      sha1Text.value = '';
    }
  } catch (e) {
    sha1Text.value = 'ハッシュ化エラー: ' + e.message;
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #ffffff;
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.input-section, .output-section {
  width: 80%;
  max-width: 600px;
  margin-bottom: 20px;
}
.input-section label,
.output-section label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}
.input-section textarea,
.output-section textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.output-section {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.output-box {
  flex: 1;
}
.output-box h2 {
  font-size: 1.2rem;
  margin-top: 0;
}
</style>

今回新しく学べたものとしては以下の2点かと思います

• crypto-js
• <textarea id="inputText" v-model="inputText" @input="processAll">

crypto-jsはjavascriptで暗号化を簡単に行うようするためのパッケージでした
これによって自身の手で暗号化の処理を書かずとも関数を呼び出すだけで暗号化してくれる代物です

<textarea id="inputText" v-model="inputText" @input="processAll">

上記のうち特に「@input="processAll"」についてVueにおいて見られる記法でこれはv-on:inputの短縮記法で、HTMLのinputイベントをリッスンしてくれます
そうすることでユーザーがテキストエリアの内容を変更する（文字を入力または削除する）たびに、processAllという名前のメソッドが呼び出されます
そして今回はハッシュか処理である関数が呼び出されているため、入力した値が即時にハッシュ化されて他のテキストエリアに表示されるようになっている仕組みです

終わりに

ということで、Vueで画面を作ってみたという記事になります
もう少し凝ったデザイン、実際の処理などは追ってgithubにアップしようと思うのでご興味があれば覗いてみてください