JavaScriptで簡単！生年月日入力から自動で年齢を計算・表示する方法

今回はJavaScriptを駆使して、生年月日から現在の年齢を計算し、それをウェブページ上に表示する方法を詳しくご紹介します。この技術は、使いどころによってユーザーインターフェースを向上させることができます。

生年月日から年齢を算出するためのCSSとは？

まずは、年齢が表示される要素（.birthage）のスタイリングから。ここでは、読みやすさと視覚的魅力を両立させるためのCSSを紹介します。

<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
.birthage{
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: red;
  padding: 15px 0;
}
</style>

このスタイルは、年齢を目立たせ、ウェブページのどの部分にも合わせやすいデザインになっています。

生年月日から年齢を計算するHTMLとJavaScript

次に、核心部分。生年月日から年齢を計算し、それをページに表示するJavaScriptのコードをご紹介します。このプログラムは、Dateオブジェクトを使って、今日の日付から対象の生年月日までの年数を計算します。

生年月日から年齢を返す関数getage(西暦,月,日付)を用意しました。getage()関数ではDate()を使って今年の誕生日を取得し、そこから年齢を計算してます。document.write()でgetage()からの返り値（年齢）を出力してます。

<h1>JavaScriptを使って生年月日から逆算して現在の年齢を表示</h1>

<div align="center">1992年1月15日生まれの人は現在以下の年齢になります。</div>

<script type="text/javascript">
function getage(y,m,d){
    var today = new Date(); //今日の日付を取得
    var thisYearsBirthday = new Date(today.getFullYear(), m-1, d);  //今年の誕生日を取得
    var age = today.getFullYear() - y;  //年齢を取得
    //今年まだ誕生日が来てない場合-1
    if(today < thisYearsBirthday){
        age--;
    }
    return age;
}

y=1992;
m=1;
d=15;
document.write('<div class="birthage">'+getage(y,m,d)+'歳</div>');
</script>

このコードはシンプルながらも、年齢計算のロジックを明確に示しています。

JavaScriptを使って生年月日から逆算して現在の年齢を表示するデモページ

以下のリンクから実際のデモページを確認できます。色々な生年月日を入力して、その場で年齢が計算される様子を体験してみてください。

JavaScriptを使って生年月日から逆算して現在の年齢を表示するデモページ

まとめ

この記事では、JavaScriptを使って生年月日から年齢を計算し、ウェブページに表示する方法を紹介しました。エンジニアとしての経験を生かして、読者の皆さんがより理解しやすいように工夫しました。このテクニックを使えば、ウェブ開発の幅が広がること間違いなしです。ぜひお試しください！

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。