【JavaScript】自動計算フォームの作り方【資産運用】

【JavaScript】自動計算フォームの作り方【資産運用】

Webページに料金シミュレータなどのユーザーが入力した値に基づいて、自動で計算を行い結果を算出するフォームを設置したいことがあると思います。

JavaScriptを使えば、そのような自動計算フォームを作ることが可能です！

この記事ではその作成例について解説します。今回は例として、JavaScript(jQuery)を使い複利計算を用いた資産運用シミュレータを作成します。つみたてNISA等で資産運用している方が、将来どのぐらいの資産を手にできるか、シミュレーションすることができます。

完成した資産運用シミュレータ

初めに完成したプログラムを載せておきます。数値を入力あるいはボタンで加減することで、シミュレーション結果が表示されます。

See the Pen
Conpound Interest by Michael (@colorpiece)
on CodePen.

※レスポンシブ対応していないので、見ている端末の画面幅によっては、表示が多少崩れているかもしれません。（今回のメインの目的は、計算シミュレータの作成なのでレスポンシブ対応しておりません。）

GitHubにもアップしていますので、こちらからもコードの確認が可能です。

利用上の注意点

・実際の資産運用では、税金、手数料等が差し引かれる為、試算結果と実際の資産推移は異なります。
・為替の変動、利回りの変動は考慮されていません。
・本シミュレータ結果の利用に伴う損害については、当サイト及び当サイトの管理者は一切の責任を負うものではありません。

自動計算フォームの作り方の解説

ここからは、主にJSのコードについて解説していきます。一部ポイントとなるHTMLのコードについても触れています。

初期設定

const initial_base = 30000;
const initial_rate = 5;
const initial_duration = $('#duration').val();

$('#base').val(initial_base);
$('#rate').val(initial_rate);

毎月の積立額、想定年利回りの初期値（=ページを読み込んだ際に表示される値）は、JSで表示させています。また、プルダウン形式の運用期間についても、選択している値をJSで取得しています。

変数を宣言し、初期値を代入、そしてinputタグにvalue属性値を与えます。

$('対象のinputタグ').val(値);

これでinputタグにvalue属性値を与えることができます。

一方、value属性値を取得したい場合は、val()の括弧内を空にします。

入力値に桁数制限を設ける

function sliceMaxLength(elem, maxLength) {
  elem.value = elem.value.slice(0, maxLength);
}

キーボード入力に対応している毎月の積立額、想定年利回りについては、入力桁数制限をかけて無限に数字が入力できないようにしています。

そのために2つの引数を持つ関数sliceMaxLengthを作成し、HTML側でinputタグにoninput属性を指定します。

<input oninput="sliceMaxLength(this, 桁数)">

ちなみに、この制限は無くても計算機として機能します。

試算結果の数値をカンマ区切りにする

function comma(num) {
  const price = String(num).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
  return price;
};

後々試算結果を出力する際に使用する関数を先に作成しています。

今回は数字の桁数が多くなり読みにくくなることが予測できるので、引数に渡した数をカンマ区切りで返してくれる関数を作成し、結果出力時に使い回します。

関数の中身は、ただ数字を3桁毎に区切ってカンマを打っているだけなので、詳細は割愛します。決まり文句のようなものだと思って使って問題ありません。

自動計算と結果出力

自動計算

自動計算フォームを作成する際、最も重要となるのは計算式です。

今回は、「合計資産 = 毎月の積立額 × 12ヶ月 × (1 + 想定年利回り)^運用期間」で算出しています。

自動計算と結果出力コード

let base = initial_base;
let rate = initial_rate;
let duration = initial_duration;
let invest = 0;
let sum = 0

function resultCalc() {
  invest = 0;
  sum = 0

  // 試算結果表のヘッダーを出力
  $('#result').append('<tr><th>年数</th><th>元本</th><th>合計資産</th><th>運用益</th></tr>');

  // 試算結果を一行ずつ出力
  for (let i = 1; i <= duration; i++) {
    invest = base * 12 * i;
    sum += Math.round(base * 12 * ((1 + rate / 100) ** i));
    benefit = sum - invest;
    $('#result').append('<tr><td>' + i + '年後</td><td>¥' + comma(invest) + '</td><td>¥' + comma(sum) + '</td><td>+ ¥' + comma(benefit) + '</td></tr>');
  }
}
resultCalc();

自動計算を行い、その結果を出力する関数resultCalcを作成しています。関数の中身はシンプルで、前述した計算式に基づいて1年ずつ計算を行い、結果を表に出力するという作業を繰り返すだけです。

また、一つ前の工程で作った関数commaを使って、計算結果は3桁毎のカンマ区切りにしてから出力しています。

なお、結果を表に出力するコードは以下の通りです。

$('対象のtableタグ').append(出力内容);

ボタンが押された時、運用期間が選択された時の処理

各入力エリアの脇にある+, – ボタンが押された時、あるいは他の運用期間が選択された時の処理は以下の通りです。

$(function() {
  $('#baseSub').on('click', function() {
    $('#result').empty();
    if(base < 10000) {
      base = 0;
    } else {
      base -= 10000;
    }
    $('#base').val(base);
    resultCalc();
  });
  $('#baseAdd').on('click', function() {
    $('#result').empty();
    if(base < 990000) {
      base += 10000;
    } else {
      base = 999999;
    }
    $('#base').val(base);
    resultCalc();
  });

  $('#rateSub').on('click', function() {
    $('#result').empty();
    if(rate <= 0) {
      rate = 0;
    } else {
      rate --;
      $('#rate').val(rate);
    }
    resultCalc();
  });
  $('#rateAdd').on('click', function() {
    $('#result').empty();
    if(rate < 99) {
      rate ++;
      $('#rate').val(rate);
    }
    resultCalc();
  });

  $('#duration').change(function() {
    $('#result').empty();
    duration = $('#duration').val();
    resultCalc();
  });
});

それぞれのアクションが行われた際の処理を記載しています。基本的にはボタンが押される度、運用期間が変更される度に、一つ前の工程で作成した関数resultCalcを実行しています。

そのまま実行すると、ボタンを押す度に表の下に「1年後」の計算結果から追記されてしまうので、関数を実行する前にtableタグの中身をリセットしています。

ボタンが押された時の処理は以下の通りです。

$('対象のボタン').on('click', function() {
  // 処理内容
});

一方、プルダウン形式の運用期間が変更された時の処理は以下の通りです。

$('対象のselectタグ').change(function() {
  // 処理内容
});

また、ボタンが何度も押され数値が無限に増加or減少することを避ける為の条件を設けています。

今回の仕様をまとめると、次の通りです。

• 毎月の積立額: ¥0〜¥999,999 / ボタン1回押下で±¥10,000
• 想定年利回り: 0%〜99% / ボタン1回押下で±1%

数値の入力があった場合の処理

$(function() {
  $('#base').change(function() {
    $('#result').empty();
    base = Number($('#base').val());
    resultCalc();
  });
  $('#rate').change(function() {
    $('#result').empty();
    rate = Number($('#rate').val());
    resultCalc();
  });
});

inputタグにキーボードから入力があった場合の処理は、以下の構文で実行できます。

$('対象のinputタグ').change(function() {
  // 処理内容
});

おわりに

制作した計算フォームはGitHubにアップしています。

また、今回制作したファイル一式をダウンロードできるページを用意しました。
必要な方はこちらからどうぞ。
ダウンロードページ

今回は資産運用を例とした計算フォームでしたが、例えば自社サービスの料金プランシミュレーション、購入商品の合計金額や獲得ポイントを算出するプログラム等、JavaScriptを使えば様々な形に応用が可能です。

当サイトでは、このようなプログラムをWebページに搭載する依頼を受け付けております。お見積り、ご相談希望の方は、お問い合わせフォームよりご連絡をお願い致します。