おーみんブログ

C#, ASP.NET Core, Unityが大好きです。

トップ > Vue.js > Vue.js + Vuetify + Azure Static Web Appsで家計黄金比率シミュレーターを作ってみた！

Vue.js + Vuetify + Azure Static Web Appsで家計黄金比率シミュレーターを作ってみた！

Vue.js

はじめに

お正月休みを利用して久しぶりにVue.jsのお勉強をしたいなと思い、手取りの収入から家計黄金比を出してくれるアプリを作ってみました。

どんなアプリか

利用方法としてはとても単純で「月の手取りを入力してください」というフィールドに金額を入力すると、いくつかの分類ごとに支出額が計算されるというものです。

simulator1.png

※実際のアプリはAzure Static Web Appsにデプロイしており、以下のリンクから利用が可能です。

brave-forest-03723ea00.azurestaticapps.net

使用技術

使用技術は以下です。

フロントエンド Vue.js 2.6.14

デザイン Vuetify 2.4.0

グラフ vue-chart.js 3.4.2

デプロイ(CI/CD) Azure Static Web Apps

処理概要

ここからはアプリの処理について簡単に振り返っていきます。

Vuetifyによるデザイン

Vuetifyに限らずですが、グリッドシステムは本当に便利ですね。 以下のようにv-colタグ内で属性を設定(md="8"など)するだけでレスポンシブデザインが出来上がります。

<v-row>
  <v-col cols="12" md="8" lg="6">
    <span v-if="error" class="red--text">{{ error }}</span>
    <v-text-field
      class="font-weight-bold text-h6 mt-4"
      label="月の手取りを入力してください"
      persistent-hint
      outlined
      suffix="円"
      v-model="income"
      @change="calcGoldenRatio"
    ></v-text-field>
    <p>家計の黄金比率は以下になります</p>
  </v-col>
</v-row>

モーダルウィンドウについてもCSSを細かく記述する必要はなく、activatorとv-dialogタグを利用してダイアログを表示するイベント部分とダイアログ部分を記述するだけで実装ができました。

<template>
  <v-col cols="auto">
    <v-dialog transition="dialog-bottom-transition" max-width="600">
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          class="
            ma-2
            font-navigation
            text-md-body-1 text-sm-button
            ml-md-5 ml-sm-3 text-caption
          "
          color="yellow darken-4"
          v-bind="attrs"
          v-on="on"
          dark
        >
          黄金比率とは?<v-icon class="hidden-sm-and-down" dark right>mdi-help-circle</v-icon>
        </v-btn>
      </template>
      <template v-slot:default="dialog">
        <v-card>
          <v-toolbar class="text-h6" color="amber darken-3" dark>黄金比率とは？</v-toolbar>
          <v-card-text>
            <p class="text-body-1 pa-2 pt-10">家計の黄金比率とは『はじめての人のための3000円投資生活』の著者であるファイナンシャルプランナーの横山光昭さんが考案した比率です。</p>
            <p class="text-body-1 pa-2">本アプリでは以下のサイトで紹介されている家計の割合を参考に計算を行っています。</p>
            <a class="text-body-1 pa-2" href="https://yurutsuma.com/the-golden-ratio-of-household/"  target="_blank" rel="noopener noreferrer">家計の黄金比率を使って予算作成に役立てよう！</a>
          </v-card-text>
          <v-card-actions class="justify-end">
            <v-btn text @click="dialog.value = false">Close</v-btn>
          </v-card-actions>
        </v-card>
      </template>
    </v-dialog>
  </v-col>
</template>

上記のコードで以下のようなダイアログの実装が行えます。 simulator2.png

vue-chart.jsによるグラフ実装

手取りの収入に応じた各費用について、数字だけではパッと見たイメージがつかないので円グラフも入れてみました。 vue-chart.jsを利用すると円グラフも以下のように「ラベル」「背景色」「値」をセットするだけで基本的な形を作成できました。

<script>
  methods: {
    fillData() {
      const pieChartData = this.categorizationData;
      this.datacollection = {
        labels: [
          "住居費",
          "食費",
          "水道光熱費",
          "通信費",
          "お小遣い",
          "預貯金",
          "生命保険料",
          "日用品",
          "医療費",
          "教育費",
          "交通費",
          "被服費",
          "交際費",
          "娯楽費",
          "嗜好品",
          "その他",
        ],
        datasets: [
          {
            backgroundColor: [
              "#FFAD90",
              "#FFABCE",
              "#D0B0FF",
              "#A4C6FF",
              "#A7F1FF",
              "#E9FFA5",
              "#9BF9CC",
              "#AEFFBD",
              "#FF9872",
              "#FF97C2",
              "#C299FF",
              "#8EB8FF",
              "#8EF1FF",
              "#E4FF8D",
              "#86F9C5",
              "#93FFAB",
            ],
            data: [
              pieChartData.rent,
              pieChartData.food,
              pieChartData.utilityBills,
              pieChartData.communication,
              pieChartData.pocketMoney,
              pieChartData.savings,
              pieChartData.lifePremium,
              pieChartData.everydayItems,
              pieChartData.medicalBills,
              pieChartData.education,
              pieChartData.transportation,
              pieChartData.clothing,
              pieChartData.entertainment,
              pieChartData.leisure,
              pieChartData.preference,
              pieChartData.other,
            ],
            borderColor: "#fff",
          },
        ],
      };
    },
  }
</script>

Azure Static Web Appsを利用したデプロイ

当初は静的アプリだしAzureのストレージにデプロイしようかと思っていたのですが、調べてみるとどうやら最近Azure Static Web Appsがリリースされたとのことだったのでこちらを使ってみました。

驚いたのがGithubと連携させるだけでステージング環境を用意してくれたりCI/CDまでやってくれるという超優れもの！！ しかも基本的な使用料は無料という！！Σ（・□・；）

azure.microsoft.com

おわりに

以上がアプリと処理の概要でした。 実際にモノづくりをすることで新しい知見が出来たりするので今年もこの調子で頑張っていこうと思います！