JSで生年月日から年齢の計算

Question

前提・実現したいこと

入力でyyyy/mm/ddと入力して現在の年齢を求めたいです。
上のように入力しても、年齢が出てこなくて困っています。ネットで調べてもうまくいかなくて心優しい方よろしくお願いいたします。

該当のソースコード

var practice = {
	birth : null,
	Age : function(){
		birthday = new Date(practice.birth);
		today = new Date();
       
        
         thisYearBirthday =
            new Date(today.getFullYear(), practice.birth.getMonth(), practice.getDate());  
       
        
         age = today.getFullYear() - practice.birth.getFullYear();
       		
	alert(age);

    }
};
alert('入力例:1995/08/03');
practice.birth = prompt("生年月日を入力してください。");
practice.Age();

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[miyabi_pudding]

出てこない、とは、
アラートが実行されない、ということですか？
それとも、アラートは実行されるけど、
意図した文字列が表示されない、ということでしょうか？

[tugutugutugumi]

アラートが実行されないです。

[miyabi_pudding]

では、
関数が通っているかを確認してください。
関数の中身で、
console.logを書いて、ログを見てみましょう。
して、ログ見たらもしかしたら、エラーが出ている可能性もあるかと。

Answer 1

原因は、
文字列なのに、日付メソッドを使用しようとしている点です。

下記に、どこでどうなっているか、を記載します。

var practice = {
  birth: null,
  Age: function(){
    // ここで、practice.birthを、日付データに変換している
    birthday = new Date(practice.birth);
    today = new Date();
    
    // practice.birth は、文字列が入っているため、当然、getMonthは無いため、実行できない。
    thisYearBirthday = new Date(today.getFullYear(), practice.birth.getMonth(), practice.getDate());

    // ここでエラーが発生するため、以降の行は実行されない
    // また、下記でも、無いメソッドを使おうとしているため、実行されない。
    age = today.getFullYear() - practice.birth.getFullYear();

    alert(age);

  }
};
alert('入力例:1995/08/03');
// ここでpractice.birthに入るのは、"文字列"
practice.birth = prompt("生年月日を入力してください。");
practice.Age();

と、なるため、せっかく、関数内のbirthday変数にて、日付データに変換しているので、
それを使いましょう。

var practice = {
  birth: null,
  Age: function(){
    // ここで、practice.birthを、日付データに変換している
    birthday = new Date(practice.birth);
    today = new Date();
    
    // birthdayを使用する
    thisYearBirthday = new Date(today.getFullYear(), birthday.getMonth(), birthday.getDate());

    // 上記同様、birthdayを使用する
    age = today.getFullYear() - birthday.getFullYear();

    alert(age);
  }
};
alert('入力例:1995/08/03');
// ここでpractice.birthに入るのは、"文字列"
practice.birth = prompt("生年月日を入力してください。");
practice.Age();

こういったことを発見するためにも、
コンソールを見るようにしていきましょう。

見方は、ご自分で調べてください。

以上です。

Comments

[tugutugutugumi]

丁寧な解説ありがとうございました。分かりやすい説明で理解できました。

Answer 2

年齢を算出する場合、誕生日を迎えているか、迎えていないかで計算式が変わってきます。

        var practice = {
                birth: null,
                Age: function () {
                    // ここで、practice.birthを、日付データに変換している
                    birthday = new Date(practice.birth);
                    today = new Date();

                    // 誕生月
                    birthdayMonth = Number(practice.birth.substr(-5, 2))
                    //誕生日の日付
                    birthdayDay = Number(practice.birth.substr(8, 2))
                    // 今月
                    thisMonth = today.getMonth() + 1;
                    // 今日の日付
                    todaysDate = today.getDate();
                    // birthdayを使用する
                    thisYearBirthday = new Date(today.getFullYear(), birthday.getMonth(), birthday.getDate());
                    
                    // 誕生月 > 今月の場合 (誕生日を迎えていない場合)
                    if(birthdayMonth > thisMonth) {
                    // 上記同様、birthdayを使用する
                        age = today.getFullYear() - birthday.getFullYear() - 1;
                    // 誕生月 < 今月の場合 (誕生日を迎えている場合)
                    } else if (birthdayMonth < thisMonth) {
                    // 上記同様、birthdayを使用する
                        age = today.getFullYear() - birthday.getFullYear();
                    // 誕生月 ＝ 今月の場合
                    } else {
                    // 誕生日の日付 > 今日の日付 (誕生日を迎えていない場合)
                        if (birthdayDay > todaysDate){
                    // 上記同様、birthdayを使用する
                            age = today.getFullYear() - birthday.getFullYear() - 1;
                    // 誕生日の日付 =< 今日の日付 (誕生日を迎えている場合)
                        } else {
                            age = today.getFullYear() - birthday.getFullYear();
                        }
                    }
                    alert(age);
                }
            };
            alert('入力例:1995/08/03');
            // ここでpractice.birthに入るのは、"文字列"
            practice.birth = prompt("生年月日を入力してください。");
            practice.Age();

ついでに、promptやalertを使わずに書いてみました。参考までにどうぞ
(うるう年や西向く侍を考慮してないので存在しない日付が選べてしまう不具合あり)

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select name="year" id="year">
        <option value="">-</option> 
        <option value="1946">1946</option>
        <option value="1947">1947</option>
        <option value="1948">1948</option>
        <option value="1949">1949</option>
        <option value="1950">1950</option>
        <option value="1951">1951</option>
        <option value="1952">1952</option>
        <option value="1953">1953</option>
        <option value="1954">1954</option>
        <option value="1955">1955</option>
        <option value="1956">1956</option>
        <option value="1957">1957</option>
        <option value="1958">1958</option>
        <option value="1959">1959</option>
        <option value="1960">1960</option>
        <option value="1961">1961</option>
        <option value="1962">1962</option>
        <option value="1963">1963</option>
        <option value="1964">1964</option>
        <option value="1965">1965</option>
        <option value="1966">1966</option>
        <option value="1967">1967</option>
        <option value="1968">1968</option>
        <option value="1969">1969</option>
        <option value="1970">1970</option>
        <option value="1971">1971</option>
        <option value="1972">1972</option>
        <option value="1973">1973</option>
        <option value="1974">1974</option>
        <option value="1975">1975</option>
        <option value="1976">1976</option>
        <option value="1977">1977</option>
        <option value="1978">1978</option>
        <option value="1979">1979</option>
        <option value="1980">1980</option>
        <option value="1981">1981</option>
        <option value="1982">1982</option>
        <option value="1983">1983</option>
        <option value="1984">1984</option>
        <option value="1985">1985</option>
        <option value="1986">1986</option>
        <option value="1987">1987</option>
        <option value="1988">1988</option>
        <option value="1989">1989</option>
        <option value="1990">1990</option>
        <option value="1991">1991</option>
        <option value="1992">1992</option>
        <option value="1993">1993</option>
        <option value="1994">1994</option>
        <option value="1995">1995</option>
        <option value="1996">1996</option>
        <option value="1997">1997</option>
        <option value="1998">1998</option>
        <option value="1999">1999</option>
        <option value="2000">2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
        <option value="2005">2005</option>
        <option value="2006">2006</option>
        <option value="2007">2007</option>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
        <option value="2025">2025</option>
        <option value="2026">2026</option>
        <option value="2027">2027</option>
        <option value="2028">2028</option>
        <option value="2029">2029</option>
        <option value="2030">2030</option>
    </select>
    <span>年</span>
    <select name="month" id="month">
        <option value="">-</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <span>月</span>
    <select name="day" id="day">
        <option value="">-</option>
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        <option value="04">4</option>
        <option value="05">5</option>
        <option value="06">6</option>
        <option value="07">7</option>
        <option value="08">8</option>
        <option value="09">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
    </select>
    <span>日</span>
    <p>
        あなたの年齢は<span id="age">XX</span>歳です
    </p>
    <script>
        const year = document.getElementById("year");
        const month = document.getElementById("month");
        const day = document.getElementById("day");
        const age = document.getElementById("age");

        year.addEventListener("change", () => { yourAge(); });

        month.addEventListener("change", () => { yourAge(); });

        day.addEventListener("change", () => { yourAge(); });

        // 年齢算出関数
        const yourAge = () => {
            if (year.value !== "" && month.value !== "" && day.value !== "") {
                const date = new Date();
                const thisYear = date.getFullYear().toString();
                const thisMonth = (date.getMonth() + 1).toString();
                const today = zeroPadding(date.getDate().toString());
                if (Number(thisMonth + today) >= Number(month.value + day.value)) {
                    age.innerText = thisYear - year.value;
                } else {
                    age.innerText = thisYear - year.value - 1;
                }
            }
        }

        // 0埋め関数

        const zeroPadding = (target) => {
            return ('00' + target).slice(-2);
        }


    </script>

</body>

</html>

Comments

[tugutugutugumi]

丁寧な解説ありがとうございました。分かりやすい説明で理解できました。