実践！令和 500円貯金(投資)をするといくら貯まるのか？(Vue.jsでのグラフ&テーブル表示) #JavaScript

はじめに

昨年2019年、元号が「平成」→「令和」に変更されました。普段、元号使わないし、「いま平成何年だっけ？」と考えるのは、煩わしいと思っていました。しかし、予想以上に令和への改元が盛り上がり、時代の節目として、元号ってよいものだと思いました。そう思った人も多かったのではないでしょうか。

そこで、「令和」のテーマで何かできないかな、と考えはじめました。平成は約30年。令和は何年の続くのかは、今のところ誰にもわかりませんが、この令和の期間中、**「令和500円貯金」**と称して、500円貯金をしようと思いました。

「令和500円貯金」とは

500円貯金：わかりやすく1年間を360日とすると、500円を毎日貯金箱にいれたとすると、18万円になります。（毎日きっかり500円というわけではなく、わかりやすさ重視で、1年360日(年間18万)・1ヶ月30日(1万5千円) とします。）
貯金箱に貯金していても、おもしろくないので、時代に合わせて「投資」にしようということで、「令和500円積立投資」とします。
令和の時代、ずっと積み立てを実施します。（令和元年は5月からなので、元年だけは7月からの半年間は毎月3万円積立とし、実質1月からの投資=2019年1月から開始）
平成と同じく30年だったとすると、18万×30年＝540万となります。

※数年前に、500円玉で貯金をしたことがあります。500円玉が手元に来るたびに貯金箱にいれてました。貯金箱がいっぱいになるまでやり、結構頑張ったつもりでしたが、結果9万円前後で、頑張りと貯金箱の重さのわりにはそんなでもないなぁ、と思った記憶があります。

「元号」TIPS

先日、天皇誕生がありましたが、今上天皇は60歳(還暦)になられたそうです。（そうすると、令和とどのくらいなのでしょうか・・・）
元号の平均は、5.5年らしいです（650年から、平成の最後の年である2018年までの1368年間で247の元号。平均すると「5.5年」）

【日本の元号の長さランキング】

1位：昭和: 約62年
2位：明治: 約44年
3位：応永: 約33年（室町時代）
4位：平成: 約31年
5位：延暦: 約23年（奈良時代）

では、いくらになるのか？

モチベーションをあげるため（自動積立をしますので、モチベーションも何もないのですが）、最終的にはいくらくらいになるのかをプログラムで計算してみたいと思います。

実際には、プログラムを作らなくても、積立シミュレーション(下記のURLは楽天)で簡単にできます。

EXCELでもできると思いますが、ポチポチとパラメータを変更したいですし、勉強になりますから、Vue.jsで「複数軸グラフ」と「テーブル」を表示し、パラメータを変えるとリアクティブに表示が変わるものを作ってみたいと思います。

使用技術

Vue.js
vue-chartjs@3.5.0
chart.js@2.9.3
bootstrap-vue@2.5.0

インストール
npm install vue-chartjs chart.js
npm install bootstrap-vue

サイト・コード

積み立てシミュレーション：サイトリンク

入力パラメータ：　積立期間(年)・毎日積立金額(円)・利回り(％)
グラフ：「横軸」現在からの積立期間・「縦軸」金額(万円)
テーブル：元本・評価額・利益

パラメータを変更したり、ポチポチすると、グラフやテーブルの表示が変化します。（グラフをみると、やはりポイントは投資年数と利回りである、ということが一目瞭然です）

コード：グラフの表示部分

App.vue

<template>
  <b-container>
    <!-- グラフ表示 -->
    <chart :chart-data="datacollection" :options="options"></chart>
  </b-container>
</template>

<script>
import Chart from './Chart.js'

export default {
  components: {
    Chart
  },
  data () {
    return {
      datacollection: {},
      options: {}
    }
  },
  mounted () {
    this.makeData()
  },
  methods: {
    makeData () {
      // データ作成
         // 省略
      }

      // グラフにセットする
      this.datacollection = {
        labels: yearLabels,   //データ作成部分で作ったデータ
        datasets: [
          {
            label: '元本',
            data: dataset1,   //データ作成部分で作ったデータ
            backgroundColor: 'lightblue'
          },
          {
            label: '評価額',
            data: dataset2,   //データ作成部分で作ったデータ
            borderColor: 'lightgreen',
            fill: false,
            type: 'line'
          }
        ]
      },
      this.options = {
        maintainAspectRatio: false,
        elements: {
          point: {
            radius: 5,      // 点の大きさ
            hoverRadius: 10 // 点の大きさ(マウスホバー時)
          }
        },
        scales: {
          yAxes: [
            {
              ticks: {
                suggestedMin: 0,
                stepSize: 10
              }
            }
          ]
        }
      }
    }
  }
}
</script>

全体のコード

App.vue

<template>
  <b-container>
    <br><h2>令和500円積み立て</h2><br>
    <!-- パラメータ設定 -->
    <b-row>
      <b-col>
        <b-form-group label-cols-sm="5" label="積立期間(年)：" label-align-sm="right" label-for="how-long-year">
          <b-form-input v-model="howlongyear" v-on:change="makeData()" type="number" id="how-long-year"></b-form-input>
        </b-form-group>
      </b-col>
      <b-col>
        <b-form-group label-cols-sm="5" label="毎日積立金額(円)：" label-align-sm="right" label-for="how-much-day">
          <b-form-input v-model="howmuchday" v-on:change="makeData()" type="number" id="how-much-day"></b-form-input>
        </b-form-group>
      </b-col>
      <b-col>
        <b-form-group label-cols-sm="5" label="利回り(％)：" label-align-sm="right" label-for="interest">
          <b-form-input v-model="interest" v-on:change="makeData()" type="number" id="interest"></b-form-input>
        </b-form-group>
      </b-col>
    </b-row>
    <span>※1年は360日として計算</span>
    <!-- グラフ表示 -->
    <chart :chart-data="datacollection" :options="options"></chart>
    <br><hr><br>
    <!-- テーブル表示 -->
    <b-table small bordered striped head-variant="dark" :fields="fields" :items="items" class="text-center"></b-table>
  </b-container>
</template>

<script>
import Chart from './Chart.js'

export default {
  components: {
    Chart
  },
  data () {
    return {
      howlongyear: 20,
      howmuchday: 500,
      interest: 3,
      datacollection: {},
      options: {},
      fields: ['No', '年', '元本', '評価額', '利益'],
      items: []
    }
  },
  mounted () {
    this.makeData()
  },
  methods: {
    makeData () {
      // 1年で積み立てる金額(毎日積立金額 * 360)
      var yearset = this.howmuchday * 360

      var yearLabels = []
      var dataset1 = []
      var dataset2 = []
      this.items = []

      var date = new Date()
      var yyyy = date.getFullYear()
      var principal, calcresult, calcmath, resultset

      for(var i = 1; i <= this.howlongyear; i++){
        if (i == 1){
          yearLabels.push(yyyy)
          calcresult = yearset * (1 + (this.interest / 100))
        } else {
          yearLabels.push(yyyy += 1)
          calcresult = (yearset + calcmath) * (1 + (this.interest / 100))
        }

        // data1 を追加
        principal = (yearset * i) / 10000
        dataset1.push(principal)
        // data2 を追加
        calcmath = Math.round(calcresult * 10) / 10
        resultset = Math.round( (calcmath / 10000) * 10) / 10
        dataset2.push(resultset)

        var num = resultset - principal
        var gain = Math.round(num * 10) / 10

        var tableset = {
          'No': i,
          '年': yyyy,
          '元本': principal + '万円',
          '評価額': resultset + '万円',
          '利益': gain + '万円',
        }
        this.items.push(tableset)

      }

      // グラフにセットする
      this.datacollection = {
        labels: yearLabels,
        datasets: [
          {
            label: '元本',
            data: dataset1,
            backgroundColor: 'lightblue'
          },
          {
            label: '評価額',
            data: dataset2,
            borderColor: 'lightgreen',
            fill: false,
            type: 'line'
          }
        ]
      },
      this.options = {
        maintainAspectRatio: false,
        elements: {
          point: {
            radius: 5,      // 点の大きさ
            hoverRadius: 10 // 点の大きさ(マウスホバー時)
          }
        },
        scales: {
          yAxes: [
            {
              ticks: {
                suggestedMin: 0,
                stepSize: 10
              }
            }
          ]
        }
      }
    }
  }
}
</script>

Chart.js

import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Bar,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}

実践中！（暴落中！）

2019年(＝令和元年)より、投資信託に自動積立でスタートしています。
2020年2月末現在、元本：15,000円×14カ月=210,000円、 評価額：213,408円(+3,408円)(+約1.6%) となっています。
コロナショックにより暴落中ですが、かろうじてプラスです。（積立ては、こういうときによいですね。値動きについて一切気になりません）

2020/11/02追記
実績をGoogleスプレッドシートに記入してグラフ・テーブル化:Qiita別記事

まとめ

Vue.jsで2軸グラフを作成しました。
令和の時代が終わるとき（20年後?30年後?）に500円貯金(投資)がどのようになっているのか、とても楽しみです。

実践！令和 500円貯金(投資)をするといくら貯まるのか？(Vue.jsでのグラフ&テーブル表示)