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

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

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

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

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

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

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

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

https://tousimu.work/

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

Build software better, together
GitHub is where people build software. More than 73 million people use GitHub to discover, fork, and contribute to over 200 million projects.

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

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

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

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

スポンサーリンク

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を介して行っています!

スポンサーリンク

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

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

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

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

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

https://tousimu.work/funded-simulator

まずは

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

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

// 最終積立額のみを計算
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も、ぜひ一度使って頂けたら嬉しいです!

https://tousimu.work/

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

もちろん今後も

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

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

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

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

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

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