【JavaScript】受託案件の手戻り・修正コストをリアルタイム可視化する「赤字化シミュレーター」を単一HTMLで実装する

概要
受託開発・制作において、想定外のMTG時間や追加修正による実質時給の低下・赤字転落リスクをリアルタイムにシミュレーションするツールです。外部通信なし・単一HTMLで完結します。

実装ポイント
リアルタイム計算: input イベントで金額・直接原価・基本工数・リスク工数を即座に合算し、実質時給（純利益 ÷ 総投入時間）を算出。

多段階アラート判定: 目標時給の80%割れ、および労働基準水準割れに応じた動的クラス切り替え。

受託案件・赤字化シミュレーター

🚨 クライアント案件「赤字化シミュレーター」

追加修正・手戻り・MTGで実質時給がどう崩壊するかをリアルタイム試算

📋 案件基本パラメータ

  <div class="form-group">
    <label>受注金額 (税抜)<span class="val-display" id="dispPrice">¥300,000</span></label>
    <input type="number" id="price" value="300000" step="10000" oninput="calc()">
  </div>

  <div class="form-group">
    <label>目標時給 (基準)<span class="val-display" id="dispTargetRate">¥4,000 /h</span></label>
    <input type="number" id="targetRate" value="4000" step="500" oninput="calc()">
  </div>

  <div class="form-group">
    <label>想定実作業時間<span class="val-display" id="dispBaseHours">40 時間</span></label>
    <input type="range" id="baseHours" min="5" max="200" value="40" oninput="calc()">
  </div>

  <div class="form-group">
    <label>外注費・ツール等の直接原価<span class="val-display" id="dispCost">¥0</span></label>
    <input type="number" id="directCost" value="0" step="5000" oninput="calc()">
  </div>

  <h3 style="margin-top:20px; margin-bottom:16px; color:var(--warning);">⚠️ 手戻り・工数膨張リスク</h3>

  <div class="form-group">
    <label>定例・緊急MTG・やりとり時間<span class="val-display" id="dispMtgHours">8 時間</span></label>
    <input type="range" id="mtgHours" min="0" max="60" value="8" oninput="calc()">
  </div>

  <div class="form-group">
    <label>追加修正・仕様変更の発生工数<span class="val-display" id="dispReworkHours">20 時間</span></label>
    <input type="range" id="reworkHours" min="0" max="100" value="20" oninput="calc()">
  </div>
</div>

<!-- 結果エリア -->
<div class="card">
  <div id="statusBanner" class="result-banner safe">
    <div class="status-title" id="statusTitle">利益確保水準</div>
    <div class="status-desc" id="statusDesc">目標時給を維持できています。</div>
  </div>

  <div class="metric-list">
    <div class="metric-item">
      <div class="metric-label">実質時給</div>
      <div class="metric-value" id="actualHourlyRate">¥0 /h</div>
    </div>
    <div class="metric-item">
      <div class="metric-label">純利益 (粗利)</div>
      <div class="metric-value" id="netProfit">¥0</div>
    </div>
    <div class="metric-item">
      <div class="metric-label">総投入時間</div>
      <div class="metric-value" id="totalHours">0 時間</div>
    </div>
    <div class="metric-item">
      <div class="metric-label">目標維持の限界工数</div>
      <div class="metric-value" id="limitHours">0 時間</div>
    </div>
  </div>

  <div style="margin-top:20px; font-size:0.85rem; color:var(--subtext); line-height:1.6;">
    <strong style="color:var(--text);">💡 判定基準</strong><br>
    ・<strong>実質時給が目標の80%未満</strong>：警戒アラート（見積もり見直し推奨）<br>
    ・<strong>実質時給が東京都最低賃金（約¥1,163）未満 / 粗利マイナス</strong>：完全赤字判定
  </div>
</div>