Vue3のCompositionAPIを利用して勤怠管理アプリを作ってみた

はじめに

自分の家では自分が開発したWeb家計簿で家計の管理をしています。作った当時はVue3が無かったため、Vue2とTypeScriptで開発を行いました。この時はVueに触れることが初めであまり調査ができておらず自分的に継承の考え飲み込みやすかったClass構文を選択しました。
※C++大好きな人間なのでClassが分かりやすかった

今後のことを考えると「Composition API」を利用するのが良いかなと思い、今回は勤怠管理アプリを作成して学んでいこうと思いました。

Vue3のプロジェクトの作成の仕方

今回はVueCLIを利用して、プロジェクトを作成します。
Vue3とTypeScriptを利用したいと思います。

フォルダ作成したいパスで下記コマンドを打ちます。

vue create <プロジェクト名>

マニュアル選択を選択して、ほかの質問項目は画像のように答えました。

勤怠管理アプリの作成

下記のイメージの勤怠管理を作成する。

ボタンが2つで出社と退社が記録できるを作成した。
ボタンを押すと出社または退社が記録くできる。

HTML部は下記の感じ

<template>
  <div class="home">
    <button @click="entry">出社</button>
    <button @click="leave">退社</button>
    <ul>
      <li v-for="(data, index) in datas.data" :key="index">
        {{ data }} | {{ index }} 
      </li>
    </ul>
  </div>
</template>

setup

「Composition API」の場合はsetup関数にリアクティブなデータ、関数を定義をしていきます。

<script lang="ts">
import { reactive } from 'vue'

export default{
  setup(){
    //ここに定義
  }
}
</script>

data

勤怠の記録を管理する為のデータで、「Composition API」の場合は、「ref,reactive」を利用して記述します。
今回はreactiveを利用して書きました。

下記の感じで宣言します。

const datas = reactive<{ data: { [key: string]: string } }>( {data: {}} );

function

ポンタの押下した時の動作を定義します。こちらは関数を用いて記述します。

下記の感じで関数を宣言します。

const entry = function () {
	datas.data[Date().toString()] = "出社";
}

const leave = function () {
	datas.data[Date().toString()] = "退社";
}

実行

最後にreturnで定義したものを返却すると利用できます。
コード全文は下記の通り

<template>
  <div class="home">
    <button @click="entry">出社</button>
    <button @click="leave">退社</button>
    <ul>
      <li v-for="(data, index) in datas.data" :key="index">
        {{ data }} | {{ index }} 
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { reactive } from 'vue'

export default{
  setup(){
    const datas = reactive<{ data: { [key: string]: string } }>( {data: {}} );

    const entry = function () {
      datas.data[Date().toString()] = "出社";
    }

    const leave = function () {
      datas.data[Date().toString()] = "退社";
    }

    return {
      datas,entry,leave
    }
  }
}
</script>

感想

CompositionAPIを利用して感じは掴めてきました。watchやpropを使ってないのでそこらへんも利用できたらと思っています。