​IAIA　【下町オヤジの「初めてのバイブコーディング」格闘記🔥　　　まさおとスマホ1台で挑戦！】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>必要栄養素チェッカー</title>
  <style>
    body {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      background-color: #f4f6f8 ;
      margin: 0;
      padding: 20px;
      color: #333 ;
    }
    .card {
      max-width: 450px;
      margin: 0 auto;
      background: #fff ;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
      padding: 24px;
    }
    h1 {
      text-align: center;
      color: #2c3e50 ;
      font-size: 22px;
      margin-bottom: 20px;
    }
    .form-group {
      margin-bottom: 16px;
    }
    label {
      display: block;
      font-weight: bold;
      margin-bottom: 6px;
      font-size: 14px;
    }
    input, select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc ;
      border-radius: 8px;
      box-sizing: border-box;
      font-size: 16px;
    }
    button {
      width: 100%;
      padding: 14px;
      background-color: #27ae60 ;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      margin-top: 10px;
    }
    button:hover {
      background-color: #219150 ;
    }
    .result {
      margin-top: 24px;
      padding-top: 16px;
      border-top: 2px dashed #eee ;
      display: none;
    }
    .result h2 {
      font-size: 18px;
      color: #2c3e50 ;
      margin-bottom: 12px;
    }
    .result-item {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      font-size: 15px;
      border-bottom: 1px solid #f0f0f0 ;
    }
    .val {
      font-weight: bold;
      color: #27ae60 ;
    }
  </style>
</head>
<body>

<div class="card">
  <h1>必要栄養素チェッカー</h1>
  
  <div class="form-group">
    <label>性別</label>
    <select id="gender">
      <option value="male" selected>男性</option>
      <option value="female">女性</option>
    </select>
  </div>

  <div class="form-group">
    <label>年齢 (歳)</label>
    <input type="number" id="age" value="19">
  </div>

  <div class="form-group">
    <label>身長 (cm)</label>
    <input type="number" id="height" value="179">
  </div>

  <div class="form-group">
    <label>体重 (kg)</label>
    <input type="number" id="weight" value="68">
  </div>

  <div class="form-group">
    <label>身体活動レベル</label>
    <select id="activity">
      <option value="1.5">低い（デスクワーク中心）</option>
      <option value="1.75" selected>普通（立ち仕事・軽い運動）</option>
      <option value="2.0">高い（肉体労働・活発な運動）</option>
    </select>
  </div>

  <button onclick="calculate()">必要栄養素を計算する</button>

  <div class="result" id="resultBlock">
    <h2>1日の推定必要量</h2>
    <div class="result-item"><span>推定エネルギー</span><span class="val" id="resCal"></span></div>
    <div class="result-item"><span>タンパク質 (P)</span><span class="val" id="resP"></span></div>
    <div class="result-item"><span>脂質 (F)</span><span class="val" id="resF"></span></div>
    <div class="result-item"><span>炭水化物 (C)</span><span class="val" id="resC"></span></div>
    <div class="result-item"><span>ビタミンC</span><span class="val" id="resB1">100 mg</span></div>
    <div class="result-item"><span>ビタミンB1</span><span class="val" id="resVitB1"></span></div>
  </div>
</div>

<script>
function calculate() {
  const gender = document.getElementById('gender').value;
  const age = parseFloat(document.getElementById('age').value);
  const height = parseFloat(document.getElementById('height').value);
  const weight = parseFloat(document.getElementById('weight').value);
  const activity = parseFloat(document.getElementById('activity').value);

  if (!age || !height || !weight) {
    alert('すべての項目を入力してください');
    return;
  }

  // ハリス・ベネディクト方程式による基礎代謝量 (BMR)
  let bmr = 0;
  if (gender === 'male') {
    bmr = 13.397 * weight + 4.799 * height - 5.677 * age + 88.362;
  } else {
    bmr = 9.247 * weight + 3.098 * height - 4.33 * age + 447.593;
  }

  // 1日の総消費エネルギー (TDEE)
  const tdee = Math.round(bmr * activity);

  // PFCバランス目安 (P:20%, F:25%, C:55%)
  const protein = Math.round((tdee * 0.20) / 4);
  const fat = Math.round((tdee * 0.25) / 9);
  const carb = Math.round((tdee * 0.55) / 4);

  // ビタミンB1推奨量
  const b1 = (gender === 'male') ? '1.4 mg' : '1.1 mg';

  // 画面に反映
  document.getElementById('resCal').innerText = tdee + ' kcal';
  document.getElementById('resP').innerText = protein + ' g';
  document.getElementById('resF').innerText = fat + ' g';
  document.getElementById('resC').innerText = carb + ' g';
  document.getElementById('resVitB1').innerText = b1;

  document.getElementById('resultBlock').style.display = 'block';
}
</script>

</body>
</html>