Programming PR

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

 
【TypeScript】文字列⇒日付、日付⇒文字列のフォーマット方法
記事内に商品プロモーションを含む場合があります

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

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

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

Contents
  1. 日付の文字列フォーマットのパターン
  2. 日付オブジェクトから文字列への変換
  3. 文字列から日付オブジェクトへの変換
  4. フォーマットのバリデーション
  5. まとめ

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

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

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

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

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

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

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

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

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

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

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

    5. 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')とするだけで良いですね。

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

あわせて読みたい

format(公式ドキュメント)

date-fnsを使えば、データを壊すことなく柔軟に日付をフォーマットできる大きなメリットがあります。
ただし機能が多岐にわたるので、必要な機能のみをインポートするのがコツですよ。
たとえば今回はformat関数のみを部分的にインポートしています。

状況に応じて適切なツールを使い分けましょう。
簡単な日付フォーマットであればネイティブのDate関数で十分かもしれません。

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

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

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

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

あわせて読みたい

parse(公式ドキュメント)

第3引数には現在の日付を渡す必要がありますが、これはdate-fnsの仕様によるものなんです。
文字列だけじゃ年や月が曖昧になっちゃうからですね。

date-fnsを使えばデータを壊さずに柔軟に日付操作ができるメリットがあります。
でも機能が多岐にわたるので、必要な機能だけインポートするのがコツです。
簡単な操作ならネイティブのDate関数で事足りるかもしれません。
こちらも状況に応じて適切に使い分けましょう！

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

入力された日付文字列が想定したフォーマットに従っているかをチェックする方法については、主に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にはこのように日付の有効性チェックのための便利な関数が揃っています。
ただし、ライブラリを使うとバンドルサイズが増えるというデメリットもあります。
必要に応じて適切に使い分けましょう。

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

株式会社 ONE WEDGEでは、新たな仲間を募集しています！

私たちと一緒に、革新的で充実したキャリアを築きませんか？
当社は、従業員が仕事と私生活のバランスを大切にできるよう、充実した福利厚生を整えています。

  • 完全週休2日制（土日休み）で、祝日や夏季休暇、年末年始休暇もしっかり保証！
  • 様々な休暇制度（有給、慶弔、産前・産後、育児、バースデー休暇）を完備！
  • 従業員の成長と健康を支援するための表彰制度、資格取得支援、健康促進手当など！
  • 生活を支えるテレワーク手当、記事寄稿手当、結婚祝金・出産祝金など、様々な手当を提供！
  • 自己啓発としての書籍購入制度や、メンバー間のコミュニケーションを深める交流費補助！
  • 成果に応じた決算賞与や、リファラル採用手当、AI手当など、頑張りをしっかり評価！
  • ワークライフバランスを重視し、副業もOK！

株式会社 ONE WEDGEでは、一人ひとりの従業員が自己実現できる環境を大切にしています。
共に成長し、刺激を与え合える仲間をお待ちしております。
あなたの能力と熱意を、ぜひ当社で発揮してください。
ご応募お待ちしております！

ホームページ、採用情報は下記ボタンからご確認ください！

ホームページ
　採用情報　

会社のことがわかるおすすめ記事

応募、ご質問など、LINEでお気軽にご相談ください♪

まとめ

いかがでしたか？
TypeScriptにおける日付のフォーマット操作について、一通り説明してきましたね。

最初に、日付の文字列フォーマットのよく使われるパターンを紹介しました。
yyyy/MM/ddやMM/dd/yyyy、EEE, MMM d yyyyなど、フォーマットによって同じ日付でも見た目が大きく変わることが分かったと思います。
さらにカスタムフォーマットの作り方も学びましたよ。

次に文字列から日付オブジェクトへの変換方法として、DateコンストラクタやDate.parse()、サードパーティのライブラリdate-fnsの使い方を解説しました。
プロジェクトの要件に合わせて適切な方法を選ぶ必要がありますね。

その逆の日付オブジェクトから文字列への変換では、Dateオブジェクトのメソッドとdate-fnsライブラリのメリット・デメリットを理解することができたと思います。

最後に、日付フォーマットのバリデーション方法として、date-fnsのisValid関数とisMatch関数を紹介しました。
簡単な有効性チェックからフォーマットパターンの検証まで対応できますね。

日付のフォーマット操作は様々なケースが想定されるので一筋縄ではいきません。
しかし、今回の内容を参考に上手く活用していただければ幸いです。

typescript フォーマット 文字列 日付
関連記事

COMMENT

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です