JavaScriptで年齢計算が簡単！12個のサンプルコードで完全攻略

はじめに

JavaScriptを用いた年齢計算について、初心者の方々にも理解しやすいように解説いたします。

基礎から応用まで、段階的に学んでいきましょう。

12個のサンプルコードを通じて、実践的な使い方や注意点、カスタマイズの方法などを詳しく見ていきます。

●JavaScriptとは

JavaScriptは、ウェブページに動きや対話性を持たせるためのプログラミング言語です。

HTMLとCSSで作られた静的なウェブページに、動的な要素を加えることができます。

今回は、このJavaScriptを使って年齢を計算する方法を解説していきます。

JavaScriptの基本的な知識があれば、より理解が深まりますが、初めての方でも十分に理解できる内容となっています。

●年齢計算の基本

年齢計算の基本は、現在の日付と誕生日を比較することです。

JavaScriptには、日付を扱うためのDateオブジェクトが用意されています。

このDateオブジェクトを使うことで、簡単に日付の計算ができます。

○現在の年齢を取得する

まずは、現在の年齢を計算する基本的なコードを見てみましょう。

// 誕生日を設定（例：1990年1月1日）
const birthday = new Date(1990, 0, 1);

// 現在の日付を取得
const today = new Date();

// 年齢を計算
const age = today.getFullYear() - birthday.getFullYear();

// 計算結果を表示
console.log("年齢:", age);

このコードでは、誕生日をDateオブジェクトで設定し、現在の日付を取得しています。

そして、現在の年から誕生年を引くことで、簡単に年齢を計算しています。

ただし、この方法では誕生日が来ていない場合でも1歳多く計算されてしまう可能性があります。

より正確な計算方法は後ほど紹介します。

○誕生日までの日数を取得する

次に、次の誕生日までの日数を計算するコードを見てみましょう。

// 誕生日を設定（例：1990年1月1日）
const birthday = new Date(1990, 0, 1);

// 今年の誕生日を取得
const thisYearBirthday = new Date(new Date().getFullYear(), birthday.getMonth(), birthday.getDate());

// 誕生日までの日数を計算
const daysLeft = Math.ceil((thisYearBirthday - new Date()) / (1000 * 60 * 60 * 24));

// 計算結果を表示
console.log("誕生日までの日数:", daysLeft);

このコードでは、まず今年の誕生日を計算しています。

そして、その日付と現在の日付の差を計算し、ミリ秒単位の差を日数に変換しています。

Math.ceil()関数を使用して、小数点以下を切り上げることで、残りの日数を整数で表示しています。

●使い方

実際の使用場面を想定したコード例を見ていきましょう。

ウェブフォームから誕生日を入力し、年齢を計算する方法を紹介します。

○フォームから入力された誕生日で年齢を計算する

HTMLとJavaScriptを組み合わせて、誕生日を入力すると年齢が表示されるフォームを作ってみましょう。

<!-- HTML -->
<form id="age-form">
  <label for="birthday">誕生日：</label>
  <input type="date" id="birthday">
  <button type="submit">年齢を計算</button>
</form>
<p id="result"></p>

// JavaScript
document.getElementById("age-form").addEventListener("submit", function(event) {
  event.preventDefault();

  // 誕生日を取得
  const birthday = new Date(document.getElementById("birthday").value);

  // 年齢を計算
  const age = new Date().getFullYear() - birthday.getFullYear();

  // 計算結果を表示
  document.getElementById("result").textContent = "年齢: " + age;
});

このコードでは、フォームのsubmitイベントをリスンしています。

フォームが送信されると、入力された誕生日を取得し、年齢を計算して結果を表示します。

event.preventDefault()を使用することで、フォーム送信時のページリロードを防いでいます。

○年齢に応じたアクセス制限を実装する

Webサイトによっては、年齢制限を設けているものもあります。

そのような場合、ユーザーの年齢を確認し、アクセス制限を実装する必要があります。

ここでは、年齢に応じてアクセス制限を行う関数の例を見てみましょう。

function checkAge(birthday) {
  // 年齢を計算
  const age = new Date().getFullYear() - new Date(birthday).getFullYear();

  // 年齢に応じてアクセス制限
  if (age >= 18) {
    console.log("アクセス許可");
  } else {
    console.log("アクセス禁止");
  }
}

// 使用例
checkAge("2000-01-01"); // 出力: アクセス許可
checkAge("2010-01-01"); // 出力: アクセス禁止

この関数は、誕生日を引数として受け取り、年齢を計算します。

そして、その年齢が18歳以上かどうかを判断し、アクセスの可否を決定します。

実際のWebサイトでは、この結果に基づいてコンテンツの表示・非表示を切り替えたり、別のページにリダイレクトしたりすることができます。

●対処法

年齢計算を行う際には、いくつか注意すべき点があります。

その中でも特に重要なのが、入力された日付の妥当性チェックです。

○日付のバリデーションを行う

ユーザーが入力した日付が有効かどうかを確認することは非常に重要です。

ここでは、日付の妥当性をチェックする関数の例を見てみましょう。

function isValidDate(dateString) {
  const date = new Date(dateString);
  return !isNaN(date.getTime());
}

// 使用例
console.log(isValidDate("2021-09-01")); // 出力: true
console.log(isValidDate("2021-13-01")); // 出力: false

この関数は、与えられた日付文字列が有効な日付かどうかをチェックします。

DateオブジェクトのgetTime()メソッドを使用し、返される値がNaNでないかを確認することで、日付の妥当性を判断しています。

この関数を使用することで、ユーザーが入力した日付が正しいものかどうかを確認できます。

無効な日付が入力された場合は、ユーザーにエラーメッセージを表示するなどの対応が可能です。

●注意点

年齢計算を行う際には、いくつかの注意点があります。

特に重要なのは、うるう年や月ごとの日数の違いを考慮することです。

例えば、2月29日生まれの人の年齢を計算する場合、うるう年でない年には2月29日が存在しないため、特別な処理が必要になります。

また、月をまたぐ計算を行う際には、各月の日数が異なることに注意が必要です。

30日しかない月と31日ある月では、計算結果に影響が出る可能性があります。

これらの問題を回避するためには、Dateオブジェクトのメソッドをうまく活用することが重要です。

具体的には、getTime()メソッドを使用して日付を比較することで、より正確な計算が可能になります。

●カスタマイズ

年齢計算の基本を理解したら、次はより高度な使い方を見ていきましょう。

ここでは、年齢を月単位で計算する方法と、年齢から誕生日を逆算する方法を紹介します。

○年齢を月単位で計算する

年齢を月単位で計算すると、より細かい年齢の表現が可能になります。

ここでは、誕生日から現在までの月数を計算する関数をみてみましょう。

function getAgeInMonths(birthday) {
  const now = new Date();
  const birthDate = new Date(birthday);
  const years = now.getFullYear() - birthDate.getFullYear();
  const months = now.getMonth() - birthDate.getMonth();

  return years * 12 + months;
}

// 使用例
console.log(getAgeInMonths("2000-01-01")); // 出力: 279 (2023年4月時点)

この関数は、年の差に12を掛けて月数に変換し、それに月の差を加えることで、総月数を計算しています。

この方法を使えば、「〇歳〇ヶ月」といった表現も可能になります。

○年齢を逆算して誕生日を求める

逆に、年齢から誕生日を推定することも可能です。

ここでは、現在の年齢から推定誕生日を計算する関数を見てみましょう。

function getBirthdayFromAge(age) {
  const now = new Date();
  const birthYear = now.getFullYear() - age;
  const birthMonth = now.getMonth() + 1;
  const birthDate = now.getDate();

  return `${birthYear}-${birthMonth.toString().padStart(2, '0')}-${birthDate.toString().padStart(2, '0')}`;
}

// 使用例
console.log(getBirthdayFromAge(20)); // 出力: 2003-04-16 (2023年4月16日時点)

この関数は、現在の日付から年齢を引いて推定誕生年を計算し、現在の月日をそのまま使用しています。

ただし、この方法では正確な誕生日は分かりません。

あくまで推定値であることに注意してください。

●応用例

ここまでの知識を応用して、より実践的な例を見ていきましょう。

年齢に関連する様々な機能を実装する方法を紹介します。

○年齢層別のユーザー数をグラフ化する

ウェブサイトやアプリケーションのユーザー分析において、年齢層別のユーザー数を視覚化することは非常に有用です。

ここでは、Chart.jsライブラリを使用してグラフを描画する例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>年齢層別のユーザー数グラフ</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="ageChart"></canvas>
  <script src="script.js"></script>
</body>
</html>

const userBirthdays = [
  "1990-05-12",
  "2005-10-22",
  "1986-02-03",
  "2002-08-14",
  // ...他のユーザーの誕生日データ
];

function calculateAgeGroups(birthdays) {
  const ageGroups = {
    "18歳未満": 0,
    "18-24歳": 0,
    "25-34歳": 0,
    "35-44歳": 0,
    "45-54歳": 0,
    "55-64歳": 0,
    "65歳以上": 0,
  };

  birthdays.forEach((birthday) => {
    const age = calculateAge(birthday);
    if (age < 18) {
      ageGroups["18歳未満"]++;
    } else if (age < 25) {
      ageGroups["18-24歳"]++;
    } else if (age < 35) {
      ageGroups["25-34歳"]++;
    } else if (age < 45) {
      ageGroups["35-44歳"]++;
    } else if (age < 55) {
      ageGroups["45-54歳"]++;
    } else if (age < 65) {
      ageGroups["55-64歳"]++;
    } else {
      ageGroups["65歳以上"]++;
    }
  });

  return ageGroups;
}

const ageGroups = calculateAgeGroups(userBirthdays);

const ctx = document.getElementById("ageChart").getContext("2d");
const chart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: Object.keys(ageGroups),
    datasets: [
      {
        label: "年齢層別のユーザー数",
        data: Object.values(ageGroups),
        backgroundColor: "rgba(75, 192, 192, 0.2)",
        borderColor: "rgba(75, 192, 192, 1)",
        borderWidth: 1,
      },
    ],
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  },
});

このコードでは、ユーザーの誕生日データを年齢層別に集計し、その結果を棒グラフで表示しています。

Chart.jsライブラリを使用することで、美しく対話的なグラフを簡単に作成できます。

○年齢に応じたおすすめ商品を表示する

ECサイトやレコメンデーションシステムにおいて、ユーザーの年齢に基づいて商品を提案することは、顧客満足度向上につながる重要な機能です。

ここで、年齢に応じておすすめ商品を表示する実装例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>年齢に応じたおすすめ商品</title>
</head>
<body>
  <label for="birthday">誕生日を入力してください:</label>
  <input type="date" id="birthday">
  <button id="showRecommendations">おすすめ商品を表示</button>
  <div id="recommendations"></div>
  <script src="script.js"></script>
</body>
</html>

const recommendations = [
  { ageRange: [0, 18], items: ["商品A1", "商品A2", "商品A3"] },
  { ageRange: [18, 24], items: ["商品B1", "商品B2", "商品B3"] },
  { ageRange: [25, 34], items: ["商品C1", "商品C2", "商品C3"] },
  { ageRange: [35, 44], items: ["商品D1", "商品D2", "商品D3"] },
  { ageRange: [45, 54], items: ["商品E1", "商品E2", "商品E3"] },
  { ageRange: [55, 64], items: ["商品F1", "商品F2", "商品F3"] },
  { ageRange: [65, Infinity], items: ["商品G1", "商品G2", "商品G3"] },
];

function findRecommendations(age) {
  for (const recommendation of recommendations) {
    if (age >= recommendation.ageRange[0] && age < recommendation.ageRange[1]) {
      return recommendation.items;
    }
  }
}

const showRecommendationsButton = document.getElementById("showRecommendations");
showRecommendationsButton.addEventListener("click", () => {
  const birthdayInput = document.getElementById("birthday");
  const birthday = birthdayInput.value;
  const age = calculateAge(birthday);
  const recommendedItems = findRecommendations(age);

  const recommendationsDiv = document.getElementById("recommendations");
  recommendationsDiv.innerHTML = `<h2>おすすめ商品</h2><ul>${recommendedItems.map((item) => `<li>${item}</li>`).join("")}</ul>`;
});

このコードでは、年齢層ごとにおすすめ商品を定義しています。

ユーザーが誕生日を入力すると、その年齢に応じたおすすめ商品のリストが表示されます。

実際の運用では、データベースと連携して動的に商品情報を取得したり、機械学習アルゴリズムを用いてより精緻な推薦を行ったりすることも可能です。

また、ユーザーの購買履歴や閲覧履歴なども考慮に入れることで、より個人化されたレコメンデーションを実現できます。

○年齢制限付きの動画再生を実装する

動画配信サービスなどでは、コンテンツに年齢制限を設けることがあります。

ここでは、ユーザーの年齢を確認し、年齢制限に基づいて動画再生を制御する関数の例を見てみましょう。

function calculateAge(birthday) {
  const birthDate = new Date(birthday);
  const now = new Date();
  const age = now.getFullYear() - birthDate.getFullYear();
  const monthDiff = now.getMonth() - birthDate.getMonth();
  if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < birthDate.getDate())) {
    return age - 1;
  }
  return age;
}

function canPlayVideo(ageRestriction, birthday) {
  const age = calculateAge(birthday);
  return age >= ageRestriction;
}

// 使用例
const userBirthday = "2000-01-01";
const ageRestriction = 18;
if (canPlayVideo(ageRestriction, userBirthday)) {
  console.log("動画を再生できます。");
} else {
  console.log("年齢制限のため、動画を再生できません。");
}

この実装では、まずcalculateAge関数で正確な年齢を計算します。

そして、canPlayVideo関数で、ユーザーの年齢が動画の年齢制限を満たしているかどうかを判断します。

実際のアプリケーションでは、この判定結果に基づいて動画プレイヤーの表示・非表示を切り替えたり、別のコンテンツへリダイレクトしたりすることができます。

また、年齢確認のプロセスを厳格化するために、身分証明書のアップロードを求めるなどの追加手順を設けることも検討できます。

○誕生日カウントダウンタイマーを作成する

ユーザーエンゲージメントを高める方法の一つとして、次の誕生日までのカウントダウンタイマーを実装することが考えられます。

ここでは、誕生日までの残り日数を計算して表示する関数の例を見てみましょう。

function daysUntilNextBirthday(birthday) {
  const now = new Date();
  const birthDate = new Date(now.getFullYear(), birthday.getMonth(), birthday.getDate());
  if (now > birthDate) {
    birthDate.setFullYear(now.getFullYear() + 1);
  }
  const oneDay = 24 * 60 * 60 * 1000;
  return Math.ceil((birthDate - now) / oneDay);
}

// 使用例
const userBirthday = new Date("2000-01-01");
console.log("誕生日まであと " + daysUntilNextBirthday(userBirthday) + " 日です。");

この関数は、現在の日付と次の誕生日を比較し、その差分を日数に換算しています。

もし今年の誕生日がすでに過ぎている場合は、来年の誕生日までの日数を計算します。

このような機能は、SNSやカレンダーアプリケーションなどで活用できます。

ユーザーの誕生日が近づくと通知を送ったり、特別なメッセージや特典を提供したりすることで、ユーザー体験を向上させることができるでしょう。

○年齢に応じたフォントサイズの変更を実装する

ウェブサイトのアクセシビリティを向上させる一つの方法として、ユーザーの年齢に基づいてフォントサイズを自動調整する機能が注目されています。

この機能により、高齢者や視力に不安のあるユーザーにとって、より読みやすいウェブページを提供することが可能になります。

ここでは、年齢に応じてフォントサイズを変更する関数の実装例を紹介します。

function setFontSizeBasedOnAge(element, birthday) {
  const age = calculateAge(birthday);
  let fontSize;
  // 年齢に応じてフォントサイズを設定
  if (age < 18) {
    fontSize = "14px";
  } else if (age < 65) {
    fontSize = "16px";
  } else {
    fontSize = "18px";
  }
  element.style.fontSize = fontSize;
}

// 使用例
const userBirthday = "2000-01-01";
const targetElement = document.getElementById("target-element");
setFontSizeBasedOnAge(targetElement, userBirthday);

この関数では、ユーザーの年齢を3つの区分に分けています。

18歳未満の若年層には標準よりやや小さめの14px、18歳から64歳までの成人には標準的な16px、65歳以上の高齢者には読みやすさを考慮して18pxのフォントサイズを設定しています。

実際の運用では、より細かい年齢区分を設けたり、ユーザーの好みに応じて調整できるオプションを用意したりすることも検討に値します。

また、フォントサイズだけでなく、行間やコントラスト比なども同時に調整することで、より包括的なアクセシビリティ対応が可能になります。