date-fns プレイグラウンド

date-fnsとは？

date-fnsは、JavaScriptで日付を操作するための包括的で一貫性のある信頼性の高いツールを提供する、モダンなJavaScript日付ユーティリティライブラリです。ネイティブのJavaScript Date オブジェクトは多くの問題と矛盾がありますが、date-fnsは日付操作に対してモジュール化された関数型のアプローチを提供します。tree-shakeableであるため、実際に使用する関数のみを含めることができ、バンドルサイズを最小限に抑えます。このライブラリは200以上の関数をサポートしており、フォーマットとパースから比較、操作、ローカライズまでのすべてをカバーしています。

date-fnsプレイグラウンドを使用する理由は？

JavaScriptで日付を操作することは難しい場合があります。タイムゾーン、フォーマットパターン、日付計算は予期しない結果につながることがよくあります。プレイグラウンド環境では、date-fns関数をリアルタイムで試験でき、即座に出力を確認でき、完全なプロジェクトをセットアップすることなくAPIを学習できます。フォーマット文字列のテスト、日付計算のデバッグ、またはアプリケーションに統合する前に日付ロジックを迅速にプロトタイプ化するのに最適です。

ツール説明

date-fnsプレイグラウンドは、JavaScriptコードを記述および実行できるインタラクティブなコーディング環境で、date-fnsライブラリ全体が事前にロードされています。date-fnsライブラリ全体は dateFns オブジェクトを通じて利用可能で、200以上の関数すべてにアクセスできます。コードはタイプ時に自動的に実行され（デバウンス付き）、すべての console.log、console.warn、console.error の出力はエディタ下の組み込みターミナルに表示されます。これにより、date-fnsの学習、日付操作のテスト、さまざまなフォーマットオプションの試験に最適です。

例

現在の日付をフォーマットする：

const now = new Date();
console.log(dateFns.format(now, "MMMM do, yyyy"));
// 出力: December 30th, 2025

2つの日付間の日数を計算する：

const start = new Date(2025, 0, 1);
const end = new Date(2025, 11, 31);
console.log(dateFns.differenceInDays(end, start) + " days");
// 出力: 364 days

日付に時間を追加する：

const today = new Date();
const nextWeek = dateFns.addWeeks(today, 1);
const nextMonth = dateFns.addMonths(today, 1);
console.log("Next week:", dateFns.format(nextWeek, "yyyy-MM-dd"));
console.log("Next month:", dateFns.format(nextMonth, "yyyy-MM-dd"));

日付が過去または未来かどうかを確認する：

const date = new Date(2024, 5, 15);
console.log("Is past?", dateFns.isPast(date));
console.log("Is future?", dateFns.isFuture(date));

日付文字列をパースする：

const parsed = dateFns.parse("25/12/2025", "dd/MM/yyyy", new Date());
console.log(dateFns.format(parsed, "EEEE, MMMM do, yyyy"));
// 出力: Thursday, December 25th, 2025

機能

• date-fnsライブラリ全体: dateFns オブジェクトを通じて200以上のdate-fns関数すべてにアクセス
• ライブコード実行: スマートなデバウンス付きでタイプ時にコードが自動実行
• 組み込みターミナル: ブラウザ開発者ツールなしでコンソール出力を即座に表示
• 構文ハイライト: より良いコード可読性のためのJavaScript構文ハイライト
• エラーハンドリング: ランタイムエラーはターミナル出力に明確に表示

ユースケース

• date-fnsの学習: プロジェクトセットアップなしで異なる関数を試験し、結果を即座に確認
• 日付フォーマットテスト: 異なるフォーマット文字列を試して、必要な正確な出力パターンを見つける
• 日付計算プロトタイピング: 営業日の追加、間隔の検索、日付の比較など複雑な日付計算をテスト
• 日付ロジックのデバッグ: プロジェクトから日付関連のコードスニペットを分離してテスト
• クイック日付変換: 日付フォーマット間の変換または時間差をその場で計算

一般的なdate-fns関数

フォーマットトークンリファレンス