和暦と西暦を相互変換できます | ちょっとした時にあると便利な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>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <select id="jp-era">
                    <option value="令和">令和</option>
                    ～
                    <option value="大化">大化</option>
                </select>
            </td>
            <td><input type="text" id="jp-year" pattern="\d*"></td>
        </tr>
    </tbody>
</table>

<div id="result-jp2ce"></div>
<button type="submit" id="submit-jp2ce">西暦へ変換する</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-ce2jp"></div>
<button type="submit" id="submit-ce2jp">和暦へ変換する</button>

変換を実行

「西暦へ変換する」「和暦へ変換する」が押された時にそれぞれの変換を実行します。
jQueryオブジェクトの変数名には$を付けています。

$('#submit-jp2ce').on('click', () => {
    jpCeConversion('jp2ce');
});

$('#submit-ce2jp').on('click', () => {
    jpCeConversion('ce2jp');
});

function jpCeConversion(type) {
    let era   = '';
    let year  = '';
    let month = '';
    let day   = '';
    let $output;
    
    let ajaxData = {
        method: 'conv',
        out   : 'json'
    };
    
    if (type === 'jp2ce') {
        era     = $('#jp-era').val();
        year    = $('#jp-year').val();
        $output = $('#result-jp2ce');
        ajaxData.ical  = '1001.1';
        ajaxData.ocal  = '101.1';
        ajaxData.itype = 'year';
        ajaxData.ival  = era + year + '年';
    } else if (type === 'ce2jp') {
        year    = $('#ce-year').val();
        month   = $('#ce-month').val();
        day     = $('#ce-day').val();
        $output = $('#result-ce2jp');
        ajaxData.ical  = '101.1';
        ajaxData.ocal  = '1001.1';
        ajaxData.itype = 'date';
        ajaxData.ival  = year + '-' + month + '-' + day;
    }

    $.ajax({
        type   : 'GET',
        url    : 'http://ap.hutime.org/cal/',
        data   : ajaxData,
        timeout: 5000
    }).done((data) => {
        if (data[0] !== null) {
            $.each(data, (key, val) => {
                if (type === 'jp2ce') {
                    $output.text(val.text.replace('C.E. ', '').replace(/^0/, '') + '年');
                } else if (type === 'ce2jp') {
                    $output.text(val.text.replace(/^(\D+)1年/, '$1元年'));
                }
            });
        }
    });
}

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

データを取得するための設定をします。暦法の変換結果をJSON形式で扱うので、method（処理の種類）には変換の「conv」、out（出力形式）には「json」を指定します。

let ajaxData = {
    method: 'conv',
    out   : 'json'
};

if (type === 'jp2ce') {
    era     = $('#jp-era').val();
    year    = $('#jp-year').val();
    $output = $('#result-jp2ce');
    ajaxData.ical  = '1001.1';
    ajaxData.ocal  = '101.1';
    ajaxData.itype = 'year';
    ajaxData.ival  = era + year + '年';
} else if (type === 'ce2jp') {
    year    = $('#ce-year').val();
    month   = $('#ce-month').val();
    day     = $('#ce-day').val();
    $output = $('#result-ce2jp');
    ajaxData.ical  = '101.1';
    ajaxData.ocal  = '1001.1';
    ajaxData.itype = 'date';
    ajaxData.ival  = year + '-' + month + '-' + day;
}

和暦から西暦への変換時は、ical（変換元の暦日）には和暦（南朝）の「1001.1」、ocal（変換先の暦法）にはユリウス/グレゴリオ暦の「101.1」、itype（暦日等の型）には暦年の「year」、ival（暦日等を表す文字列）には「西暦○年」を指定します。

西暦から和暦への変換時は、ical（変換元の暦日）にはユリウス/グレゴリオ暦の「101.1」、ocal（変換先の暦法）には和暦（南朝）の「1001.1」、itype（暦日等の型）には暦日の「date」、ival（暦日等を表す文字列）には「年-月-日」を指定します。

HuTime Web APIからデータを取得

Ajaxで対象のURLにリクエストします。取得に成功したら所定の個所にtextメソッドで表示させますが、その際に西暦の場合はreplaceメソッドで「C.E.」と先頭の「0」を削除した上で「年」を付け加えて整えます。
和暦で1年の場合はreplaceメソッドで「1年」を「元年」に置換します。

$.ajax({
    type   : 'GET',
    url    : 'http://ap.hutime.org/cal/',
    data   : ajaxData,
    timeout: 5000
}).done((data) => {
    if (data[0] !== null) {
        $.each(data, (key, val) => {
            if (type === 'jp2ce') {
                $output.text(val.text.replace('C.E. ', '').replace(/^0/, '') + '年');
            } else if (type === 'ce2jp') {
                $output.text(val.text.replace(/^(\D+)1年/, '$1元年'));
            }
        });
    }
});

おわりに

和暦（北朝）には対応していないので、対応させる場合は少し工夫が必要です。また、和暦と西暦の変換は西暦から決まった数を引くなど様々な方法があるので、ツールを作成する際は「javascript 和暦西暦 変換」などで検索してみてください。