長期投資シミュレーションツール『Tousimu』をリリースしました!

【個人開発】初めてのWebサービスをDjangoで作成して、ConoHa VPSで公開!

プログラミング
スポンサーリンク

この記事では、初めての個人開発で

Djangoを使ってWebサービスを作って公開したので

使用した技術やリリースするまでの手順とポイントをご紹介します!

リリースしたサービスはこちら!

長期投資シミュレーションツール「Tousimu(トウシム)」

Tousimu[トウシム]
長期投資で未来をシミュレーション

GitHubでコードも公開しています!

maro-28/Tousimu
Contribute to maro-28/Tousimu development by creating an account on GitHub.

プログラミングは独学で学び、実務未経験のため

苦労した部分も多々ありましたが

これからプログラミングを始める方

個人開発をやってみたい方の参考になれば嬉しいです!

スポンサーリンク

Webサイトの概要

まずは「今回作成したWebサイトの概要」を簡単にご紹介します!

Tousimuの詳しい紹介はこちらをご参考ください!

長期投資の複利計算を簡単にシミュレーション出来る!

今回作成したサイトは、

長期投資の複利計算をブラウザ上で簡単にシミュレーションできるサイトです。

例えば

  • 投資期間
  • 利回り
  • 毎月の投資金額

を入力し最終積立金額をシミュレーションすると

線グラフで投資元本との差がわかりやすく表示されます!

また目標とする最終積立金額を達成するために必要な

  • 毎月の投資金額
  • 投資期間
  • 利回り

逆算することも可能です!

シミュレーションは3種類

利用できるシミュレーションは以下の3種類です。

  • 積立金額シミュレーション
  • 配当金額シミュレーション
  • 資産取崩しシミュレーション

それぞれ目標とする積立金額や配当金額だけでなく

目標を達成するために必要な期間や利回りも計算できます!

送信ボタン無しで結果とグラフが表示される

特にこだわったポイントは

フォームに入力すると送信ボタン無し

即座に結果とグラフが反映される点です。

色々な入力値での結果を試したい時に

送信ボタンのクリックを面倒に感じたため

サクサクと結果とグラフが表示されるように実装しました!

スポンサーリンク

使用した技術(言語、ライブラリ、サーバーなど)

次に使用した技術です!

使用した技術の一覧

  • プログラミング言語
  • ライブラリ
    • Django
    • django-bootstrap
    • jQuery
    • Chart.js
    • Particle.js
  • Webサーバー
    • Nginx
  • 本番環境
  • その他
    • git
    • Visual Studio Code
    • macOS Catalina

WebフレームワークはDjango

サーバーサイドのWebフレームワークはpythonDjangoです。

特にDjangoを選んだ理由は無く

自分が唯一扱えるWebフレームワークのため採用しました!

Djangoって何?という方は

こちらで詳しく解説しているので、ぜひご参考ください!

シミュレーションはJavascriptで実装

シミュレーションの処理は全てJavascriptで実装しています。

当初はpythonで実装する予定でしたが、

送信ボタン無しでフォームへの入力を即座に反映させるために

フロントサイドのJavascriptで実装する方法しか思いつきませんでした。

また即座に反映させるために、シミュレーションの処理は

ループ数が小さくなるように工夫しました。

本番環境はConoha VPS(Cent OS)

本番環境はConoHa VPSの一番安いプラン(メモリ512MB, 620円/月)を利用しました!

Herokuなどの無料サーバーでもよかったのですが

勉強のためにVPSを採用し、一から環境を構築しました!

開発環境から本番環境へのデプロイはgitを介して行っています!

スポンサーリンク

リリースまでの手順とポイント

最後に「リリースまでの手順とポイント」です!

シミュレーションの処理を実装

まずは「シミュレーションの処理を実装」です!

積立金額シミュレーションの処理を例として説明していきます!

積立金額シミュレーション|Tousimu[トウシム]
積立金額シミュレーションでは、毎月の投資金額・投資期間・利回りから将来の最終積立金額を計算可能。経過年月ごとの投資元本と積立金額の比較で、複利の力の大きさを感じることができます!さらに目標とする最終積立金額から、必要な毎月の投資金額・投資期間・利回りの逆算も可能!積立投資をする銘柄の選定や、投資金額の決定にご活用くださ...

まずは

  • 投資期間
  • 利回り
  • 毎月の投資金額

から最終積立金額を計算するコードです!

// 最終積立額のみを計算
function cal_simple_last_funded_amount(period, yearly_yield, monthly_amount) {
    var funded_amount = 0;
    // 積立額を計算
    for (let i = 0; i < period * 12; i++) {
        funded_amount = funded_amount * (1 + yearly_yield / 1200) + Number(monthly_amount);
    }
    return funded_amount;
}

複利の計算は(年間の利回り/12)を月間利回りとし、月単位で計算しています。

次は

  • 投資期間
  • 利回り
  • 最終積立金額

から毎月の投資金額を逆算するコードです!

// 毎月積立額を計算
function cal_monthly_amount(period, yearly_yield, last_funded_amount) {
    # 収束前の値を決める
    if (yearly_yield == 0) {
        var init_monthly_amount = last_funded_amount / period / 12 + 0.01;
    } else {
        var init_monthly_amount = last_funded_amount / period / 12 / (1 + yearly_yield / 1200) + 0.01;
        var test_last_funded_amount = last_funded_amount;
        var max_length = String(init_monthly_amount).length;

        // 桁を落としながら収束
        var sign = 1;
        for (let i = max_length; i > 0; i--) {
            while (test_last_funded_amount * sign >= last_funded_amount * sign) {
                init_monthly_amount -= paddingright(i) * sign;
                test_last_funded_amount = cal_simple_last_funded_amount(period, yearly_yield, init_monthly_amount)
            }
            sign *= -1
        }
    }
    return init_monthly_amount;
}

// 最大の位が1で残りは0の整数を生成
function paddingright(n) {
    var one = '1';
    for (let i = 0; i < n; i++) {
        one += '0'
    }
    return Number(one);
};

大まかな処理の流れは以下です。

  1. 毎月の投資金額を概算
  2. 概算した毎月の投資金額から最終積立金額を計算
  3. 2で計算した最終積立金額と入力された最終積立金額を比較
  4. 3で比較し差がある場合、毎月の投資金額を増減させる
  5. 3で差が無くなるまで2~4を繰り返す
  6. 差がなくなった時の毎月の投資金額が答え

4では大きい位から、一桁ずつ以下のように収束させています。

  1. 概算した毎月の投資金額が200,000円
  2. 最終積立金額を計算すると大きすぎるので、100,000円にして再計算
  3. 次は小さすぎるので、一桁落とし110,000円にして再計算
  4. 150,000円で大きすぎたため、一桁落とし149,000円で再計算
  5. 一の位まで繰り返す

上記の方法であれば、最大のループ数が

概算した毎月の投資金額の桁数×10になるため、

10億円でも100回以下のループ数で計算できます!

ただし注意したいのが、桁数を落としていく際に

毎月の投資金額が0円になってしまうと、

最終積立金額が計算できないため

概算した時点で+0.01だけずらしています。

Chart.jsでグラフを描画

次は「Chart.jsでグラフを描画」です!

引き続き積立金額シミュレーションを例としてご説明します!

積立金額シミュレーションでは、経過年数ごとの

  • 投資元本
  • 積立金額

の2つの推移を線グラフで表示します!

コードはこちらです!

// 最終積立額と各年の額を計算
function cal_last_funded_amount(period, yearly_yield, monthly_amount) {
    // 変数定義
    var [principals, periods, funded_amounts, funded_amount] = [[], [], [], 0];

    // 投資元本と期間
    for (let i = 0; i < 13; i++) {
        principals.push(Math.round(i * period * monthly_amount / 10000))
        var res = ''
        if (Math.floor(period * i / 12) != 0) {
            res = String(Math.floor(period * i / 12)) + '年'
        }
        if (Math.floor(period * i % 12) != 0) {
            res = res + String(Math.floor(period * i % 12)) + 'ヶ月'
        }
        var new_length2 = periods.push(res + '後')
    }
    // 原点の期間を削除
    periods[0] = ""

    // 積立額を計算
    for (let i = 0; i < period * 12; i++) {
        if (i % period == 0) {
            funded_amounts.push(Math.round(funded_amount / 10000));
        }
        funded_amount = funded_amount * (1 + yearly_yield / 1200) + Number(monthly_amount);
    }
    // 最終積立額を追加
    funded_amounts.push(Math.round(funded_amount / 10000))

    // 表示用最終積立額
    var last_funded_amount = Math.round(funded_amount).toLocaleString();

    return [periods, funded_amounts, principals, last_funded_amount];
}

以下が大まかな処理の流れはです。

  1. 投資期間を12分割し経過年月の配列を作成
  2. 各経過年月の投資元本の配列を作成
  3. 各経過年月の経過年月の積立金額の配列を作成

スマホの場合は、画面の幅が小さいため

12分割ではなく4分割で処理を行っています。

そして上記で作成した3つの配列

  • 横軸のラベル
  • 投資元本
  • 積立金額

の配列を使ってChart.jsで描画しています。

ConoHa VPSでDjangoが動く環境を構築し公開

開発環境でWebアプリを作成したら

ConoHa VPSを契約し、以下の流れで環境を構築しました。

  1. yumでソフトウェアをアップデート
  2. ユーザーを追加
  3. SSHの設定
  4. Nginxをインストール
  5. httpsの設定
  6. pythonをインストール
  7. Djangoをインストール

OSはネット上で情報が豊富だったCent OSを採用しました。

Djangoのインストールまで終わったら

開発環境で作成したWebアプリをgit cloneで移行し公開しました!

この部分については、別記事で詳しく書く予定です。

スポンサーリンク

まとめ

今回は初めての個人開発でのDjangoアプリの作成について

  • Webサイトの概要
  • 使用した技術
  • リリースまでの手順とポイント

をご紹介しました!

今回のアプリではDjangoを採用する特別な理由はありませんでしたが

VPSを使って公開する良い勉強になりました。

色々と苦労する場面もありましたが

  • 投資
  • プログラミング

の2つが好きな私にとっては、とても楽しい開発期間でした!

今回開発したTousimuも、ぜひ一度使って頂けたら嬉しいです!

Tousimu[トウシム]
長期投資で未来をシミュレーション

Tousimuの詳しい紹介は、こちらをご参考ください!

もちろん今後も

  • 機能の改善
  • 新機能の追加

などは引き続き行っていく予定です!

もし不具合や改善点などがありましたら

出来る限りではありますが対応させて頂きますので

Twitterなどからご連絡ください!

タイトルとURLをコピーしました