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

JavaScript

2026.08.052026.08.08

1日目のゴールと全体像

年齢計算機アプリ 1日目のテーマは 「生年月日を入力すると“現在の年齢”を計算して表示する、最小の動くWebアプリを作ること」 です。

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

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

を使って、 「生年月日を入力 → 年齢を計算 → 結果を表示」 という流れを作ります。

年齢計算の仕組みを理解する

年齢計算はとてもシンプルです。

基本式

現在の年 - 生まれた年

ただし、誕生日を迎えていない場合は 1歳引く必要があります。

これを JavaScript の Date オブジェクトで扱います。

HTML と JavaScript の関係

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

年齢計算機の画面（HTML）

<div>
  <label>生年月日：</label>
  <input id="birthInput" type="date">

  <button id="calcBtn">年齢を計算</button>

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

JavaScript がやること

birthInput の値を取得
年齢を計算
result に表示

これが DOM操作 の基本です。

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

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

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

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

JavaScript

深掘りポイント

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

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

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

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

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

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

JavaScript

深掘りポイント

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

年齢計算の関数を作る

function calcAge(birthDate) {
  const today = new Date();
  const birth = new Date(birthDate);

  let age = today.getFullYear() - birth.getFullYear();

  const hasBirthdayPassed =
    today.getMonth() > birth.getMonth() ||
    (today.getMonth() === birth.getMonth() && today.getDate() >= birth.getDate());

  if (!hasBirthdayPassed) {
    age -= 1;
  }

  return age;
}

function calcAge(birthDate) {
  const today = new Date();
  const birth = new Date(birthDate);

  let age = today.getFullYear() - birth.getFullYear();

  const hasBirthdayPassed =
    today.getMonth() > birth.getMonth() ||
    (today.getMonth() === birth.getMonth() && today.getDate() >= birth.getDate());

  if (!hasBirthdayPassed) {
    age -= 1;
  }

  return age;
}

JavaScript

深掘りポイント

new Date() で日付オブジェクトを作る
月や日を比較して「誕生日を迎えたか」を判定
条件分岐で年齢を調整する

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

button.addEventListener("click", function() {
  const birthValue = birthInput.value;

  if (!birthValue) {
    result.textContent = "生年月日を入力してください。";
    return;
  }

  const age = calcAge(birthValue);
  result.textContent = `あなたの年齢は ${age} 歳です。`;
});

button.addEventListener("click", function() {
  const birthValue = birthInput.value;

  if (!birthValue) {
    result.textContent = "生年月日を入力してください。";
    return;
  }

  const age = calcAge(birthValue);
  result.textContent = `あなたの年齢は ${age} 歳です。`;
});

JavaScript

深掘りポイント

.value は「入力された文字列」
入力が空の場合はエラー表示（条件分岐）
.textContent で画面に文字を表示

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

HTML（画面）

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

  <label>生年月日：</label>
  <input id="birthInput" type="date">

  <button id="calcBtn">年齢を計算</button>

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

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

JavaScript（動き）

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

// 年齢計算関数
function calcAge(birthDate) {
  const today = new Date();
  const birth = new Date(birthDate);

  let age = today.getFullYear() - birth.getFullYear();

  const hasBirthdayPassed =
    today.getMonth() > birth.getMonth() ||
    (today.getMonth() === birth.getMonth() && today.getDate() >= birth.getDate());

  if (!hasBirthdayPassed) {
    age -= 1;
  }

  return age;
}

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

  if (!birthValue) {
    result.textContent = "生年月日を入力してください。";
    return;
  }

  const age = calcAge(birthValue);
  result.textContent = `あなたの年齢は ${age} 歳です。`;
});

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

// 年齢計算関数
function calcAge(birthDate) {
  const today = new Date();
  const birth = new Date(birthDate);

  let age = today.getFullYear() - birth.getFullYear();

  const hasBirthdayPassed =
    today.getMonth() > birth.getMonth() ||
    (today.getMonth() === birth.getMonth() && today.getDate() >= birth.getDate());

  if (!hasBirthdayPassed) {
    age -= 1;
  }

  return age;
}

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

  if (!birthValue) {
    result.textContent = "生年月日を入力してください。";
    return;
  }

  const age = calcAge(birthValue);
  result.textContent = `あなたの年齢は ${age} 歳です。`;
});