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

JavaScriptを使った年齢計算の解説図 JS
この記事は約17分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで年齢計算が簡単にできるようになります。JavaScript初心者でも分かるように、基本から応用まで徹底的に解説しています。

12個のサンプルコードを用いて、使い方や対処法、注意点、カスタマイズ方法を学びましょう。

それでは早速、JavaScriptで年齢計算をマスターしましょう!

●JavaScriptとは

JavaScriptは、ウェブページに動的な要素を追加するためのプログラミング言語です。

HTMLとCSSで構築されたウェブページにインタラクティブ性や動きを与えることができます。

今回は、JavaScriptを使って年齢計算を行う方法を学んでいきます。

●年齢計算の基本

年齢計算では、主に現在の日付と誕生日を使って計算を行います。

JavaScriptでは、Dateオブジェクトを使って日付を扱うことができます。

○サンプルコード1:現在の年齢を取得する

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

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

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

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

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

その後、年齢を計算し、コンソールに表示しています。

○サンプルコード2:誕生日までの日数を取得する

// 誕生日を設定(例: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);

上記のサンプルコードでは、今年の誕生日を取得し、現在の日付との差を計算しています。

その後、誕生日までの日数を求め、コンソールに表示しています。

●使い方

○サンプルコード3:フォームから入力された誕生日で年齢を計算する

<!-- 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()を使用しています。

○サンプルコード4:年齢に応じたアクセス制限を実装する

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"); // 出力: アクセス禁止

上記のサンプルコードでは、引数で受け取った誕生日に基づいて年齢を計算し、年齢に応じてアクセス制限を行っています。

●対処法

○サンプルコード5:日付のバリデーションを行う

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()メソッドを使って、日付が有効かどうかを判断しています。

●注意点

年齢計算を行う際には、うるう年や月の日数を考慮する必要があります。

また、日付のバリデーションを行うことで、不正な日付が入力されることを防ぐことができます。

●カスタマイズ

○サンプルコード6:年齢を月単位で計算する

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月時点)

上記のサンプルコードでは、誕生日を引数として受け取り、年齢を月単位で計算しています。

○サンプルコード7:年齢を逆算して誕生日を求める

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月時点)

上記のサンプルコードでは、年齢を引数として受け取り、逆算して誕生日を求めています。

●応用例

○サンプルコード8:年齢層別のユーザー数をグラフ化する

年齢層別のユーザー数をグラフ化するには、各年齢層に分類し、その数をカウントしてグラフに表示します。

この処理には、データの集計やグラフ描画のためのライブラリ(例:Chart.js)が必要です。

HTML部分

<!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>

JavaScript部分 (script.js)

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,
      },
    },
  },
});

○サンプルコード9:年齢に応じたおすすめ商品を表示する

年齢に応じたおすすめ商品を表示するには、商品データに年齢層のタグを付け、そのタグに基づいて商品を絞り込んで表示します。

この処理には、データベースや商品データを扱うためのサーバーサイドの処理が必要です。

HTML部分

<!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>

JavaScript部分 (script.js)

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>`;
});

このコードでは、年齢層ごとにおすすめ商品を定義し、ユーザーが誕生日を入力すると、その年齢に応じたおすすめ商品を表示します。

calculateAge関数は前のサンプルコードで使用したものを利用してください。

○サンプルコード10:年齢制限付きの動画再生を実装する

年齢制限付きの動画再生を実装するには、ユーザーの年齢を取得し、動画の年齢制限と比較してアクセスを許可するかどうかを判断します。

次のサンプルコードでは、年齢を計算し、制限に応じて動画再生を制御しています。

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("年齢制限のため、動画を再生できません。");
}

○サンプルコード11:誕生日カウントダウンタイマーを作成する

誕生日カウントダウンタイマーは、次の誕生日までの残り日数を表示します。

次のサンプルコードでは、誕生日までの残り日数を計算して表示しています。

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) + " 日です。");

○サンプルコード12:年齢に応じたフォントサイズの変更を実装する

年齢に応じてフォントサイズを変更するには、年齢を計算し、それに基づいてフォントサイズを設定します。

次のサンプルコードでは、年齢に応じてフォントサイズを変更しています。

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);

まとめ

この質問では、年齢に関するさまざまな機能を実装するサンプルコードについて説明しました。

年齢計算、アクセス制限、バリデーション、カスタマイズ、応用例など、多くのトピックをカバーしています。

これらのサンプルコードを使用して、自分のプロジェクトに年齢に関連する機能を追加することができます。

ただし、実際にコードを適用する際は、必要に応じて調整やカスタマイズを行ってください。