はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptを基礎から学び始めた方や、Webサイトで和暦表示を実装したい方を対象にしています。特に、日本の政府系サイトや企業サイトで求められる和暦表示の実装方法に興味がある方に最適です。

この記事を読むことで、JavaScriptを使用して元号の1桁の年数を全角で表示する方法を習得できます。また、日付処理の基本テクニックや、和暦表示におけるフォーマット調整のノウハウを学ぶことができます。2024年以降の元号「令和」が1桁の年数（2年～9年）になるにあたり、適切な表示方法を知っておくことは実務上非常に重要です。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • JavaScriptの基本的な文法（変数、関数、条件分岐など）
  • Dateオブジェクトの基本的な使い方
  • 和暦に関する基本的な知識（元号の概念など）

元号表示の重要性と課題

日本のWebサイトでは、特に政府関連や官公庁のサイトでは日付表示に和暦を使用することが求められます。和暦表示は、元号と年数の組み合わせで構成され、「令和3年」のように表記されます。

しかし、実装上の課題が一つあります。元号の年数が1桁の場合（例: 令和2年、令和3年など）、半角数字で表示してしまうと見栄えが悪くなるという問題です。特にデザイン性を重視するサイトでは、1桁の年数も全角で表示したいという要望が多くあります。

この問題を解決するためには、JavaScriptで年数の桁数を判定し、1桁の場合のみ全角数字に変換する処理を実装する必要があります。本記事では、この具体的な実装方法について詳しく解説します。

JavaScriptで元号の1桁の年数を全角で表示する実装方法

ステップ1: 和暦変換の基本実装

まず、日付を和暦に変換する基本的な関数を実装します。JavaScriptには標準で和暦変換の機能がないため、自前で実装する必要があります。

Javascript

/**
 * 日付を和暦に変換する関数
 * @param {Date} date - 変換する日付
 * @returns {string} 和暦文字列
 */
function toJapaneseEra(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();

    // 元号の定義（明治以降）
    const eras = [
        { name: '明治', start: { year: 1868, month: 1, day: 25 } },
        { name: '大正', start: { year: 1912, month: 7, day: 30 } },
        { name: '昭和', start: { year: 1926, month: 12, day: 25 } },
        { name: '平成', start: { year: 1989, month: 1, day: 7 } },
        { name: '令和', start: { year: 2019, month: 5, day: 1 } }
    ];

    // 適切な元号を判定
    let era = eras[eras.length - 1]; // デフォルトは最新の元号
    for (let i = eras.length - 1; i >= 0; i--) {
        const e = eras[i];
        if (year > e.start.year || 
            (year === e.start.year && month > e.start.month) || 
            (year === e.start.year && month === e.start.month && day >= e.start.day)) {
            era = e;
            break;
        }
    }

    // 元号年を計算
    const eraYear = year === era.start.year ? 1 : year - era.start.year + 1;

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

この関数は、指定された日付を和暦に変換します。元号の定義を配列で持っておき、日付に応じて適切な元号を判定しています。

ステップ2: 年数の全角変換関数の実装

次に、年数が1桁の場合のみ全角数字に変換する関数を実装します。これが本記事の核心部分です。

Javascript

/**
 * 数字を全角に変換する関数
 * @param {number} num - 変換する数字
 * @returns {string} 全角数字の文字列
function toFullWidthNumber(num) {
    // 半角数字と全角数字の対応表
    const halfToFull = {
        '0': '０',
        '1': '１',
        '2': '２',
        '3': '３',
        '4': '４',
        '5': '５',
        '6': '６',
        '7': '７',
        '8': '８',
        '9': '９'
    };

    // 数字を文字列に変換
    const numStr = String(num);

    // 各桁を全角に変換
    let fullWidthStr = '';
    for (let i = 0; i < numStr.length; i++) {
        const char = numStr[i];
        if (halfToFull[char]) {
            fullWidthStr += halfToFull[char];
        } else {
            fullWidthStr += char; // 数字以外はそのまま
        }
    }

    return fullWidthStr;
}

この関数は、半角数字を全角数字に変換します。対応表を使って各桁を変換しており、2桁以上の数字にも対応できます。

ステップ3: 和暦表示関数の改良

次に、ステップ1で実装した和暦表示関数を改良し、1桁の年数を全角で表示するように修正します。

Javascript

/**
 * 日付を和暦に変換し、1桁の年数を全角で表示する関数
 * @param {Date} date - 変換する日付
 * @returns {string} 和暦文字列（1桁の年数は全角）
 */
function toJapaneseEraWithFullWidthYear(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();

    // 元号の定義（明治以降）
    const eras = [
        { name: '明治', start: { year: 1868, month: 1, day: 25 } },
        { name: '大正', start: { year: 1912, month: 7, day: 30 } },
        { name: '昭和', start: { year: 1926, month: 12, day: 25 } },
        { name: '平成', start: { year: 1989, month: 1, day: 7 } },
        { name: '令和', start: { year: 2019, month: 5, day: 1 } }
    ];

    // 適切な元号を判定
    let era = eras[eras.length - 1]; // デフォルトは最新の元号
    for (let i = eras.length - 1; i >= 0; i--) {
        const e = eras[i];
        if (year > e.start.year || 
            (year === e.start.year && month > e.start.month) || 
            (year === e.start.year && month === e.start.month && day >= e.start.day)) {
            era = e;
            break;
        }
    }

    // 元号年を計算
    const eraYear = year === era.start.year ? 1 : year - era.start.year + 1;

    // 1桁の年数を全角に変換
    const fullWidthEraYear = eraYear < 10 ? toFullWidthNumber(eraYear) : eraYear;

    return `${era.name}${fullWidthEraYear}年${month}月${day}日`;
}

改良点は、元号年を計算した後、eraYearが10未満（つまり1桁）の場合のみtoFullWidthNumber関数で全角に変換している点です。

ステップ4: 完成版と使用例

最後に、完成版の関数と使用例を示します。これで任意の日付を1桁の年数を全角で表示する和暦に変換できます。

Javascript

// 完成版の和暦表示関数
function toJapaneseEraWithFullWidthYear(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();

    // 元号の定義（明治以降）
    const eras = [
        { name: '明治', start: { year: 1868, month: 1, day: 25 } },
        { name: '大正', start: { year: 1912, month: 7, day: 30 } },
        { name: '昭和', start: { year: 1926, month: 12, day: 25 } },
        { name: '平成', start: { year: 1989, month: 1, day: 7 } },
        { name: '令和', start: { year: 2019, month: 5, day: 1 } }
    ];

    // 適切な元号を判定
    let era = eras[eras.length - 1]; // デフォルトは最新の元号
    for (let i = eras.length - 1; i >= 0; i--) {
        const e = eras[i];
        if (year > e.start.year || 
            (year === e.start.year && month > e.start.month) || 
            (year === e.start.year && month === e.start.month && day >= e.start.day)) {
            era = e;
            break;
        }
    }

    // 元号年を計算
    const eraYear = year === era.start.year ? 1 : year - era.start.year + 1;

    // 1桁の年数を全角に変換
    const fullWidthEraYear = eraYear < 10 ? toFullWidthNumber(eraYear) : eraYear;

    return `${era.name}${fullWidthEraYear}年${month}月${day}日`;
}

// 使用例
const today = new Date();
console.log(toJapaneseEraWithFullWidthYear(today)); // 例: "令和４年1月15日"

// 特定の日付をテスト
const testDate1 = new Date(2020, 4, 1); // 令和2年5月1日
console.log(toJapaneseEraWithFullWidthYear(testDate1)); // "令和２年5月1日"

const testDate2 = new Date(2029, 11, 31); // 令和11年12月31日
console.log(toJapaneseEraWithFullWidthYear(testDate2)); // "令和11年12月31日"

ハマった点やエラー解決

この実装を行う際に、いくつかの問題点に直面しました。

問題1: 元号の変更に対応する方法

元号は時折変更されるため、コードに固定値として書いてしまうと、将来の元号変更時に修正が必要になります。

解決策: 元号の定義を配列として外部化し、必要に応じて追加・修正できるように構造化しました。これにより、新しい元号が追加された際には配列に新しい要素を追加するだけで対応できます。

問題2: 1桁の年数と2桁の年数の区別

1桁の年数（1～9年）は全角で表示し、2桁以上の年数は半角のまま表示する必要がありますが、この判定ロジックが複雑になりがちです。

解決策: 単純にeraYear < 10という条件で1桁かどうかを判定し、1桁の場合のみ全角変換関数を適用するようにしました。これにより、シンプルで分かりやすいロジックを実装できました。

問題3: 全角数字への変換方法

JavaScriptには標準で全角・半角変換の機能がないため、独自の変換ロジックを実装する必要がありました。

解決策: 対応表（マッピングオブジェクト）を作成し、半角数字を全角数字に変換する関数を実装しました。この方法は拡張性が高く、将来の追加要件にも対応しやすいです。

解決策のまとめ

上記の問題点を解決するために、以下のアプローチを採用しました。

  1. 元号定義の外部化: 元号の定義を配列として管理し、将来の変更に対応できるようにしました。
  2. 条件分岐の簡素化: 年数が1桁かどうかをeraYear < 10というシンプルな条件で判定しました。
  3. 全角変換関数の実装: 対応表を用いた全角変換関数を実装し、柔軟な変換を実現しました。

これらのアプローチにより、保守性の高いコードを実装できました。

まとめ

本記事では、JavaScriptで元号の1桁の年数を全角で表示する方法について解説しました。

  • 和暦変換の基本実装方法
  • 元号判定ロジックの作成
  • 年数の全角変換関数の実装
  • 完成した和暦表示関数の使い方

この記事を通して、日本のWebサイトで適切な和暦表示を実装するための知識を得られたと思います。特に、2024年以降の元号「令和」が1桁の年数（2年～9年）になるにあたり、適切な表示方法を知っておくことは実務上非常に重要です。

今後は、他の和暦関連の処理や、国際化対応についても記事にする予定です。

参考資料