JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作 BMI計算機編

JavaScript

2026.08.052026.08.08

1日目のゴールと全体像

BMI計算機アプリ 1日目のテーマは 「JavaScriptでHTMLを動かし、ユーザー入力を使ってBMIを計算する“最小の動くアプリ”を作ること」 です。

この日はまだ複雑な機能は入れず、まずは

HTML/CSS と JavaScript の連携
DOM操作（HTML要素をJavaScriptで触る）
イベント処理（ボタンを押したら計算する）
JavaScriptの基本文法（変数・条件分岐・関数）

を使って、 「身長と体重を入力 → BMIを計算 → 結果を表示」 という流れを作ります。

HTML と JavaScript の関係を理解する

JavaScript は単体では画面を持ちません。 HTML が「画面」、JavaScript が「動き」を担当します。

例：BMI計算機の画面（HTML）

<div>
  <label>身長(cm)：</label>
  <input id="heightInput" type="number">

  <label>体重(kg)：</label>
  <input id="weightInput" type="number">

  <button id="calcBtn">BMIを計算</button>

  <p id="result"></p>
</div>

JavaScript がやること

heightInput の値を取得
weightInput の値を取得
BMIを計算
result に表示

この「HTMLの要素をJavaScriptで触る」ことを DOM操作 と呼びます。

DOM操作の基本：document.getElementById()

HTMLの要素をJavaScriptで触るには、 IDを使って要素を取得 します。

const heightInput = document.getElementById("heightInput");
const weightInput = document.getElementById("weightInput");
const result = document.getElementById("result");

const heightInput = document.getElementById("heightInput");
const weightInput = document.getElementById("weightInput");
const result = document.getElementById("result");

JavaScript

深掘りポイント

document は「HTML全体」
getElementById() は「IDで要素を探す」
取得した要素は 変数に入れて使う

DOM操作は JavaScript の基礎中の基礎です。

イベント処理：ボタンを押したら計算する

JavaScriptで「ボタンを押したら何かする」には イベントリスナー を使います。

const button = document.getElementById("calcBtn");

button.addEventListener("click", function() {
  console.log("ボタンが押されました！");
});

const button = document.getElementById("calcBtn");

button.addEventListener("click", function() {
  console.log("ボタンが押されました！");
});

JavaScript

深掘りポイント

"click" は「クリックされたとき」
function() { ... } の中に「押されたらやること」を書く
これが イベント処理 の基本形

BMI計算の公式

BMIは次の式で求めます。

$B M I = \frac{体重 (k g)}{(身長 (m))^{2}}$

身長は cm で入力されるので、 m に変換する必要があります（÷100）。

BMI計算の関数を作る

function calcBMI(heightCm, weightKg) {
  const heightM = heightCm / 100;  // cm → m
  const bmi = weightKg / (heightM * heightM);
  return bmi;
}

function calcBMI(heightCm, weightKg) {
  const heightM = heightCm / 100;  // cm → m
  const bmi = weightKg / (heightM * heightM);
  return bmi;
}

JavaScript

深掘りポイント

関数は「処理のまとまり」
return で結果を返す
BMI計算を関数にしておくと、後で再利用できる

入力値を取得して計算する流れ

button.addEventListener("click", function() {
  const height = Number(heightInput.value); // 入力値を数値に変換
  const weight = Number(weightInput.value);

  if (height <= 0 || weight <= 0) {
    result.textContent = "正しい値を入力してください。";
    return;
  }

  const bmi = calcBMI(height, weight);
  result.textContent = `あなたのBMIは ${bmi.toFixed(1)} です。`;
});

button.addEventListener("click", function() {
  const height = Number(heightInput.value); // 入力値を数値に変換
  const weight = Number(weightInput.value);

  if (height <= 0 || weight <= 0) {
    result.textContent = "正しい値を入力してください。";
    return;
  }

  const bmi = calcBMI(height, weight);
  result.textContent = `あなたのBMIは ${bmi.toFixed(1)} です。`;
});

JavaScript

深掘りポイント

.value は「入力された文字列」
Number() で数値に変換
条件分岐で「正しい値かどうか」をチェック
.textContent で画面に文字を表示
toFixed(1) で小数1桁に整形

1日目の完成コード（HTML＋JavaScript）

HTML（画面）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>BMI計算機</title>
</head>
<body>
  <h2>BMI計算機</h2>

  <label>身長(cm)：</label>
  <input id="heightInput" type="number">

  <label>体重(kg)：</label>
  <input id="weightInput" type="number">

  <button id="calcBtn">BMIを計算</button>

  <p id="result"></p>

  <script src="script.js"></script>
</body>
</html>

JavaScript（動き）

// HTML要素を取得
const heightInput = document.getElementById("heightInput");
const weightInput = document.getElementById("weightInput");
const result = document.getElementById("result");
const button = document.getElementById("calcBtn");

// BMI計算関数
function calcBMI(heightCm, weightKg) {
  const heightM = heightCm / 100;  // cm → m
  const bmi = weightKg / (heightM * heightM);
  return bmi;
}

// ボタンが押されたら計算する
button.addEventListener("click", function() {
  const height = Number(heightInput.value);
  const weight = Number(weightInput.value);

  // 入力チェック
  if (height <= 0 || weight <= 0) {
    result.textContent = "正しい値を入力してください。";
    return;
  }

  const bmi = calcBMI(height, weight);
  result.textContent = `あなたのBMIは ${bmi.toFixed(1)} です。`;
});

// HTML要素を取得
const heightInput = document.getElementById("heightInput");
const weightInput = document.getElementById("weightInput");
const result = document.getElementById("result");
const button = document.getElementById("calcBtn");

// BMI計算関数
function calcBMI(heightCm, weightKg) {
  const heightM = heightCm / 100;  // cm → m
  const bmi = weightKg / (heightM * heightM);
  return bmi;
}

// ボタンが押されたら計算する
button.addEventListener("click", function() {
  const height = Number(heightInput.value);
  const weight = Number(weightInput.value);

  // 入力チェック
  if (height <= 0 || weight <= 0) {
    result.textContent = "正しい値を入力してください。";
    return;
  }

  const bmi = calcBMI(height, weight);
  result.textContent = `あなたのBMIは ${bmi.toFixed(1)} です。`;
});