この記事では、初めての個人開発で
Djangoを使ってWebサービスを作って公開したので
使用した技術やリリースするまでの手順とポイントをご紹介します！
リリースしたサービスはこちら！
長期投資シミュレーションツール「Tousimu(トウシム)」
GitHubでコードも公開しています！
プログラミングは独学で学び、実務未経験のため
苦労した部分も多々ありましたが
これからプログラミングを始める方や
個人開発をやってみたい方の参考になれば嬉しいです！
Webサイトの概要
まずは「今回作成したWebサイトの概要」を簡単にご紹介します！
Tousimuの詳しい紹介はこちらをご参考ください！
長期投資の複利計算を簡単にシミュレーション出来る！
今回作成したサイトは、
長期投資の複利計算をブラウザ上で簡単にシミュレーションできるサイトです。
例えば
- 投資期間
- 利回り
- 毎月の投資金額
を入力し最終積立金額をシミュレーションすると
線グラフで投資元本との差がわかりやすく表示されます！
また目標とする最終積立金額を達成するために必要な
- 毎月の投資金額
- 投資期間
- 利回り
を逆算することも可能です！
シミュレーションは3種類
利用できるシミュレーションは以下の3種類です。
- 積立金額シミュレーション
- 配当金額シミュレーション
- 資産取崩しシミュレーション
それぞれ目標とする積立金額や配当金額だけでなく
目標を達成するために必要な期間や利回りも計算できます！
送信ボタン無しで結果とグラフが表示される
特にこだわったポイントは
フォームに入力すると送信ボタン無しで
即座に結果とグラフが反映される点です。
色々な入力値での結果を試したい時に
送信ボタンのクリックを面倒に感じたため
サクサクと結果とグラフが表示されるように実装しました！
使用した技術（言語、ライブラリ、サーバーなど）
次に使用した技術です！
使用した技術の一覧
- プログラミング言語
- python
- Javascript
- ライブラリ
- Django
- django-bootstrap
- jQuery
- Chart.js
- Particle.js
- Webサーバー
- Nginx
- 本番環境
- ConoHa VPS
- CentOS 8.2
- ConoHa VPS
- その他
- git
- Visual Studio Code
- macOS Catalina
WebフレームワークはDjango
サーバーサイドのWebフレームワークはpythonのDjangoです。
特にDjangoを選んだ理由は無く
自分が唯一扱えるWebフレームワークのため採用しました！
Djangoって何？という方は
こちらで詳しく解説しているので、ぜひご参考ください！
シミュレーションはJavascriptで実装
シミュレーションの処理は全てJavascriptで実装しています。
当初はpythonで実装する予定でしたが、
送信ボタン無しでフォームへの入力を即座に反映させるために
フロントサイドのJavascriptで実装する方法しか思いつきませんでした。
また即座に反映させるために、シミュレーションの処理は
ループ数が小さくなるように工夫しました。
本番環境はConoha VPS（Cent OS）
本番環境はConoHa VPSの一番安いプラン(メモリ512MB, 620円/月)を利用しました！
Herokuなどの無料サーバーでもよかったのですが
勉強のためにVPSを採用し、一から環境を構築しました！
開発環境から本番環境へのデプロイはgitを介して行っています！
リリースまでの手順とポイント
最後に「リリースまでの手順とポイント」です！
シミュレーションの処理を実装
まずは「シミュレーションの処理を実装」です！
積立金額シミュレーションの処理を例として説明していきます！
まずは
- 投資期間
- 利回り
- 毎月の投資金額
から最終積立金額を計算するコードです！
// 最終積立額のみを計算
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);
};
大まかな処理の流れは以下です。
- 毎月の投資金額を概算
- 概算した毎月の投資金額から最終積立金額を計算
- 2で計算した最終積立金額と入力された最終積立金額を比較
- 3で比較し差がある場合、毎月の投資金額を増減させる
- 3で差が無くなるまで2~4を繰り返す
- 差がなくなった時の毎月の投資金額が答え
4では大きい位から、一桁ずつ以下のように収束させています。
- 概算した毎月の投資金額が200,000円
- 最終積立金額を計算すると大きすぎるので、100,000円にして再計算
- 次は小さすぎるので、一桁落とし110,000円にして再計算
- 150,000円で大きすぎたため、一桁落とし149,000円で再計算
- 一の位まで繰り返す
上記の方法であれば、最大のループ数が
概算した毎月の投資金額の桁数×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];
}以下が大まかな処理の流れはです。
- 投資期間を12分割し経過年月の配列を作成
- 各経過年月の投資元本の配列を作成
- 各経過年月の経過年月の積立金額の配列を作成
スマホの場合は、画面の幅が小さいため
12分割ではなく4分割で処理を行っています。
そして上記で作成した3つの配列
- 横軸のラベル
- 投資元本
- 積立金額
の配列を使ってChart.jsで描画しています。
ConoHa VPSでDjangoが動く環境を構築し公開
開発環境でWebアプリを作成したら
ConoHa VPSを契約し、以下の流れで環境を構築しました。
OSはネット上で情報が豊富だったCent OSを採用しました。
Djangoのインストールまで終わったら
開発環境で作成したWebアプリをgit cloneで移行し公開しました！
この部分については、別記事で詳しく書く予定です。
まとめ
今回は初めての個人開発でのDjangoアプリの作成について
- Webサイトの概要
- 使用した技術
- リリースまでの手順とポイント
をご紹介しました！
今回のアプリではDjangoを採用する特別な理由はありませんでしたが
VPSを使って公開する良い勉強になりました。
色々と苦労する場面もありましたが
- 投資
- プログラミング
の2つが好きな私にとっては、とても楽しい開発期間でした！
今回開発したTousimuも、ぜひ一度使って頂けたら嬉しいです！
Tousimuの詳しい紹介は、こちらをご参考ください！
もちろん今後も
- 機能の改善
- 新機能の追加
などは引き続き行っていく予定です！
もし不具合や改善点などがありましたら
出来る限りではありますが対応させて頂きますので
Twitterなどからご連絡ください！
