資産運用シミュレーションに使える！JavaScriptで作る複利計算プログラムを作ってみた
このプログラムでは、年利を月利に換算して計算しています。そのため、毎月収益が増え続ける計算になっており、実際の収益はもう少し低くなる可能性があります。インデックス投資などでは数十年での年利が計算できますので、長期で見た場合はシミュレートしやすいと思います。
収益だけでなく、グラフも表示できるようになっているため、視覚的に把握することができます
プログラム
JavaScript
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複利計算プログラム</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h2>複利計算プログラム</h2>
<form>
<label for="initial_investment">初期投資額（万円）</label>
<input type="number" id="initial_investment" name="initial_investment"><br><br>
<label for="monthly_deposit">毎月の積立額（円）</label>
<input type="number" id="monthly_deposit" name="monthly_deposit"><br><br>
<label for="annual_interest_rate">運用利回り年利（％）</label>
<input type="number" id="annual_interest_rate" name="annual_interest_rate"><br><br>
<label for="investment_term">投資期間（年）</label>
<input type="number" id="investment_term" name="investment_term"><br><br>
<input type="button" id="calculateButton" value="計算する">
</form>
<br>
<canvas id="myChart" width="400" height="400"></canvas>
<br>
<div id="result"></div>
<script>
let myChart;
function calculate() {
const initialInvestment = parseFloat(document.getElementById('initial_investment').value) * 10000;
const monthlyDeposit = parseFloat(document.getElementById('monthly_deposit').value);
const annualInterestRate = parseFloat(document.getElementById('annual_interest_rate').value);
const investmentTerm = parseFloat(document.getElementById('investment_term').value);
const monthlyInterestRate = annualInterestRate / 12 / 100;
let finalAmount = initialInvestment;
const principalData = [];
const earningsData = [];
for (let i = 0; i <= investmentTerm * 12; i++) {
const principal = initialInvestment + (i * monthlyDeposit);
const earnings = finalAmount - principal;
principalData.push((principal / 10000).toFixed(2));
earningsData.push((earnings / 10000).toFixed(2));
finalAmount = (finalAmount + monthlyDeposit) * (monthlyInterestRate+1);
}
const ctx = document.getElementById('myChart').getContext('2d');
// Destroy the previous chart instance if it exists
if (myChart) {
myChart.destroy();
}
myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [...Array(investmentTerm * 12 + 1).keys()].map((value, index) => {
return index % 12 === 0 ? value / 12 + '年目' : '';
}),
datasets: [
{
label: '元本',
data: principalData,
backgroundColor: 'rgba(75, 192, 192, 0.5)',
},
{
label: '運用収益',
data: earningsData,
backgroundColor: 'rgba(255, 99, 132, 0.5)',
},
],
},
options: {
scales: {
y: {
stacked: true,
ticks:
{
callback: function(value, index, values) {
return value + ' 万円';
}
}
},
x: {
stacked: true,
ticks: {
autoSkip: false,
maxRotation: 0,
minRotation: 0
}
}
}
}
});
const totalInvestment = initialInvestment + monthlyDeposit * investmentTerm * 12;
const totalReturn = finalAmount - totalInvestment + monthlyDeposit;
finalAmount = finalAmount + monthlyDeposit;
const resultElement = document.getElementById('result');
resultElement.innerHTML = `運用資産額：${finalAmount.toFixed(0).toLocaleString()}円<br>`;
resultElement.innerHTML += `運用収益：${totalReturn.toFixed(0).toLocaleString()}円<br>`;
resultElement.innerHTML += `元本：${totalInvestment.toLocaleString()}円`;
}
document.getElementById("calculateButton").addEventListener("click", calculate);
</script>
</body>
</html>ブログ記事はこちらです
実際のシミュレーションも可能です
コメント