例えばこの記事を書いてる現在は 2019年10月22日 、
そして僕の誕生日を仮に 1995年01月01日 とします。
そのときJavaScriptを使って、こういう風に表示してみたかったんです。
1 |
あなたは生後 24歳 9ヵ月 21日 経過しています |
別に 「生後○年○ヵ月○日」と表すのは赤ん坊だけじゃありません。
子どもだって大人だってこういう年齢表示したいことはあるはずです。
やってみたら意外と簡単だったので、
ここでは JavaScriptで 生後○歳○ヵ月○日 と表示する方法 を紹介します。
年齢計算を行うコードの書き方はこんな感じ
まずはどう生年月日から「生後○歳○ヵ月○日」の表現に変換できるのか・・・
いきなりそのコードから考えて書いてみました。
ここでは Dateオブジェクトを作って求めてみることにします。
そのやり方は次の通り
1.まず年齢計算につかう現在年月日と生年月日取得
▼ こういうコード
1 2 3 4 5 6 7 |
/// まずは現在年月日を取得 /// ▼ コンストラクタには何も渡さない var dateNow = new Date(); /// 次に生年月日を取得 /// ▼ 1995/01/01 の場合のコード var dateBirth = new Date(1995, 0, 1); |
Dateオブジェクトのコンストラクタは 月だけが 0~ 11の範囲
これが意外と地雷的なコードになるので、Dateを作るときは要注意です。
あとはこの2つから差を求めるだけ
2.まずは両者のDateオブジェクトの差を日数として取得
1 2 |
var timeTillNow = dateNow.getTime() - dateBirth.getTime(); var daysTillNow = timeTillNow / (1000 * 3600 * 24); |
3.その次に○歳○ヵ月○日のそれぞれを計算
1 2 3 4 5 |
/// 年齢の年部分・月部分・日部分をそれぞれ計算 const DAYS_PER_MONTH = 365 / 12; var ageY = Math.floor(daysTillNow / 365); var ageM = Math.floor((daysTillNow - 365*ageY) / DAYS_PER_MONTH); var ageD = Math.floor((daysTillNow - 365*ageY - DAYS_PER_MONTH*ageM)); |
4.最後に適当にdiv要素とか用意して表示
1 2 3 4 |
$('#afterBirth').html( "あなたの年齢は・・・・・・" + "生後"+ageY+"歳"+ageM+"ヶ月"+ageD+"日" ); |
こういう感じ
やり方さえ分かってれば難しくもなんともないですね。
ちなみに全体のコードを載せると次の通り
ちなみに上のコードを再利用しやすいように関数化もしてみました。
全体のコードとして掲載すると次の通りです。
▼ 誕生日から現在までの「○歳○ヵ月○日」を表示する関数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function showAfterBirth(bYear, bMonth, bDay){ /// 現在日時と誕生日日時のDateを取得 var dateNow = new Date(); var dateBirth = new Date(bYear, bMonth-1, bDay); /// 現在日時までのミリ秒と日数を計算 var timeTillNow = dateNow.getTime() - dateBirth.getTime(); var daysTillNow = timeTillNow / (1000 * 3600 * 24); /// 年齢の年部分・月部分・日部分をそれぞれ計算 const DAYS_PER_MONTH = 365 / 12; var ageY = Math.floor(daysTillNow / 365); var ageM = Math.floor((daysTillNow - 365*ageY) / DAYS_PER_MONTH); var ageD = Math.floor((daysTillNow - 365*ageY - DAYS_PER_MONTH*ageM)); console.log( "あなたの年齢は" + " 生後"+ageY+"歳"+ageM+"ヶ月"+ageD+"日" ); } |
何をしてるかはコメントを見れば大体わかるはず
実際にこのコードを 2019年10月22日 に試してみるとこうなりました。
1 2 |
showAfterBirth(1995, 1, 1); /// => あなたの年齢は生後24歳9ヶ月26日 |
1 2 |
showAfterBirth(2019, 10, 22); /// => あなたの年齢は生後0歳0ヶ月0日 |
ちゃんと計算できてる。
ただし未来の年齢を入力すると「あなたの年齢は生後-1歳3ヶ月8日 」みたいにマイナスの年齢になってしまうので、何かしら対策が必要です。
以上、JSで年齢計算を○歳○ヵ月○日で求める方法でした。ではまた(^_^)/~