投資シミュレーション

<h2>投資シミュレーション</h2>

<!-- 入力フォーム -->
<form id="simulationForm">
    <label>初期投資額（円）: <input type="number" id="initialInvestment" value="100000" required></label><br>
    <label>積立投資額（月/円）: <input type="number" id="monthlyInvestment" value="30000" required></label><br>
    <label>投資期間（年）: <input type="number" id="investmentPeriod" value="30" required></label><br>
    <label>年利率（%）: <input type="number" id="annualRate" value="5" required></label><br>
    <button type="button" onclick="calculateInvestment()">計算する</button>
</form>

<!-- 結果表示エリア -->
<h3>結果</h3>
<table border="1" id="resultTable">
    <thead>
        <tr>
            <th>年数</th>
            <th>元本（累計）</th>
            <th>利益</th>
            <th>累計資産額</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<canvas id="investmentChart" width="400" height="200"></canvas>

<script>
    function calculateInvestment() {
        // 入力値の取得
        const initialInvestment = parseFloat(document.getElementById('initialInvestment').value);
        const monthlyInvestment = parseFloat(document.getElementById('monthlyInvestment').value) * 12; // 年間積立額
        const investmentPeriod = parseInt(document.getElementById('investmentPeriod').value);
        const annualRate = parseFloat(document.getElementById('annualRate').value) / 100;

        // 結果エリアの初期化
        const resultTableBody = document.querySelector("#resultTable tbody");
        resultTableBody.innerHTML = "";
        const labels = [];
        const cumulativeData = [];
        const profitData = [];

        // シミュレーション計算
        let principal = initialInvestment;
        let totalInvestment = initialInvestment;
        let cumulativeAmount = initialInvestment;

        for (let year = 1; year <= investmentPeriod; year++) {
            cumulativeAmount += monthlyInvestment;
            const profit = cumulativeAmount * annualRate;
            cumulativeAmount += profit;

            // データの更新
            labels.push(year);
            cumulativeData.push(cumulativeAmount);
            profitData.push(profit);

            // テーブルに行を追加
            const row = document.createElement("tr");
            row.innerHTML = `
                <td>${year}</td>
                <td>${(totalInvestment += monthlyInvestment).toLocaleString()}</td>
                <td>${profit.toLocaleString()}</td>
                <td>${cumulativeAmount.toLocaleString()}</td>
            `;
            resultTableBody.appendChild(row);
        }

        // グラフ描画
        const ctx = document.getElementById('investmentChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: '累計資産額',
                        data: cumulativeData,
                        borderColor: 'blue',
                        backgroundColor: 'rgba(0, 0, 255, 0.1)',
                        fill: true,
                    },
                    {
                        label: '利益',
                        data: profitData,
                        borderColor: 'green',
                        backgroundColor: 'rgba(0, 255, 0, 0.1)',
                        fill: true,
                    }
                ]
            },
            options: {
                scales: {
                    x: { title: { display: true, text: '年数' } },
                    y: { title: { display: true, text: '金額（円）' } }
                }
            }
        });
    }
</script>