【株FX】「複利電卓」の作り方【完成品を無料配布♪】【プログラミング、JavaScript】【株FXのプログラミングツールの作り方】

投資の毒舌な妹だよ♪ (▶XーTwitter )
妹の中の人はファンドマネージャーとして勤務後 (元機関投資家だよ)、現在は独立して株式投資家として生活しているよ♪
（▶相場予想の実績はコチラ♪ 現在３４０連勝中だよ♪ ）
.
＜最近のオススメ記事♪＞
◯【株FX】『株価２倍』に大幅上昇した銘柄リスト【ダブルバガー】
◎【家族編】人間関係が良くなる上級本質【プロ投資家が「超」徹底解説】
★【残り２６日】【大目玉】「【家族編】人間関係が良くなる上級本質」がもらえる特大キャンペーン【12月31日まで】
.
★「自己紹介」を読んで「私(中の人)の経験が面白そうだ！」と思ったら▼を読んでみてね♪

【株FX】「複利電卓」の作り方【プログラミング、JavaScript】【プロ投資家が解説】

今日は、私(中の人)が「複利電卓」を作ってみたよ♪
これは「株式投資の複利計算」で使える電卓だよ♪
.
今日から複数回の記事に分けて、JavaScriptを使った「複利電卓の作り方」を解説していくよ♪

＜＜複利電卓を作ったコード＞＞

最初に「JavaScript」の完成コードを無料配布するよ♪
.
「完成品の複利電卓ツール」は「こちらのページ」でダウンロードできるよ♪
「お兄ちゃんのパソコンでダウンロードしたら、【複利電卓_投資の毒舌な妹より.html】をダブルクリックしてGoogleChromeやFirefoxなどでツールを開く」だけで、すぐに複利電卓が使えるよ♪
.
お兄ちゃんも、毒舌妹ブログを読んで練習しながら、同じぐらいのクオリティのコードを作れるようになってみよう♪　
.
プログラミング「初心者向け」の記事シリーズだよ♪

※コードが長いので「うわぁあああ！ぜんぜん初心者向けじゃないじゃん！」と絶望したお兄ちゃん、安心してね♪

いくつかの記事に分けながら、コードの書き方を、少しずつ、初心者にも分かりやすいように教えていくよ♪

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>複利電卓_投資の毒舌な妹より</title>
  <style>
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 640px;
      margin: 20px auto;
      padding: 0 16px;
      line-height: 1.6;
    }
    label {
      display: block;
      margin-top: 10px;
    }
    input, select, button {
      margin-top: 4px;
      padding: 4px 6px;
      font-size: 1rem;
    }
    .row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .result {
      margin-top: 16px;
      padding: 10px;
      border-radius: 4px;
      background: #f7f7f7;
    }
    .error {
      color: #c00;
      margin-top: 8px;
    }
  </style>
</head>
<body>
  <h1>複利電卓_投資の毒舌な妹より</h1>

  <!-- 元金 -->
  <label>
    元金（初期投資額）
    <input type="number" id="principal" value="1000" min="0" step="1000">
  </label>

  <!-- 年利 -->
  <label>
    年利（％）
    <input type="number" id="annualRate" value="10" min="0" step="0.01">
  </label>

  <!-- 経過数 + 単位 -->
  <label>
    経過数
    <div class="row">
      <input type="number" id="timeValue" value="10" min="0" step="0.1">
      <select id="timeUnit">
        <option value="year">年</option>
        <option value="month">月</option>
        <option value="day">日</option>
      </select>
    </div>
  </label>

  <!-- 複利周期（年あたりの複利回数） -->
  <label>
    複利周期（年あたりの複利回数）
    <select id="compoundPerYear">
      <option value="1">年1回（年利複利）</option>
      <option value="2">年2回（半年複利）</option>
      <option value="4">年4回（四半期複利）</option>
      <option value="12" selected>年12回（月複利）</option>
      <option value="52">年52回（週複利）</option>
      <option value="365">年365回（日複利）</option>
      <option value="custom">カスタム</option>
    </select>
  </label>

  <!-- カスタム複利周期 -->
  <label id="customCompoundWrapper" style="display: none;">
    カスタム：年あたりの複利回数
    <input type="number" id="customCompound" min="1" step="1" value="1">
  </label>

  <button id="calcBtn">計算する</button>

  <div class="error" id="errorMsg"></div>

  <div class="result" id="result" style="display:none;">
    <div>将来価値（複利計算後の金額）: <strong id="futureValue"></strong> 円</div>
    <div>元金: <span id="principalDisplay"></span> 円</div>
    <div>利息合計: <span id="interestTotal"></span> 円</div>
    <div>実効利回り(単純平均年利換算): <span id="effectiveRate"></span> % / 年（目安）</div>
  </div>

  <script>
    const principalInput = document.getElementById('principal');
    const annualRateInput = document.getElementById('annualRate');
    const timeValueInput = document.getElementById('timeValue');
    const timeUnitSelect = document.getElementById('timeUnit');
    const compoundPerYearSelect = document.getElementById('compoundPerYear');
    const customCompoundWrapper = document.getElementById('customCompoundWrapper');
    const customCompoundInput = document.getElementById('customCompound');

    const calcBtn = document.getElementById('calcBtn');
    const errorMsg = document.getElementById('errorMsg');

    const resultBox = document.getElementById('result');
    const futureValueSpan = document.getElementById('futureValue');
    const principalDisplaySpan = document.getElementById('principalDisplay');
    const interestTotalSpan = document.getElementById('interestTotal');
    const effectiveRateSpan = document.getElementById('effectiveRate');

    // カスタム複利周期の表示切り替え
    compoundPerYearSelect.addEventListener('change', () => {
      if (compoundPerYearSelect.value === 'custom') {
        customCompoundWrapper.style.display = 'block';
      } else {
        customCompoundWrapper.style.display = 'none';
      }
    });

    // 数値フォーマット用（3桁区切り）
    function formatNumber(num, digits = 0) {
      return num.toLocaleString('ja-JP', {
        maximumFractionDigits: digits,
        minimumFractionDigits: digits
      });
    }

    calcBtn.addEventListener('click', () => {
      errorMsg.textContent = '';
      resultBox.style.display = 'none';

      const P = parseFloat(principalInput.value);
      const rPercent = parseFloat(annualRateInput.value);
      const timeValue = parseFloat(timeValueInput.value);

      // 入力チェック
      if (isNaN(P) || P <= 0) {
        errorMsg.textContent = '元金を正しく入力してください（0より大きい数値）。';
        return;
      }
      if (isNaN(rPercent) || rPercent < 0) {
        errorMsg.textContent = '年利を正しく入力してください（0以上の数値）。';
        return;
      }
      if (isNaN(timeValue) || timeValue < 0) {
        errorMsg.textContent = '経過数を正しく入力してください（0以上の数値）。';
        return;
      }

      // 経過年数 t に変換
      let t; // 年
      const unit = timeUnitSelect.value;
      if (unit === 'year') {
        t = timeValue;
      } else if (unit === 'month') {
        t = timeValue / 12;
      } else if (unit === 'day') {
        t = timeValue / 365; // シンプルに365日で換算
      } else {
        t = timeValue;
      }

      // 複利回数 n
      let n;
      if (compoundPerYearSelect.value === 'custom') {
        n = parseInt(customCompoundInput.value, 10);
        if (isNaN(n) || n <= 0) {
          errorMsg.textContent = 'カスタム複利回数を正しく入力してください（1以上の整数）。';
          return;
        }
      } else {
        n = parseInt(compoundPerYearSelect.value, 10);
      }

      // 年利(％) → 小数
      const r = rPercent / 100;

      // 複利計算 A = P * (1 + r/n)^(n*t)
      const A = P * Math.pow(1 + r / n, n * t);
      const interest = A - P;

      // 目安としての単純平均年利（単利換算でのざっくり利回り）
      const effectiveAnnualSimple = t > 0 ? (interest / P) / t * 100 : 0;

      // 結果表示
      futureValueSpan.textContent = formatNumber(A, 2);
      principalDisplaySpan.textContent = formatNumber(P, 2);
      interestTotalSpan.textContent = formatNumber(interest, 2);
      effectiveRateSpan.textContent = formatNumber(effectiveAnnualSimple, 2);

      resultBox.style.display = 'block';
    });
  </script>
</body>
</html>