【TypeScript】これで日付操作も簡単！date-fnsを使う方法

こんにちは！
今日は、TypeScriptでdate-fnsライブラリを使う方法について詳しく解説していきます。

TypeScriptで日付操作をするのって難しそう…date-fnsって便利らしいけど、どうやって使えばいいんだろう？

そんな疑問を持っている方も多いのではないでしょうか。

date-fnsは、JavaScriptの日付操作をより簡単にするライブラリです。
日付の計算や比較、フォーマット変更などが簡単にできるようになりますよ。
もちろん、TypeScriptでなくJavaScriptでも使える内容になっているので参考にしてみてください。

この記事を読めば、以下のようなことがわかるようになります。

date-fnsのインストール

それでは、TypeScriptでdate-fnsを使い始めるための準備をしていきましょう。
まずは、date-fnsをインストールする必要があります。

date-fnsは、npmというJavaScriptのパッケージ管理ツールを使ってインストールします。
npmは、Node.jsをインストールすると自動的に一緒にインストールされます。
もし、まだNode.jsをインストールしていない場合は、先にNode.jsの公式サイトからダウンロードしてインストールしておきましょう。

Node.jsのインストールが完了したら、ターミナル（コマンドプロンプト）を開いて、以下のコマンドを実行します。

npm install date-fns

このコマンドを実行すると、date-fnsがプロジェクトにインストールされます。
インストールが完了したら、TypeScriptファイルでdate-fnsを使用する準備が整います。

次に、TypeScriptファイルでdate-fnsを使うための設定をしましょう。
TypeScriptファイルの先頭に、次のようなインポート文を追加します。

import { format, addDays } from 'date-fns';

この例では、formatとaddDaysという2つの関数をインポートしています。
formatは日付をフォーマットするための関数で、addDaysは日付に日数を加算するための関数です。

これらの設定を行うことで、TypeScriptプロジェクトでdate-fnsの機能を使用できるようになります。

基本的な日付操作

date-fnsをインストールして設定したら、いよいよ基本的な日付操作を学んでいきましょう。
ここでは、現在日時の取得と表示、日付のフォーマット、日付の比較という3つの基本操作を解説します。

現在日時の取得と表示

まず、現在の日時を取得して表示する方法を見ていきましょう。
date-fnsでは、JavaScript標準のDateオブジェクトを使用します。
以下のコードで、現在の日時を取得して表示できます。

import { format } from 'date-fns';

const now = new Date();
console.log(format(now, 'yyyy-MM-dd HH:mm:ss'));

このコードを実行すると、例えば「2024-03-29 14:30:00」のような形式で現在の日時が表示されます。
format関数の第二引数で指定している「yyyy-MM-dd HH:mm:ss」は日付のフォーマットを指定しています。

日付のフォーマット

date-fnsの強力な機能の1つが、日付のフォーマット機能です。
先ほどの例でも使用しましたが、format関数を使うことで、さまざまな形式で日付を表示できます。

import { format } from 'date-fns';

const date = new Date(2024, 2, 29); // 2024年3月29日
console.log(format(date, 'yyyy年MM月dd日')); // 2024年03月29日
console.log(format(date, 'MMMM do, yyyy')); // March 29th, 2024
console.log(format(date, 'EEEE')); // Friday

このように、フォーマット文字列を変更することで、多様な形式で日付を表示できます。
これにより、ユーザーに分かりやすい形式で日付を提示することができ、アプリケーションの使いやすさが向上します。

日付の比較

日付の比較も、date-fnsを使うと簡単に行えます。
以下は、2つの日付を比較する例です。

import { compareAsc, compareDesc } from 'date-fns';

const date1 = new Date(2024, 2, 29);
const date2 = new Date(2024, 3, 1);

console.log(compareAsc(date1, date2)); // -1
console.log(compareDesc(date1, date2)); // 1

compareAsc関数は、日付を昇順で比較します。
結果が-1の場合、date1がdate2よりも前の日付であることを示します。

compareDesc関数は、日付を降順で比較します。
結果が1の場合、date1がdate2よりも前の日付であることを示します。

これらの基本的な日付操作を使いこなすことで、日付に関する多くの処理を簡単に行えるようになります。

日付の計算

日付の計算は、予定の管理や期限の設定など、多くのアプリケーションで必要となる重要な機能です。
date-fnsを使うと、複雑な日付計算も簡単に行うことができます。
ここでは、日付の加算と減算、そして日付間の差分計算について見ていきましょう。

日付の加算と減算

日付に対して日数や月数を加えたり引いたりする操作は、date-fnsのadd関数とsub関数を使って簡単に行えます。

以下は、日付に7日を加算する例です。

import { add, format } from 'date-fns';

const today = new Date();
const nextWeek = add(today, { days: 7 });

console.log(format(nextWeek, 'yyyy-MM-dd'));

このコードを実行すると、今日の日付から7日後の日付が「yyyy-MM-dd」形式で表示されます。
例えば、今日が2024年3月29日だとすると、「2024-04-05」と表示されるでしょう。

同様に、日付から3ヶ月を引く場合は次のようにします。

import { sub, format } from 'date-fns';

const today = new Date();
const threeMonthsAgo = sub(today, { months: 3 });

console.log(format(threeMonthsAgo, 'yyyy-MM-dd'));

日付間の差分計算

2つの日付の間の期間を計算することも、date-fnsを使えば簡単です。
differenceIn〇〇という形式の関数を使用します。
例えば、2つの日付の間の日数を計算する場合は次のようにします。

import { differenceInDays } from 'date-fns';

const date1 = new Date(2024, 2, 29);
const date2 = new Date(2024, 3, 5);

const difference = differenceInDays(date2, date1);
console.log(`2つの日付の差は${difference}日です。`);

このコードを実行すると、「2つの日付の差は7日です。」と表示されます。

同様に、月数や年数の差を計算することも可能です。

import { differenceInMonths, differenceInYears } from 'date-fns';

const date1 = new Date(2024, 2, 29);
const date2 = new Date(2025, 8, 15);

const monthDifference = differenceInMonths(date2, date1);
const yearDifference = differenceInYears(date2, date1);

console.log(`月数の差: ${monthDifference}ヶ月`);
console.log(`年数の差: ${yearDifference}年`);

このコードを実行すると、「月数の差: 17ヶ月」「年数の差: 1年」と表示されます。

これらの日付計算機能を使うことで、例えば次のようなアプリケーションの開発が容易になるでしょう。

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

ユーザーから入力された日付文字列を JavaScript の Date オブジェクトに変換する必要がよくあります。
date-fnsのparse関数を使うと、この作業を簡単に行えます。

以下は、文字列から日付オブジェクトを作成する例です。

import { parse, format } from 'date-fns';

const dateString = '2024-03-29';
const parsedDate = parse(dateString, 'yyyy-MM-dd', new Date());

console.log(format(parsedDate, 'MMMM do, yyyy'));

このコードを実行すると、「March 29th, 2024」と表示されます。
parse関数は、第一引数に解析する文字列、第二引数に文字列のフォーマット、第三引数に基準となる日付を指定します。

この機能を使うことで、さまざまな形式の日付文字列を統一的に扱うことができ、入力データの処理が容易になります。

日付の妥当性チェック

ユーザーから入力された日付が有効かどうかをチェックすることも重要です。
date-fnsのisValid関数を使うと、簡単に日付の妥当性をチェックできます。

以下は、日付の妥当性をチェックする例です。

import { isValid, parse } from 'date-fns';

function checkDateValidity(dateString: string): boolean {
  const parsedDate = parse(dateString, 'yyyy-MM-dd', new Date());
  return isValid(parsedDate);
}

console.log(checkDateValidity('2024-03-29')); // true
console.log(checkDateValidity('2024-02-30')); // false
console.log(checkDateValidity('invalid-date')); // false

このコードでは、checkDateValidity関数を定義しています。
この関数は、与えられた日付文字列を解析し、その結果が有効な日付かどうかを判定します。

実行結果を見ると、「2024-03-29」は有効な日付なのでtrueを返します。
一方、「2024-02-30」（2月30日は存在しない）と「invalid-date」（日付として解析できない）はfalseを返します。

この機能を使うことで、以下のようなメリットがあります。

日付の解析とバリデーションを適切に行うことで、アプリケーションの堅牢性が大幅に向上します。
ユーザーからの入力を受け付ける際や、外部からのデータを処理する際には、必ずこれらの処理を行うようにしましょう。

次の章では、さらに進んでタイムゾーンの扱い方について学んでいきます。

date-fnsの高度な使用法

ここまでdate-fnsの基本的な使い方を見てきましたが、このライブラリにはさらに高度な機能があります。
ここでは、カスタムフォーマットの作成と、ロケールの設定について詳しく解説します。

カスタムフォーマットの作成

date-fnsのformat関数は非常に柔軟で、様々なカスタムフォーマットを作成することができます。
以下は、カスタムフォーマットを使用して日付を表示する例です。

import { format } from 'date-fns';
import { ja } from 'date-fns/locale';

const date = new Date(2024, 2, 29, 14, 30, 0);

const customFormat = format(date, "'今日は' yyyy'年' MM'月' dd'日 'EEEE'曜日、時刻は' HH:mm:ss 'です。'", { locale: ja });

console.log(customFormat);

このコードを実行すると、以下のような出力が得られます。

今日は2024年03月29日 金曜日、時刻は14:30:00 です。

このようなカスタムフォーマットを使用することで、アプリケーションの要件に合わせた柔軟な日付表示が可能になります。

カスタムフォーマットを作成する際のポイントは以下の通りです。

ロケールの設定

date-fnsは、多言語対応（国際化）もサポートしています。
ロケールを設定することで、日付や時刻を異なる言語で表示することができます。

以下は、異なるロケールで日付をフォーマットする例です。

import { format } from 'date-fns';
import { ja, enUS, de } from 'date-fns/locale';

const date = new Date(2024, 2, 29);

console.log(format(date, 'PPP', { locale: ja }));
console.log(format(date, 'PPP', { locale: enUS }));
console.log(format(date, 'PPP', { locale: de }));

このコードを実行すると、以下のような出力が得られます。

2024年3月29日
March 29th, 2024
29. März 2024

この機能を使用することで、以下のようなメリットがあります。

ロケールを使用する際は、必要なロケールファイルを個別にインポートすることを忘れないようにしましょう。
これにより、不要なロケールデータを含めることなく、アプリケーションのサイズを最適に保つことができます。

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

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

おすすめの書籍

プロを目指す人のためのTypeScript入門

プロを目指す人のためのTypeScript入門　安全なコードの書き方から高度な型の使い方まで

posted with ヨメレバ

鈴木 僚太 技術評論社 2022年04月22日頃

楽天ブックス

Amazon

Kindle

プロ開発者への近道！基礎から応用まで幅広くカバー

1一番のおすすめは「プロを目指す人のためのTypeScript入門」です。
この本は、TypeScriptの基礎から高度な使い方まで幅広く解説しています。

初心者でも理解しやすい説明から始まり、徐々に難易度を上げていく構成が特徴。
プログラミング経験者なら、さらに深い理解が得られるでしょう。

実際の開発現場で使えるテクニックも豊富に紹介されているのがポイント。
型の使い方や設計パターンなど、実践的な内容が満載です。

プロの開発者を目指す人はもちろん、TypeScriptをしっかり学びたい人におすすめの一冊。
基礎固めから応用力の向上まで、幅広いニーズに応えてくれます。

現場で使えるTypeScript 詳解実践ガイド

現場で使えるTypeScript 詳解実践ガイド

posted with ヨメレバ

菅原浩之/CodeMafia 外村将大 マイナビ出版 2024年03月22日頃

楽天ブックス

Amazon

Kindle

実践的スキルを身につけたい人必見！現場のノウハウが詰まった一冊

次におすすめは「現場で使えるTypeScript 詳解実践ガイド」がランクイン。
この本の特徴は、実際の開発現場で役立つ知識が詰まっていること。

TypeScriptの基本的な文法から始まり、実際のプロジェクトでどう活用するかまで丁寧に解説しています。
エラー対処法や性能改善のコツなど、現場ならではの知恵も満載。

特に、大規模なプロジェクトでTypeScriptを使う際のベストプラクティスが学べるのが魅力。
コードの保守性や再利用性を高める方法も詳しく紹介されています。

すでにJavaScriptの経験がある人や、実務でTypeScriptを使いたい人におすすめ。
この本を読めば、現場で即戦力として活躍できる力が身につくはずです。

書籍に関してはこちらの記事も参考にしてくださいね！

あわせて読みたい

TypeScriptの学びを加速させる！おすすめ書籍ランキング９選

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

TypeScript公式ハンドブック

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

TypeScript Deep Dive

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

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

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

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

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

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

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

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

ホームページ

　採用情報　

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

• ONE WEDGE 代表インタビュー
• ONE WEDGEってどんな会社？
• ONE WEDGEで働く社員

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

最後に

date-fnsとTypeScriptの組み合わせは、モダンな開発環境において非常に強力なツールとなります。
この記事で学んだ内容を実際のプロジェクトに適用し、日付操作に関する課題を効果的に解決していってください。
型安全性と豊富な機能を兼ね備えたこの組み合わせを活用することで、より信頼性の高く、保守しやすいアプリケーションを効率的に開発することができるでしょう。