先日、投資に関するシミュレーションをする計算機を作成しました。
これらはJavaScriptでデータ処理や計算を行っていますが、そのフレームワーク・ライブラリは「jQuery」を使用しました。
しかし、jQueryよりも新しいフレームワークがリリースされており、最近は次のモノが主流になっているようですね。
- Angular、AngularJS(開発はGoogle社)
- React(開発はFacebook社)
- Vue(シンプルかつ自由)
その中からVueがjQueryからの移行が一番ラクそうだったので投資シミュレーション計算機をVueでも作ってみました。
備忘記録を兼ねてコードをご紹介します。
jQueryで作成したWebアプリ【利回り計算】をVue.jpでも作ってみた
まずは完成形。
各数値を入力して計算したいボタンを押すと答えが表示されます。
| 計算結果 | {{target}} |
| 投資元金 | {{target1}} |
| 運用益 | {{target2}} |
| 合計 | {{target3}} |
サンプルコード
まずはVueのコードから。
var app = new Vue({
el: '#keisan_form',
data: {
isShow : false,//計算結果表示テーブルの表示・非表示フラグ
pv : '0',
pmt : '0',
nper : '0',
rate : '0.00',
fv : '0',
target : '0',//計算結果
target1 : '0',//投資元金
target2 : '0',//運用益
target3 : '0'//資産合計
},
methods: {
keisan: function(kansu){
this.isShow = true;
let reg = new RegExp(",", "g");
let pv = (this.pv.replace(reg, "") - 0) * -1;
let pmt = (this.pmt.replace(reg, "") - 0) * -1;
let nper = this.nper.replace(reg, "") - 0;
let rate = (this.rate - 0) / 100;
let fv = this.fv.replace(reg, "") - 0;
let target = '';
if(kansu == 'fv'){
fv = MyFV(rate, nper, pmt, pv);
this.fv = fv.toLocaleString();
target = this.fv + '円';
}
else if(kansu == 'rate'){
rate = MyRATE(nper, pmt, pv, fv);
this.rate = rate;
target = this.rate + '％';
}
else if(kansu == 'nper'){
nper = MyNPER(rate, pmt, pv, fv);
fv = MyFV(rate, nper, pmt, pv);//計算した支払回数で再計算
this.nper = nper.toLocaleString();
target = this.nper + '回';
}
else if(kansu == 'pmt'){
pmt = MyPMT(rate, nper, pv, fv);
this.pmt = (pmt * -1).toLocaleString();
target = this.pmt + '円';
}
else if(kansu == 'pv'){
pv = MyPV(rate, nper, pmt, fv);
this.pv = (pv * -1).toLocaleString();
target = this.pv + '円';
}
let target1 = Math.round((pv + (pmt * nper)) * -1);//投資元金
let target3 = fv;//資産合計
let target2 = (target3 - target1);//運用益
this.target = target;
this.target1 = target1.toLocaleString() + '円';//投資元金
this.target2 = target2.toLocaleString() + '円';//運用益
this.target3 = target3.toLocaleString() + '円';//資産合計
},
clear: function(){
this.isShow = false;
this.pv = '0';
this.pmt = '0';
this.nper = '0';
this.rate = '0.00';
this.fv = '0';
}
}
});
次にJavaScript版エクセル財務関数です。
これは、「Excelの財務関数をJavaScriptで実装する」をほぼ使用させてもらいました。
ありがとうございました。
//JavaScript版エクセル財務関数
//-------------------------------------------------------------------
//JavaScript版エクセルRATE（利回りを計算）
//-------------------------------------------------------------------
//期間,定期支払額,現在価値,将来価値,支払期日,推定値
function MyRATE(nper, pmt, pv, fv, dueEndOrBeginning, interest){
if (interest == null) interest = 0.01;
if (fv == null) fv = 0;
if (dueEndOrBeginning == null) dueEndOrBeginning = 0;
var FINANCIAL_MAX_ITERATIONS = 128;//Bet accuracy with 128
var FINANCIAL_PRECISION = 0.0000001;//1.0e-8
var y, y0, y1, x0, x1 = 0, f = 0, i = 0;
var rate = interest;
if (Math.abs(rate) < FINANCIAL_PRECISION){
y = pv * (1 + nper * rate) + pmt * (1 + rate * dueEndOrBeginning) * nper + fv;
}
else{
f = Math.exp(nper * Math.log(1 + rate));
y = pv * f + pmt * (1 / rate + dueEndOrBeginning) * (f - 1) + fv;
}
y0 = pv + pmt * nper + fv;
y1 = pv * f + pmt * (1 / rate + dueEndOrBeginning) * (f - 1) + fv;
i = x0 = 0.0;
x1 = rate;
while ((Math.abs(y0 - y1) > FINANCIAL_PRECISION) && (i < FINANCIAL_MAX_ITERATIONS)){
rate = (y1 * x0 - y0 * x1) / (y1 - y0);
x0 = x1;
x1 = rate;
if (Math.abs(rate) < FINANCIAL_PRECISION){
y = pv * (1 + nper * rate) + pmt * (1 + rate * dueEndOrBeginning) * nper + fv;
}
else{
f = Math.exp(nper * Math.log(1 + rate));
y = pv * f + pmt * (1 / rate + dueEndOrBeginning) * (f - 1) + fv;
}
y0 = y1;
y1 = y;
++i;
}
rate = Math.round(rate * 12 * 10000) / 100;//端数処理
return rate;
}
//-------------------------------------------------------------------
//JavaScript版エクセルFV（将来価値・運用成果を計算）
//-------------------------------------------------------------------
function MyFV(rate, nper, pmt, pv) {
rate = rate / 12;
fv = -(pmt * (Math.pow(1 + rate, nper) - 1) / rate + pv * Math.pow(1 + rate, nper));
fv = Math.round(fv);//端数処理
return fv;
}
//-------------------------------------------------------------------
//JavaScript版エクセルNPER（支払回数・積立回数を計算）
//-------------------------------------------------------------------
function MyNPER(rate, pmt, pv, fv){
rate = rate / 12;
if ( rate == 0 ){nper = - (fv + pv)/pmt;}
else{nper = Math.log((-fv * rate + pmt)/(pmt + rate * pv))/ Math.log(1 + rate); }
nper = Math.ceil(nper);//切り上げ
return nper;
}
//-------------------------------------------------------------------
//JavaScript版エクセルPMT（支払金額・積立金額を計算）
//-------------------------------------------------------------------
function MyPMT(rate, nper, pv, fv) {
rate = rate / 12;
pmt = rate / (Math.pow(1 + rate, nper) - 1) * -(pv * Math.pow(1 + rate, nper) + fv);
pmt = Math.round(pmt);//端数処理
return pmt;
}
//-------------------------------------------------------------------
//JavaScript版エクセルPV（現在価値・初回の金額を計算）
//-------------------------------------------------------------------
function MyPV(rate, nper, pmt, fv){
rate = rate / 12;
if ( rate == 0 ){pv = -(fv + (pmt * nper));}
else{
x = Math.pow(1 + rate, -nper);
y = Math.pow(1 + rate, nper);
pv = - ( x * ( fv * rate - pmt + y * pmt )) / rate;
}
pv = Math.round(pv);//端数処理
return pv;
}
最後にINUPTタグのコンポーネントですが、これは丸パクリさせていただきましたので「v-modelにフィルタをかける」こちらのご覧ください。
ありがとうございました。
最後に
jQueryよりコードは書きやすいかもしれません。
また、コンポーネントを使いこなせるとより使い勝手がよくなりそうです。
丸パクリさせていただいた部分はイマイチ理解できていないのでもう少し勉強します。
コメント