ポートフォリオサイトなどで、自身の年齢を表示したい場合がありますよね。
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で生年月日から現在の年齢を計算する方法を紹介しました。
ページを開くたびに自動的に年齢を計算してくれるので、サイト上に年齢を表示する場合は是非使ってみてください。
コメント