【TypeScript】文字列⇒日付、日付⇒文字列のフォーマット方法

こんにちは！
みなさんは日付を扱うプログラミングでつまずいたことはありませんか？
日付は何げなく使っていても、実はデータ型の違いや、フォーマットの指定方法で意外と罠が潜んでいるんですよね。
特に文字列とのデータ渡しの際は要注意です。

そこでこの記事では、TypeScriptで日付を文字列にフォーマットしたり、その逆の変換をする際の様々なテクニックをご紹介します。
初心者の方でも「なるほど！」と思えるように、コードの例を交えてわかりやすく解説していきますので、ぜひ最後までご覧くださいね。

それでは早速、日付の文字列フォーマットのパターンから見ていきましょう！

Contents

日付の文字列フォーマットのパターン
- よく使われる日付フォーマットの紹介
- カスタムフォーマット
日付オブジェクトから文字列への変換
- Dateオブジェクトのメソッドの使用
- date-fnsライブラリの利用
文字列から日付オブジェクトへの変換
フォーマットのバリデーション
- 正規表現の使用
- date-fnsライブラリの利用
まとめ

日付の文字列フォーマットのパターン

日付を文字列で表現するときは、様々なフォーマットパターンが使われています。
ここではよく使われるフォーマットと、カスタムフォーマットの作り方をご紹介しますね。

よく使われる日付フォーマットの紹介

まずは代表的な日付フォーマットパターンを見ていきましょう。

yyyy/MM/dd (年/月/日)

2024/04/20 のようにフォーマットされます。
国際的に広く使われているスタンダードなフォーマットです。

MM/dd/yyyy (月/日/年)

04/20/2024 のようにフォーマットされます。
主に米国などで使われています。

dd-MMM-yyyy (日-月略語-年)

20-Apr-2024 のように表示されます。
月が略語で表記されるのが特徴的です。

EEE, MMM d yyyy (曜日略語, 月略語日年)

Sat, Apr 20 2024 のようにフォーマットされます。
曜日が含まれているので、日付の概念がつかみやすくなります。

このように、同じ日付でも見た目が大きく変わりますね。
用途に合わせて使い分けるとよいでしょう。

カスタムフォーマット

既存のパターンで表現しきれない場合は、カスタムフォーマットを作ることができます。
フォーマット指定文字列を使ってパターンを決めます。

y : 年を表す(yyyy で西暦4桁)
M : 月を表す(MM で2桁、MMM で月略語)
d : 日を表す
E : 曜日を表す(EEE で曜日略語)

例えば yyyy年M月d日(EEE) と指定すると、2024年4月20日(土) のようにフォーマットされます。
時刻なども組み合わせて指定できますよ。

オプションでタイムゾーンの指定も可能です。
海外のサイトを作る際などに役立ちますね。

カスタムフォーマットを作るコツをおさえれば、用途に合わせてオリジナルの日付フォーマットを自在に作れるようになりますよ！

日付オブジェクトから文字列への変換

日付オブジェクトから文字列に変換する方法は大きく分けて2つあります。
Dateオブジェクトのメソッドを使う方法と、サードパーティのライブラリを使う方法です。

Dateオブジェクトのメソッドの使用

Dateオブジェクトには、日付を文字列に変換するためのメソッドがいくつか用意されていますよ。

toISOString()メソッド

toISOString()を使うと、ISO 8601形式の文字列に変換できます。


const date: Date = new Date(2024, 3, 20, 12, 0, 0); // 2024年4月20日12時00分00秒
const isoString: string = date.toISOString();
console.log(isoString); // "2024-04-20T12:00:00.000Z"

国際的な標準フォーマットなので、データ交換の際に便利ですね。

toDateString()メソッド

toDateString()を使うと、人間が読みやすい形式の文字列を取得できます。


const date: Date = new Date(2024, 3, 20, 12, 0, 0); // 2024年4月20日12時00分00秒
const dateString: string = date.toDateString();
console.log(dateString); // "Sat Apr 20 2024"

要領よくまとめられた形式なので、ユーザーに見せる用途に適していますね。

他にもtoLocaleString()などのメソッドもありますが、フォーマットオプションは限られています。

date-fnsライブラリの利用

日付オブジェクトから文字列への変換をする際も、文字列から日付オブジェクトへの変換で使用したdate-fnsを使用します。

このdate-fnsライブラリを使えば、さまざまなフォーマットに対応した文字列を生成できるんです。
変換時のオプションも柔軟に指定できるので、ユースケースに合わせて最適な文字列を作成できますよ。

日付オブジェクトから文字列への変換

date-fnsのformat関数を使えば、日付オブジェクトから文字列への変換ができます。
第1引数に日付オブジェクト、第2引数にフォーマット文字列を渡すだけですね。


import { format } from "date-fns";

const date: Date = new Date(2024, 3, 20, 12, 0, 0); // 2024年4月20日12時00分00秒
const dateString: string = format(date, "yyyy年MM月dd日 HH:mm");
console.log(dateString); // "2024年04月20日 12:00"

このように、カスタムフォーマットを簡単に指定できるのがdate-fnsの大きな魅力です。
一般的なフォーマットも内部でサポートされているので、ユーザーに見せる用途ならformat(date, 'PPPP')とするだけで良いですね。

フォーマット指定文字列の構文は少し独特ですが、公式ドキュメントを確認すれば簡単に学べます。

文字列から日付オブジェクトへの変換

ここからは、文字列を日付オブジェクトに変換する方法について説明していきますね。

Dateコンストラクタの使用

一番手っ取り早い方法は、Dateコンストラクタに文字列を渡して新しい日付オブジェクトを作成することです。


const dateString: string = "2024-04-20T12:00:00Z";
const date: Date = new Date(dateString);
console.log(date); // 2024-04-20T12:00:00.000Z

日付文字列のフォーマットは yyyy-MM-ddTHH:mm:ss.sssZ のように、ISOフォーマットに準拠している必要がありますが、これ以外のフォーマットだと正しく解析できない可能性があります。

Date.parse()の使用

より幅広いフォーマットに対応するには、Date.parse()メソッドを使うとよいでしょう。
RFC822やISO 8601などの標準フォーマットをサポートしています。


const dateString: string = "Sat, 20 Apr 2024 12:00:00 GMT";
const date: Date = new Date(Date.parse(dateString));
console.log(date); // 2024-04-20T12:00:00.000Z

ただし、ブラウザ間で解析の動作が異なる場合があるので、注意が必要です。
フォーマットが正しくない場合は NaN を返します。

date-fnsライブラリの利用

より柔軟に文字列から日付オブジェクトへの変換をしたい場合は、date-fnsというサードパーティのライブラリを使うのがおすすめですよ。

date-fnsは軽量でモジュール化された設計になっているんです。
つまり、プロジェクトで必要な機能だけをインポートできるわけですね。
しかも、ImmutableなAPIなので、元の値を変更することなく安全に日付を操作できるんですよ。

date-fnsのセットアップ

さて、早速date-fnsをプロジェクトに入れていきましょう。
ターミナルで以下のコマンドを実行してインストールします。


npm install date-fns

文字列から日付オブジェクトへの変換

parseメソッドの第1引数に日付文字列、第2引数にフォーマット文字列を渡せば、文字列から日付オブジェクトへの変換ができるんですよ。


import { parse } from 'date-fns';

const dateString: string = "2024/04/20 12:00 PM";
const date: Date = parse(dateString, 'yyyy/MM/dd hh:mm a', new Date());
console.log(date); // 2024-04-20T12:00:00.000Z

こうすればカスタムフォーマットの文字列を自在に解析できちゃいますね。
フォーマット指定文字列の構文は、ちょっと他のライブラリと異なるので、公式ドキュメントを確認するとスムーズに学べますよ。

フォーマットのバリデーション

入力された日付文字列が想定したフォーマットに従っているかをチェックする方法については、主に2つの選択肢があります。

正規表現の使用

1つ目の方法は、正規表現を使ってフォーマットをパターンとしてチェックする方法です。


const datePattern: RegExp = /^\d{4}-\d{2}-\d{2}$/;
const dateString: string = "2024-04-20";

if (datePattern.test(dateString)) {
  console.log("フォーマットは有効です");
} else {
  console.log("フォーマットが不正です");
}

このように、先頭から年4桁、ハイフン、月2桁、ハイフン、日2桁で構成される文字列ならOK、それ以外はNGというパターンを正規表現で表現しています。

正規表現を使う利点は、自分でカスタムのパターンを柔軟に定義できる点ですね。
しかし、フォーマットが複雑になると正規表現も複雑になり、可読性が下がったり間違いを生むリスクがあります。

date-fnsライブラリの利用

date-fnsでチェックすることも可能です。

このdate-fnsライブラリには、フォーマットチェックの機能が用意されているんです。
ライブラリ側ですでにさまざまなフォーマットのパターンが考慮されているので、信頼性が高いフォーマットチェックができちゃいますよ。

日付の有効性チェック

date-fnsのisValid関数を使えば、簡単に日付の有効性をチェックできます。
引数に日付文字列を渡します。


import { isValid } from 'date-fns';

const validDateString: string = "2024/04/20";
const isValidDate: boolean = isValid(new Date(validDateString));
console.log(isValidDate); // true

const invalidDateString: string = "2024/13/32";
const isInvalidDate: boolean = isValid(new Date(invalidDateString));
console.log(isInvalidDate); // false

このisValid関数は、渡された日付値が妥当な値かどうかを真偽値で返してくれます。
月が13月以上や、日にちが32日以上の明らかに不正な値はfalseと判定されますね。

ただし、この関数ではフォーマットのチェックまでは行われません。
フォーマットチェックが必要な場合は、isMatch関数を使うと良いでしょう。


import { isMatch } from 'date-fns';

const dateString: string = "2024/04/20";
const isValidFormat: boolean = isMatch(dateString, 'yyyy/MM/dd');
console.log(isValidFormat); // true

isMatch関数ではフォーマットパターンを指定できるので、文字列がそのパターンに沿った妥当なフォーマットかどうかを判定できますね。

date-fnsにはこのように日付の有効性チェックのための便利な関数が揃っています。
ただし、ライブラリを使うとバンドルサイズが増えるというデメリットもあります。
必要に応じて適切に使い分けましょう。

【付録】さらに学びを深めるためのリソース

intersection型について理解を深めたところで、さらに学習を進めたい方のために、いくつかのリソースを紹介します。
これらのリソースを活用することで、TypeScriptの型システムについてより深い知識を得ることができるでしょう。

オンラインで参照できる公式ドキュメント

TypeScript公式ハンドブック

https://www.typescriptlang.org/docs/
TypeScriptの公式ドキュメントです。
intersection型を含む、すべての型システムの機能について詳細な説明があります。

TypeScript Deep Dive

https://basarat.gitbook.io/typescript/
TypeScriptの深い部分まで掘り下げて解説しているオンラインブックです。
無料で読むことができ、intersection型についても詳しく説明されています。

TypeScriptの学習は終わりがありません。
新しい機能が常に追加され、より良い書き方が発見されています。
継続的に学習を続けることで、より良いTypeScriptプログラマーになれるはずです。

キャリア形成/給与還元
ひとつひとつ真摯に向き合う企業