投資収益率（ROI）計算機

カテゴリー：投資

---

// Wait for the DOM to fully load before executing JavaScript document.addEventListener('DOMContentLoaded', function() { initializeChart(); // ページ読み込み時にデフォルト値でチャートを初期化 calculateROI(); // デフォルト値で計算とチャートを更新 }); // Global variable for the Chart instance let roiChart; // Function to initialize the Chart.js pie chart function initializeChart() { const ctx = document.getElementById('roiChart').getContext('2d'); roiChart = new Chart(ctx, { type: 'pie', data: { labels: ['投資額', '利益'], // 'Invested', 'Profit' datasets: [{ data: [50000, 50000], // チャートの初期デフォルト値 backgroundColor: ['#2196F3', '#4CAF50'], // 投資額は青、利益は緑 borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { padding: 20, font: { size: 14, family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" }, color: '#333' } } } } }); } // Function to format input fields with commas while typing function formatInput(input) { // 数字以外の文字（カンマを除く）を削除 input.value = input.value.replace(/[^0-9]/g, ""); // 数字にカンマを追加 input.value = new Intl.NumberFormat('en-US').format(input.value); } // Add event listeners to format the input values with commas and update the calculation document.getElementById('amountInvested').addEventListener('input', function() { formatInput(this); calculateROI(); // 値が変更されたときに再計算 }); document.getElementById('amountReturned').addEventListener('input', function() { formatInput(this); calculateROI(); // 値が変更されたときに再計算 }); // Function to calculate ROI function calculateROI() { // 入力値を取得し、浮動小数点数に変換（カンマを削除） const amountInvested = parseFloat(document.getElementById('amountInvested').value.replace(/,/g, '')) || 50000; const amountReturned = parseFloat(document.getElementById('amountReturned').value.replace(/,/g, '')) || 100000; // 入力値の検証 if (isNaN(amountInvested) || isNaN(amountReturned)) { alert("有効な投資額とリターン額を入力してください。"); // "Please enter valid investment and return amounts." return; } const fromDate = new Date(document.getElementById('fromDate').value); const toDate = new Date(document.getElementById('toDate').value); const investmentLength = (toDate - fromDate) / (1000 * 3600 * 24 * 365.25); // 日付の検証 if (investmentLength <= 0) { alert("終了日は開始日より後でなければなりません。"); // "End date must be after start date." return; } // 投資利益、ROI、年率換算ROIを計算 const investmentGain = amountReturned - amountInvested; const roi = ((investmentGain) / amountInvested) * 100; const annualizedRoi = (Math.pow((amountReturned / amountInvested), (1 / investmentLength)) - 1) * 100; // 結果フィールドをフォーマットされた数値で更新 document.getElementById('investmentGain').innerText = formatCurrency(investmentGain); document.getElementById('roi').innerText = formatPercentage(roi); document.getElementById('annualizedRoi').innerText = formatPercentage(annualizedRoi); document.getElementById('investmentLength').innerText = `${investmentLength.toFixed(3)} 年`; // "years" // 新しいデータでチャートを更新 updateChart(amountInvested, investmentGain); } // Function to format currency function formatCurrency(value) { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value); } // Function to format percentage function formatPercentage(value) { return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value) + '%'; } // Function to update the Chart.js chart function updateChart(amountInvested, investmentGain) { if (roiChart) { // データセットの値を更新 roiChart.data.datasets[0].data = [amountInvested, investmentGain]; roiChart.update(); } } // Add event listeners for date inputs to recalculate on change document.getElementById('fromDate').addEventListener('input', calculateROI); document.getElementById('toDate').addEventListener('input', calculateROI); // Clear button functionality document.getElementById('clearButton')?.addEventListener('click', function() { // 入力フィールドをクリア document.getElementById('amountInvested').value = ''; document.getElementById('amountReturned').value = ''; document.getElementById('fromDate').value = ''; document.getElementById('toDate').value = ''; // 結果をクリア document.getElementById('investmentGain').innerText = '$0.00'; document.getElementById('roi').innerText = '0.00%'; document.getElementById('annualizedRoi').innerText = '0.00%'; document.getElementById('investmentLength').innerText = '0.000 年'; // "years" // ゼロ値でチャートを更新 updateChart(0, 0); });