ポートフォリオサイトなどで、自身の年齢を表示したい場合がありますよね。
HTMLにそのまま年齢を直書きすることも可能ですが、その場合は毎年手動で更新する必要がありなかなか面倒です。
そこで今回の記事では、生年月日から現在の年齢を計算する機能をJavaScriptで実装する方法を紹介します!
一度実装すると、ページが表示されるたびに年齢を計算して表示してくれるので、ぜひこの記事を参考にしてみてください。
【コピペ用】生年月日から現在の年齢を計算するJavaScriptコード
まずはコピペしてすぐに使いたい方のために、コード全体を紹介しておきます。
function getAge(year, month, day) {
// 今日の日付データを取得
const today = new Date();
// 生年月日の日付データを取得
const birthdate = new Date(year, month - 1, day);
// 今年の誕生日の日付データを取得
const currentYearBirthday = new Date(today.getFullYear(), birthdate.getMonth(), birthdate.getDate());
// 生まれた年と今年の差を計算
let age = today.getFullYear() - birthdate.getFullYear();
// 今日の日付と今年の誕生日を比較
if (today < currentYearBirthday) {
// 今年誕生日を迎えていない場合、1を引く
age--;
}
// 年齢の値を返す
return age;
}
// 結果をコンソールに出力
console.log(getAge(1997, 1, 17));引数には、年・月・日の順番で生年月日を渡してください。
次で1行ずつコードの解説をしていきますので、詳しく知りたい方は読み進めてください。
【解説】生年月日から現在の年齢を計算するJavaScriptコードの解説
ここからは上で紹介したJavaScriptコードの解説を行います。
まずgetAgeという関数を定義していきます。
function getAge(year, month, day) {
// ここに関数の中身を記述
// 最終的に現在の年齢を返す
return age;
}引数には、year(誕生年),month(誕生月),day(誕生日)を渡し、最終的にage(現在の年齢)が返ってくるという機能にしていきます。
生年月日から年齢を計算するにおいて、以下の3つの日付データが必要になります。
- 今日の日付データ
- 生年月日の日付データ
- 今年の誕生日の日付データ
それぞれのデータは、new Date()で取得します。
まず今日の日付データですが、引数に何も指定しないと現在日時のデータを取得できます。
// 今日の日付データを取得
const today = new Date();次に生年月日の日付データを取得します。
// 生年月日の日付データを取得
const birthdate = new Date(year, month - 1, day);引数には、getAge関数に渡した生年月日の値が入ります。
monthは-1となっていますが、これはDateオブジェクト内では月のカウントが0から始まるためです。(1月は0、12月は11で表します)
最後に、今年の誕生日の日付データを取得します。
// 今年の誕生日の日付データを取得
const currentYearBirthday = new Date(today.getFullYear(), birthdate.getMonth(), birthdate.getDate());これで必要なデータが揃いましたので、次で年齢の計算をしていきます。
まずは単純に生まれた年と現在の年の差を求め、変数ageに格納します。
// 生まれた年と今年の差を計算
let age = today.getFullYear() - birthdate.getFullYear();todayには現在日時の日付データ、birthdateには生年月日の日付データが入っていますね。
これらに対してgetFullYearメソッドを使用することで、年の値を取得することができます。
これで生まれてから何年経ったかは計算できましたが、
- 今年すでに誕生日を迎えている
- 今年まだ誕生日を迎えていない
上記によって年齢が変わってきますので、if文で条件分岐していきます。
// 今日の日付と今年の誕生日を比較
if (today < currentYearBirthday) {
// 今年誕生日を迎えていない場合、1を引く
age--;
}この部分では、今年まだ誕生日を迎えていない場合、ageから1を引くという処理が行われています。
これで正確な年齢を取得することができました。
あとはageの値をreturnで返すことで、getAge関数の完成です!
// 年齢の値を返す
return age;以上の手順で、生年月日から年齢を計算することができました。
【まとめ】JavaScriptで生年月日から現在の年齢を計算する方法
JavaScriptで生年月日から現在の年齢を計算する方法を紹介しました。
ページを開くたびに自動的に年齢を計算してくれるので、サイト上に年齢を表示する場合は是非使ってみてください。


コメント