初心者必見！和暦をJavaScriptで簡単に扱う10の方法

はじめに
●JavaScriptとは
- ○基本概念
- ○JavaScriptの利点
●和暦とは
- ○和暦の仕組み
- ○和暦の種類
●和暦をJavaScriptで扱う方法
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptで和暦を簡単に扱えるようになります。

初心者でも理解できるように、JavaScriptの基本から和暦の取り扱い方法、注意点まで徹底解説します。

サンプルコードもたくさん用意しているので、ぜひ参考にしてください。

●JavaScriptとは

○基本概念

JavaScriptは、ウェブページに動的な要素を追加するためのプログラミング言語です。

HTMLとCSSがウェブページの構造とデザインを決めるのに対して、JavaScriptはそのページの動作を制御します。

○JavaScriptの利点

JavaScriptの利点は、ブラウザで直接実行できるため、サーバーへの負荷が軽減されることです。

また、様々なライブラリが提供されているため、手軽に機能を追加することができます。

さらに、ウェブページの動作を制御するだけでなく、サーバーサイドのプログラミングも可能です。

●和暦とは

○和暦の仕組み

和暦は、日本の歴史的な暦法で、天皇の即位によって新しい年号が制定されることが特徴です。

和暦では、西暦とは異なり、年号と年数の組み合わせで年を表します。

○和暦の種類

和暦には、大正、昭和、平成、令和など、様々な年号が存在します。

それぞれの年号は、その時代の天皇の治世を表し、新しい年号は、新たな天皇が即位した際に制定されます。

●和暦をJavaScriptで扱う方法

和暦をJavaScriptで扱う方法を、サンプルコード付きで紹介します。

初心者でも理解できるように、詳細な説明を加えています。

○サンプルコード1：和暦への変換

まず、西暦を和暦に変換する方法を見ていきましょう。

下記のサンプルコードでは、西暦を和暦に変換する関数toJapaneseEraを定義しています。

// 西暦を和暦に変換する関数
function toJapaneseEra(year) {
  let era = "";
  let eraYear = 0;

  if (year >= 1989) {
    era = "平成";
    eraYear = year - 1988;
  } else if (year >= 1926) {
    era = "昭和";
    eraYear = year - 1925;
  } else if (year >= 1912) {
    era = "大正";
    eraYear = year - 1911;
  } else if (year >= 1868) {
    era = "明治";
    eraYear = year - 1867;
  } else {
    return "対応していない年です";
  }

  return `${era}${eraYear}年`;
}

console.log(toJapaneseEra(2020)); // "令和2年"

このコードでは、西暦の年数に応じて、対応する年号と年数を計算しています。

例えば、2020年は令和2年に変換されます。

○サンプルコード2：和暦から西暦への変換

次に、和暦を西暦に変換する方法を見ていきましょう。

下記のサンプルコードでは、和暦を西暦に変換する関数toGregorianYearを定義しています。

// 和暦を西暦に変換する関数
function toGregorianYear(era, eraYear) {
  let year = 0;

  if (era === "令和") {
    year = eraYear + 2018;
  } else if (era === "平成") {
    year = eraYear + 1988;
  } else if (era === "昭和") {
    year = eraYear + 1925;
  } else if (era === "大正") {
    year = eraYear + 1911;
  } else if (era === "明治") {
    year = eraYear + 1867;
  } else {
    return "対応していない年号です";
  }

  return `${year}年`;
}

console.log(toGregorianYear("令和", 2)); // "2020年"

このコードでは、年号と年数を引数として受け取り、それに応じて対応する西暦を計算しています。

例えば、令和2年は2020年に変換されます。

○サンプルコード3：和暦の年号と年数を取得

和暦の年号と年数を取得する方法を見ていきましょう。

下記のサンプルコードでは、西暦から和暦の年号と年数を取得する関数getJapaneseEraを定義しています。

// 西暦から和暦の年号と年数を取得する関数
function getJapaneseEra(year) {
  let era = "";
  let eraYear = 0;

  if (year >= 2019) {
    era = "令和";
    eraYear = year - 2018;
  } else if (year >= 1989) {
    era = "平成";
    eraYear = year - 1988;
  } else if (year >= 1926) {
    era = "昭和";
    eraYear = year - 1925;
  } else if (year >= 1912) {
    era = "大正";
    eraYear = year - 1911;
  } else if (year >= 1868) {
    era = "明治";
    eraYear = year - 1867;
  } else {
    return "対応していない年です";
  }

  return { era, eraYear };
}

console.log(getJapaneseEra(2020)); // { era: "令和", eraYear: 2 }

この関数では、西暦の年数に応じて、対応する年号と年数を計算し、オブジェクトとして返しています。

例えば、2020年は令和2年になりますので、{ era: “令和”, eraYear2 }となります。

○サンプルコード4：和暦の日付表示

和暦の日付表示を行う方法を見ていきましょう。

下記のサンプルコードでは、西暦の日付を和暦の日付に変換する関数formatJapaneseDateを定義しています。

// 西暦の日付を和暦の日付に変換する関数
function formatJapaneseDate(date) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const { era, eraYear } = getJapaneseEra(year);

  return `${era}${eraYear}年${month}月${day}日`;
}

const sampleDate = new Date(2020, 5 - 1, 5);
console.log(formatJapaneseDate(sampleDate)); // "令和2年5月5日"

この関数では、Dateオブジェクトを受け取り、getJapaneseEra関数を使用して年号と年数を取得し、和暦の日付を文字列で返しています。

例えば、2020年5月5日は令和2年5月5日に変換されます。

○サンプルコード5：西暦と和暦の比較

西暦と和暦を比較する方法を見ていきましょう。

下記のサンプルコードでは、2つのDateオブジェクトを受け取り、それらが同じ和暦の日付であるかどうかを判断する関数isSameJapaneseDateを定義しています。

// 2つのDateオブジェクトが同じ和暦の日付であるか判断する関数
function isSameJapaneseDate(date1, date2) {
  const japaneseDate1 = formatJapaneseDate(date1);
  const japaneseDate2 = formatJapaneseDate(date2);

  return japaneseDate1 === japaneseDate2;
}

const date1 = new Date(2020, 5 - 1, 5);
const date2 = new Date(2019, 5 - 1, 5);
console.log(isSameJapaneseDate(date1, date2)); // false

この関数では、formatJapaneseDate関数を使用して、2つのDateオブジェクトを和暦の日付に変換し、それらが一致するかどうかを判断しています。

○サンプルコード6：和暦の範囲指定

和暦の範囲指定を行う方法を見ていきましょう。

下記のサンプルコードでは、指定された年号と年数の範囲内にある西暦の年を取得する関数getGregorianYearsInRangeを定義しています。

// 指定された和暦の範囲内にある西暦の年を取得する関数
function getGregorianYearsInRange(era, startEraYear, endEraYear) {
  const eraStartYear = ERA_START_YEARS[era];
  if (eraStartYear === undefined) {
    throw new Error('不正な年号が指定されました。');
  }

  const startYear = eraStartYear + startEraYear - 1;
  const endYear = eraStartYear + endEraYear;

  const years = [];
  for (let year = startYear; year < endYear; year++) {
    years.push(year);
  }

  return years;
}

// 例：平成20年から平成30年までの西暦の年を取得
const gregorianYears = getGregorianYearsInRange('平成', 20, 30);
console.log(gregorianYears); // [2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018]

この関数では、年号と開始年数、終了年数を受け取り、対応する西暦の年を計算して配列で返しています。

例えば、平成20年から平成30年までの西暦の年を取得する場合、結果は[2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018]となります。

○サンプルコード7：和暦のカレンダー表示

和暦のカレンダー表示を行う方法を見ていきましょう。

下記のサンプルコードでは、指定された和暦の年と月に対応するカレンダーを表示する関数displayJapaneseCalendarを定義しています。

// 和暦の年と月に対応するカレンダーを表示する関数
function displayJapaneseCalendar(era, eraYear, eraMonth) {
  const eraStartYear = ERA_START_YEARS[era];
  if (eraStartYear === undefined) {
    throw new Error('不正な年号が指定されました。');
  }

  const year = eraStartYear + eraYear - 1;
  const month = eraMonth - 1;

  const date = new Date(year, month, 1);
  const lastDate = new Date(year, month + 1, 0);
  const lastDay = lastDate.getDate();

  console.log(`${era}${eraYear}年${eraMonth}月のカレンダー:`);
  console.log('日 月 火 水 木 金 土');

  let calendar = '';
  for (let i = 1; i < date.getDay(); i++) {
    calendar += '   ';
  }

  for (let day = 1; day <= lastDay; day++) {
    calendar += day.toString().padStart(2, ' ') + ' ';
    if (date.getDay() === 6) {
      calendar += '\n';
    }
    date.setDate(day + 1);
  }

  console.log(calendar);
}

// 例：令和3年12月のカレンダーを表示
displayJapaneseCalendar('令和', 3, 12);

この関数では、年号、和暦の年、和暦の月を受け取り、対応するカレンダーを表示しています。

例えば、令和3年12月のカレンダーを表示する場合、以下のようになります。

令和3年12月のカレンダー:
日 月 火 水 木 金 土
          1  2  3  4
 5  6  7  8  9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

○サンプルコード8：和暦の入力フォーム

和暦の入力フォームを作成する方法を見ていきましょう。

下記のHTMLとJavaScriptのサンプルコードでは、和暦の年号、年、月、日を入力し、対応する西暦の日付を表示する入力フォームを作成しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>和暦の入力フォーム</title>
  <script src="japanese-calendar.js"></script>
</head>
<body>
  <h1>和暦入力フォーム</h1>
  <form id="japaneseDateForm">
    <select id="era">
      <option value="明治">明治</option>
      <option value="大正">大正</option>
      <option value="昭和">昭和</option>
      <option value="平成">平成</option>
      <option value="令和">令和</option>
    </select>
    <input type="number" id="year" placeholder="年">
    <input type="number" id="month" placeholder="月">
    <input type="number" id="day" placeholder="日">
    <button type="submit">西暦に変換</button>
  </form>
  <p id="result"></p>
  <script src="input-form.js"></script>
</body>
</html>

// input-form.js
document.getElementById('japaneseDateForm').addEventListener('submit', function (event) {
  event.preventDefault();

  const era = document.getElementById('era').value;
  const year = parseInt(document.getElementById('year').value);
  const month = parseInt(document.getElementById('month').value);
  const day = parseInt(document.getElementById('day').value);

  const result = japaneseDateToWesternDate(era, year, month, day);
  document.getElementById('result').textContent = `西暦: ${result.getFullYear()}年${result.getMonth() + 1}月${result.getDate()}日`;
});

上記のサンプルコードでは、入力された和暦を取得し、japaneseDateToWesternDate関数で西暦に変換しています。

変換された西暦の日付は、結果表示エリアに表示されます。

○サンプルコード9：和暦のバリデーション

和暦のバリデーションを行う方法を見ていきましょう。

下記のサンプルコードでは、和暦の年号、年、月、日が正しい範囲内にあるかどうかをチェックする関数validateJapaneseDateを定義しています。

// 和暦のバリデーションを行う関数
function validateJapaneseDate(era, year, month, day) {
  const eraStartYear = ERA_START_YEARS[era];
  if (eraStartYear === undefined) {
    return false; // 年号が正しくない場合、falseを返す
  }

  const westernYear = eraStartYear + year - 1;
  const date = new Date(westernYear, month - 1, day);

  if (date.getFullYear() !== westernYear || date.getMonth() + 1 !== month || date.getDate() !== day) {
    return false; // 年、月、日が正しくない場合、falseを返す
  }

  return true; // すべての値が正しい場合、trueを返す
}

このvalidateJapaneseDate関数は、入力された和暦が正しい範囲内にあるかどうかを判断し、正しい場合はtrue、正しくない場合はfalseを返します。

この関数を利用して、入力フォームのバリデーションを実装することができます。

○サンプルコード10：和暦のカスタマイズ

和暦の表示をカスタマイズする方法を見ていきましょう。

下記のサンプルコードでは、和暦の日付を受け取り、カスタマイズされた表示形式に変換する関数formatJapaneseDateを定義しています。

// 和暦のカスタマイズ表示を行う関数
function formatJapaneseDate(era, year, month, day) {
  const eraSymbol = ERA_SYMBOLS[era];
  if (!eraSymbol) {
    throw new Error('不正な年号が指定されました。');
  }

  return `${eraSymbol}${year}年${month}月${day}日`;
}

const customDate = formatJapaneseDate('令和', 5, 4, 1);
console.log(customDate); // "R5年4月1日"が出力される

このformatJapaneseDate関数は、和暦の年号、年、月、日を受け取り、カスタマイズされた表示形式に変換します。

例えば、年号をアルファベットの頭文字にしたり、月や日に英語の接尾語を付けるなど、独自の表示形式に変換することが可能です。