javascript 西暦を和暦に変換する

作成日 2022.08.13
javascript
javascript

javascriptで、西暦を和暦に変換するサンプルコードを記述してます。

1. 環境
2. 西暦を和暦に変換
3. サンプルコード

環境

OS windows11 home
ブラウザ chrome 104.0.5112.81

Javascript サンプル集はこちら

西暦を和暦に変換

西暦を和暦に変換するには、予め配列で「年号」と「開始年 – 1」をオブジェクトとして用意して、条件式を適応させて取得します。

<div id="result"></div>

<script>

function chk(year) {

    let i, len;

    let data = [
        {
            name: '令和',
            yyyy: 2018
        },
        {
            name: '平成',
            yyyy: 1988
        },
        {
            name: '昭和',
            yyyy: 1925
        },
        {
            name: '大正',
            yyyy: 1911
        },
        {
            name: '明治',
            yyyy: 1867
        }
    ];

    for (let item of data) {
        if (year >= item.yyyy) return { name: item.name, year: year - item.yyyy };
    }

    return false;
};

console.log( chk( 2000 ) ); // {name: '平成', year: 12}

</script>

サンプルコード

以下は、実行ボタンをクリックするとフォームに入力された値を、和暦に変換して表示するだけのサンプルコードとなります。

※cssには「Material Design for Bootstrap」を使用してます。関数はアロー関数を使用してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

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

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.1.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-25" style="margin-top:150px">

    <div id="result" class="alert alert-success"></div>

    <div class="form-outline">
      <input type="text" id="txt" class="form-control" />
    </div>

    <button id="bt" class="btn btn-success btn-rounded ">実行</button>

  </div>

  <script>

    bt.addEventListener('click', () => {

      let obj = chk(Number(txt.value));

      // 表示
      result.innerHTML = `${obj.name}${obj.year}年` ;

    });

    const chk = (year) => {

      let i, len;

      let data = [
        {
          name: '令和',
          yyyy: 2018
        },
        {
          name: '平成',
          yyyy: 1988
        },
        {
          name: '昭和',
          yyyy: 1925
        },
        {
          name: '大正',
          yyyy: 1911
        },
        {
          name: '明治',
          yyyy: 1867
        }
      ];

      for (let item of data) {
        if (year >= item.yyyy) return { name: item.name, year: year - item.yyyy };
      }

      return false;

    };

  </script>

</body>

</html>

表示されていることが確認できます。