JavaScriptで正規表現を使って「月日」文字列から末尾以外の0を削除する方法

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

この記事は、JavaScriptの基本的な知識がある開発者を対象としています。特に、フォームの日付入力処理やデータ整形の際に「03月05日」のような文字列から末尾以外の0を削除して「3月5日」のように表示させたいと考えている方に最適です。本記事を読むことで、正規表現を活用して月日を表す文字列から不要な0を効率的に削除する実装方法を習得できます。また、実際の開発で遭遇する可能性のあるエラーとその解決策についても学べるため、実践的なスキルを身につけることができます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な知識（変数、関数、文字列操作） - 正規表現の基本的な理解（メタ文字、量指定子など） - replaceメソッドの基本的な使い方

月日文字列の整形が必要な背景

Webアプリケーション開発において、日付データの表示形式を統一することはユーザビリティ向上のために重要です。特に日本語の環境では「03月05日」のような表記が一般的ですが、UI上では「3月5日」と表示させたいケースが多くあります。このような整形処理は、正規表現を使うことで簡潔かつ効率的に実装できます。

日付データをユーザーから受け取る際に、ゼロパディングされた形式（例: "03月05日"）で送られてくることがありますが、表示する際には余分なゼロを削除して自然な表現に変換したいという要件は頻繁に発生します。特にフォーム入力結果の表示や、データベースから取得した日付情報を整形して表示する際に役立ちます。

正規表現を使った具体的な実装方法

ステップ1：問題の定義

まず、私たちが解決したい課題を明確に定義します。与えられた入力が「01月02日」「03月04日」「12月31日」のような形式であると仮定します。この場合、期待される出力はそれぞれ「1月2日」「3月4日」「12月31日」となります。つまり、月と日の先頭にあるゼロ（ただし、10以上の場合は削除しない）を削除する必要があります。

ステップ2：正規表現のパターン設計

この問題を解決するための正規表現パターンを設計します。考えられるアプローチはいくつかありますが、ここでは以下の正規表現を使用します：

/(^|\D)0(\d)/g

この正規表現の各部分の意味は以下の通りです：

(^|\D) - 文字列の先頭または数字以外の文字（この場合は"月"や"日"）
0 - 削除対象のゼロ
(\d) - ゼロに続く数字（1〜9）
g - フラグで、文字列全体で一致するものをすべて置換

このパターンは、文字列の先頭または数字以外の文字（例: "月"や"日"）の後に続く「0+数字」の形式に一致し、そのゼロ部分を削除します。

ステップ3：JavaScriptでの実装

上記の正規表現を使用したJavaScriptの実装例を以下に示します：

Javascript

function removeLeadingZeroForMonthAndDay(dateString) {
  // 月日文字列から末尾以外の0を削除
  return dateString.replace(/(^|\D)0(\d)/g, '$1$2');
}

// 使用例
console.log(removeLeadingZeroForMonthAndDay("01月02日")); // "1月2日"
console.log(removeLeadingZeroForMonthAndDay("03月04日")); // "3月4日"
console.log(removeLeadingZeroForMonthAndDay("12月31日")); // "12月31日"
console.log(removeLeadingZeroForMonthAndDay("10月20日")); // "10月20日"

この関数は、引数として受け取った日付文字列に対して正規表現による置換を行い、余分なゼロを削除した文字列を返します。$1と$2は正規表現のキャプチャグループを参照しており、それぞれ(^|\D)と(\d)に一致した部分を表します。

ステップ4：より堅牢な実装

上記の実装は基本的なケースではうまく動作しますが、より複雑なケースにも対応できるように改良できます。例えば、入力が「00月00日」のような不正な形式である場合への対応や、他の区切り文字（スラッシュなど）への対応などです。

以下に、より堅牢な実装例を示します：

Javascript

function removeLeadingZeroForMonthAndDayRobust(dateString) {
  // 空文字列、null、undefinedの場合はそのまま返す
  if (!dateString) return dateString;

  // 正規表現パターンでゼロパディングを削除
  return dateString.replace(/(^|\D)0(\d)(?=\D|$)/g, '$1$2');
}

// 使用例
console.log(removeLeadingZeroForMonthAndDayRobust("01月02日")); // "1月2日"
console.log(removeLeadingZeroForMonthAndDayRobust("03/04/2023")); // "3/4/2023"
console.log(removeLeadingZeroForMonthAndDayRobust("12月31日")); // "12月31日"
console.log(removeLeadingZeroForMonthAndDayRobust("10月20日")); // "10月20日"
console.log(removeLeadingZeroForMonthAndDayRobust("00月00日")); // "0月0日"
console.log(removeLeadingZeroForMonthAndDayRobust("")); // ""
console.log(removeLeadingZeroForMonthAndDayRobust(null)); // null

この改良版では、以下の点を追加しています：

入力値の検証（空文字列、null、undefinedの場合の処理）
先読み（(?=\D|$)）を使用して、数字の後に続く文字が数字でないか、文字列の末尾であることを確認
より一般的な区切り文字にも対応

ハマった点やエラー解決

この実装では、いくつかの注意点があります。

問題1：文字列の先頭にある0の処理

以下のようなコードでは、文字列の先頭にある0は削除されません：

Javascript

"03月04日".replace(/(^|\D)0(\d)/g, '$1$2'); // "3月04日"（日部分の0が削除されない）

解決策：

正規表現パターンを改良して、文字列の先頭にも一致するようにします：

Javascript

"03月04日".replace(/(^|\D)0(\d)(?=\D|$)/g, '$1$2'); // "3月4日"

問題2：12月31日のような既にゼロがないケースの誤処理

以下のようなコードでは、既にゼロがない場合でも処理が実行されます：

Javascript

"12月31日".replace(/(^|\D)0(\d)/g, '$1$2'); // "12月31日"（問題なし）

このケースでは問題ありませんが、より複雑なパターンでは意図しない結果になる可能性があります。

問題3：異なる日付形式への対応

「2023/03/04」のような形式では、上記の正規表現は期待通りに動作しません：

Javascript

"2023/03/04".replace(/(^|\D)0(\d)/g, '$1$2'); // "2023/3/4"（年部分も影響を受ける）

解決策：

年部分には影響を与えないように正規表現を調整します：

Javascript

"2023/03/04".replace(/(^|\D)(?<!\d)0(\d)(?=\D|$)/g, '$1$2'); // "2023/03/04"（年部分は変更されない）

この正規表現では、負の後読み（(?<!\d)）を使用して、数字の直後に続く0は対象外としています。

ステップ5：ユニットテストによる検証

実装した関数が期待通りに動作するかを確認するため、ユニットテストを作成します。ここではJestを使用したテスト例を示します：

Javascript

describe('removeLeadingZeroForMonthAndDay', () => {
  test('01月02日 → 1月2日', () => {
    expect(removeLeadingZeroForMonthAndDay("01月02日")).toBe("1月2日");
  });

  test('03月04日 → 3月4日', () => {
    expect(removeLeadingZeroForMonthAndDay("03月04日")).toBe("3月4日");
  });

  test('12月31日 → 12月31日', () => {
    expect(removeLeadingZeroForMonthAndDay("12月31日")).toBe("12月31日");
  });

  test('10月20日 → 10月20日', () => {
    expect(removeLeadingZeroForMonthAndDay("10月20日")).toBe("10月20日");
  });

  test('空文字列 → 空文字列', () => {
    expect(removeLeadingZeroForMonthAndDay("")).toBe("");
  });

  test('null → null', () => {
    expect(removeLeadingZeroForMonthAndDay(null)).toBeNull();
  });
});

これらのテストケースを実行することで、関数が様々な入力に対して期待通りに動作することを確認できます。

まとめ

本記事では、JavaScriptの正規表現を活用して「月日」文字列から末尾以外の0を削除する方法について解説しました。

ポイント1: 正規表現パターン/(^|\D)0(\d)(?=\D|$)/gを使うことで、月日文字列の先頭にある0を削除できる
ポイント2: キャプチャグループを参照することで、削除対象以外の部分は保持できる
ポイント3: 入力値の検証や先読みなどのテクニックを組み合わせることで、より堅牢な実装が可能

この記事を通して、日付データの整形処理を効率的に行うための実践的なスキルを習得できたことと思います。正規表現は一見複雑に見えますが、基本的なパターンを理解すれば様々な文字列操作に応用できます。今後は、国際化対応や多言語環境での日付処理についても記事にする予定です。

参考資料

参考にした記事、ドキュメント、書籍などがあれば、必ず記載しましょう。

JavaScriptで正規表現を使って「月日」文字列から末尾以外の0を削除する方法📅