Chart.js／FireBaseを活用してVue3で家計簿アプリ作成

こんにちは、今回はお金の管理ががばがばな自身のために家計簿アプリを作成したので紹介したいと思います。
※データは仮で入れているので私の収支でないです！

#使用した技術
・Windows10(PC)
・TypeScript
・HTML/CSS
・Vue3
・Chart.js
・FireBase
・Bootstrap5
・Font Awesome 6

#画面
上部分：収入／支出／貯金をそこから算出した収支データ
真ん中：グラフでカテゴリごとに集計→円グラフで表示
下部分：カテゴリごとに表と具体的な金額
※練習なのでマネーフォワードの画面を参考にして作成しました。

#データベースの中身
・ユーザ
　・ユーザの名前
　・ユーザのメールアドレス(ID)
　・月
　　・収入：ID／カテゴリ名／項目名／金額
　　・支出：ID／カテゴリ名／項目名／金額

・カテゴリ：ID／カテゴリ名／カテゴリの色／カテゴリのアイコン

一部を切り取るとこのような感じ。

カテゴリ部分

#出来る事
(1)収入／支出／データの追加(工事中)
(2)FireBaseに登録されているデータを取得→円グラフにカテゴリごとに集計して反映
(3)円グラフ／表は収入、支出で切り替え可能
(4)月は自動で今月になる仕様
※工事中のものは少々改修後Qiita更新します。

#1つ1つコードで詳しく説明
###(1)収入／支出／データの追加(工事中)
axiosを使って、FireBaseに送る予定です。

###(2)FireBaseに登録されているデータを取得
Chart.jsを使用して円グラフを作成しました。
まずは空の円グラフを宣言。

    const pieData1: ChartData<"pie"> = {
      labels: [],
      datasets: [
        {
          label: "inData",
          data: [],
          backgroundColor: [],
          hoverOffset: 4,
        },
      ],
    };

そしてwatchEffectでデータが変わったらそのたびに円グラフを描画しなおす設計にしました。(下記のコードはwatchEffect内のコード)

//取得したデータ→{色:XX,価格:XX}の配列を作成
const array1 = new Array<any>();
//カテゴリの情報配列
const categoryArray1 = ref(new Array<string>());
//描画用価格の情報配列
const priceArray1 = ref(new Array<number>());
//描画用色の情報配列
const colorArray1 = new Array<string>();
//カテゴリのアイコンの配列
const markArray1 = ref(new Array<string>());

      //response = FireBaseから持ってきたデータ
      //カテゴリ名とその価格をpush{category:XX,price:XX}
      for (const responseItem of response[nowMonth].in) {
        array1.push({
          category: String(responseItem.category),
          price: Number(responseItem.price),
        });
      }

      //カテゴリ名が被っていたら価格を合わせて排除
      for (let i = 0; i < array1.length; i++) {
        let answer = array1[i].price;
        for (let j = i + 1; j < array1.length; j++) {
          if (array1[i].category === array1[j].category) {
            answer = answer + array1[j].price;
            array1.splice(array1[j], 1);
          }
        }
        priceArray1.value.push(answer);
        categoryArray1.value.push(array1[i].category);
      }

      //円グラフデータに作成した配列データを格納
      pieData1.labels = categoryArray1.value;
      pieData1.datasets[0].data = priceArray1.value;

      //グラフの色とマーク情報を取得
      //（色はFireBase上であらかじめカテゴリごとに決めているのでそれを取得）
      for (const category1 of categoryArray1.value) {
        for (const category2 of categoryData) {
          if (category1 === category2.name) {
            colorArray1.push(category2.color);
            markArray1.value.push(category2.mark);
          }
        }
      }
      pieData1.datasets[0].backgroundColor = colorArray1;

      //v-forでHTML部分に表示させる用配列作成
      for (let i = 0; i < categoryArray1.value.length; i++) {
        inArray.value.push({
          category: categoryArray1.value[i],
          price: priceArray1.value[i],
          mark: markArray1.value[i],
          color: colorArray1[i],
        });
      }

ややこしい！！
とにかく、最初に宣言した円グラフのデータで空[ ]になっていたところにデータを入れた感じです。

###(3)円グラフ／表は収入、支出で切り替え可能
v-showを駆使して表示を切り替えられます。

<!-- ボタンのコーナー -->
    <div class="btnbtn">
      <span class="out" v-on:click="inOutFlug = false"
        ><button
          type="button"
          :class="{ onswitch: !inOutFlug, offswitch: inOutFlug }"
        >
          支出
        </button></span
      >
      <span class="in" v-on:click="inOutFlug = true"
        ><button
          type="button"
          :class="{ onswitch: inOutFlug, offswitch: !inOutFlug }"
        >
          収入
        </button></span
      >
    </div>

true/false切り替えるタイミングで適用するCSSも切り替えているので
支出と収入ボタンが灰色になったり白になったりします。

収入の表示はこんな感じ。狼男はオオカミになってしまうのでスクロール注意です。(?)

###(4)月は自動で今月になる仕様
date-fnsで今月の月を取得して表示させているので、
自動で今月分の月が表示されてデータも今月分が持ってこれます。
やったね。

#まとめ
今後増やしていきたい機能は
・1年分のデータを確認できる
・カテゴリを押下→詳細画面に飛んで何をしたか詳しく見れる
・カテゴリの追加
・光熱費データの推移を折れ線グラフで表示
等々…

なかなか時間が間に合わないので、また余裕が出来て続き出来たらこの記事も更新するかもです。本当はマネーフォワードのようにAPI使って口座情報やカード情報を取得したかったのですが、Gitにpushしづらいので一旦辞めました。これもローカル上で試してみたいです。
↓やろうとした形跡
UFJ銀行APIをTypescriptで使ってみた

という訳で今回は超簡易的な家計簿アプリを作成しました。
ご覧いただきありがとうございました。