和暦または西暦から年齢計算できます | ちょっとした時にあると便利なWebブラウザー上で使用できるツール集です。

使用しているJavaScriptのライブラリ

• jQuery v3.3.1

利用しているAPI

• HuTime Web API - Calendar Calculation

HTML

年月日を入力するinputタグのpattern属性に数字の正規表現である「\d*」を指定して、iPhoneで数字入力のキーパッドが表示されるようにしています。Androidなどでも表示されるようにするには別の方法を考える必要があります。

<h3>和暦から年齢を計算する</h3>
<table>
    <thead>
        <tr>
            <th>元号</th>
            <th>年</th>
            <th>月</th>
            <th>日</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <select id="jp-era">
                    <option value="令和">令和</option>
                    <option value="平成">平成</option>
                    <option value="昭和">昭和</option>
                    <option value="大正">大正</option>
                    <option value="明治">明治</option>
                </select>
            </td>
            <td><input type="text" id="jp-year" pattern="\d*"></td>
            <td><input type="text" id="jp-month" pattern="\d*"></td>
            <td><input type="text" id="jp-day" pattern="\d*"></td>
        </tr>
    </tbody>
</table>

<div id="result-from-jp"></div>
<button type="submit" id="submit-from-jp">和暦から年齢を計算する</button>

<h3>西暦から年齢を計算する</h3>
<table>
    <thead>
        <tr>
            <th>年</th>
            <th>月</th>
            <th>日</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" id="ce-year" pattern="\d*"></td>
            <td><input type="text" id="ce-month" pattern="\d*"></td>
            <td><input type="text" id="ce-day" pattern="\d*"></td>
        </tr>
    </tbody>
</table>

<div id="result-from-ce"></div>
<button type="submit" id="submit-from-ce">西暦から年齢を計算する</button>

年齢計算を実行

「和暦から年齢を計算する」「西暦から年齢を計算する」が押された時に計算を実行します。
jQueryオブジェクトの変数名には$を付けています。

$('#submit-jp').on('click', () => {
    ageCalc('from-jp');
});

$('#submit-ce').on('click', () => {
    ageCalc('from-ce');
});

function ageCalc(type) {
    let era   = '';
    let year  = '';
    let month = '';
    let day   = '';
    let $output;
    let $submit;
    let today = getNowDate('ce');
    
    let ajaxData = {
        method: 'durCal',
        ep    : 'bb',
        itype : 'date',
        itype2: 'date',
        ival2 : today,
        ical2 : '101.1',
        out   : 'json'
    };
    
    if (type === 'from-jp') {
        era     = $('#jp-era').val();
        year    = $('#jp-year').val();
        month   = $('#jp-month').val();
        day     = $('#jp-day').val();
        $output = $('#result-from-jp');
        $submit = $('#submit-from-jp');
        ajaxData.ical = '1001.1';
        ajaxData.ival = era + year + '年' + month + '月' + day + '日';
    } else if (type === 'from-ce') {
        year    = $('#ce-year').val();
        month   = $('#ce-month').val();
        day     = $('#ce-day').val();
        $output = $('#result-from-ce');
        $submit = $('#submit-from-ce');
        ajaxData.ical = '101.1';
        ajaxData.ival = year + '-' + month + '-' + day;
    }
    
    $.ajax({
        type   : 'GET',
        url    : 'http://ap.hutime.org/cal/',
        data   : ajaxData,
        timeout: 5000
    }).done((data) => {
        if (data[0] !== null) {
            if (data[0].match(/-([0-9]+)-([0-9]+)-([0-9]+)/) || data[0].match(/\+0-0-0/)) {
                $output.text('まだ誕生していません');
            } else {
                $output.text('現在の年齢：' + data[0].replace(/\+([0-9]+)-([0-9]+)-([0-9]+)/, '$1歳（$2ヶ月$3日）'));
            }
        }
    });
}

現在の日時を取得

HuTime Web APIからデータを取得するために必要な現在の日時を取得します。
これは対象点の始点の暦日等を表す文字列として使用します。

let today = getNowDate();

function getNowDate() {
    let date  = new Date();
    let year  = date.getFullYear();
    let month = date.getMonth() + 1;
    let day   = date.getDate();
    return year + '-' + month + '-' + day;
}

HuTime Web APIからデータを取得するための設定

データを取得するための設定をします。method（処理の種類）には期間を年数＋月数＋日数で表す「durCal」、ep（計測に使用する端点）には起点の始点～対象点の始点の「bb」、itype（暦日等の型）とitype2（終点の暦日等の型）には暦日の「date」、ival2（終点の暦日等を表す文字列）には実行時の日時、ical2（終点の暦法のID）にはユリウス/グレゴリオ暦（1582年改暦）の「101.1」、out（出力形式）には「json」を指定します。

let ajaxData = {
    method: 'durCal',
    ep    : 'bb',
    itype : 'date',
    itype2: 'date',
    ival2 : today,
    ical2 : '101.1',
    out   : 'json'
};

if (type === 'from-jp') {
    era     = $('#jp-era').val();
    year    = $('#jp-year').val();
    month   = $('#jp-month').val();
    day     = $('#jp-day').val();
    $output = $('#result-from-jp');
    $submit = $('#submit-from-jp');
    ajaxData.ical = '1001.1';
    ajaxData.ival = era + year + '年' + month + '月' + day + '日';
} else if (type === 'from-ce') {
    year    = $('#ce-year').val();
    month   = $('#ce-month').val();
    day     = $('#ce-day').val();
    $output = $('#result-from-ce');
    $submit = $('#submit-from-ce');
    ajaxData.ical = '101.1';
    ajaxData.ival = year + '-' + month + '-' + day;
}

和暦から計算する場合は、ical（始点の暦法のID）には和暦（南朝）の「1001.1」、ival（始点の暦日等を表す文字列）には「元号○年○月○日」を指定します。

西暦から計算する場合は、ical（始点の暦法のID）にはユリウス/グレゴリオ暦（1582年改暦）の「101.1」、ival（始点の暦日等を表す文字列）には「年-月-日」を指定します。

HuTime Web APIから二つの暦日等の間の期間の長さを取得

Ajaxで対象のURLにリクエストします。取得に成功したら所定の個所にtextメソッドで表示しますが、その際にreplaceメソッドで「○歳○ヶ月○日」の表記になるように整えます。
また、取得した期間の長さがマイナスまたは0 の場合は「まだ誕生していません」と表示します。

$.ajax({
    type   : 'GET',
    url    : 'http://ap.hutime.org/cal/',
    data   : ajaxData,
    timeout: 5000
}).done((data) => {
    if (data[0] !== null) {
        if (data[0].match(/-([0-9]+)-([0-9]+)-([0-9]+)/) || data[0].match(/\+0-0-0/)) {
            $output.text('まだ誕生していません');
        } else {
            $output.text('現在の年齢：' + data[0].replace(/\+([0-9]+)-([0-9]+)-([0-9]+)/, '$1歳（$2ヶ月$3日）'));
        }
    }
});

おわりに

当ツールでは暦法に基づく期間の計算ができるAPIを利用していますが、他にも様々な方法があるので、ツールを作成する際は「javascript 年齢計算」などで検索してみてください。

また、当サイトで利用している暦法に基づく期間の計算ができるAPIはHTTPSのサイトには未対応なので、混在コンテンツの警告がでるようなHTTPのサイトでは注意が必要です。