誕生日診断を作ってみた

今日はJavaScriptで作る「あなたの誕生日診断」 (全5回)に挑戦した。今回は日付オブジェクトという日付を扱う機能が登場。今回は変数が多い。昨日作ったおみくじのおかげで、やっと意味がわかるようになったが初見だと頭が混乱すること間違いなし。「君はこういう人だよ」と登場人物に個性をつけてあげる作業だと考えればvarがいくつ羅列されてても落ち着いて見られるようになった。

function getAge() {
			// 入力値の取得
			var birthday = document.getElementById('birthday').value.split("-");

			// 日付オブジェクトの作成
			var d1 = new Date(birthday[0], birthday[1]-1, birthday[2]);
			var d2 = new Date();

			// 日数、年齢の計算
			var diff = d2.getTime() - d1.getTime();
			var daysPast = Math.floor(diff / (1000 * 60 * 60 * 24));
			var age = Math.floor(daysPast / 365.25);

			// 結果の表示
			document.getElementById('daysPast').innerHTML = daysPast;
			document.getElementById('age').innerHTML = age;

#失敗した点
##タイプミス
昨日と同じようなミスで、またもやプログラムが動かず15分ほど格闘。まずボタンを押しても反応がない。画面をにらみ続けてもミスが見当たらない。らちがあかないので一応コピーしておいて最初から打ち直す。すると今度は動いた。原因はMath.floorと書くべきところをmath.floorと書いたことだった。「あー」と1人で納得。しばらくレッスンを進めると今度は<span></span>で囲んだ???の部分が切り替わらない。よーく見るとid=がid~になっていた。

#まだ理解できていない点
##split
困ったときのMDNということで調べてみる。

文字列を複数の部分文字列に区切ることにより、String オブジェクトを文字列の配列に分割します

うーん・・・よくわからない。レッスン動画の中で「値が正しいかどうかをチェックできる」と言っていたので、のちのち再登場するのかもしれない。配列にわけていたから再利用できるのかもしれない。

#総評
基本の日付を取得して現時刻との差を計算させるのは面白かった。例えばパズドラのようなアプリが日付をまたいだ瞬間に内容が変わるといったことも、こういう機能を使っているのかなと想像できる。今回は少しレベルが上がっていて動画の内容は50％ほどしか理解できてないので明日はおみくじと日付診断を復習しよう。日付オブジェクトは便利な機能だと思った。ぜひとも慣れておきたい。

そして1つ気がついた。例えば<span></span>の部分が書き換わらないといったエラーの場合、無闇に最初から見直すより原因に結びつきそうな部分から探っていくほうがいい。考えてみれば当たり前のことか。

Qiitaで編集リクエストというものが届いていて、これも面白かった。凄く便利だし勉強になる。毎日驚いてる気がする。