React で日付をフォーマットするための複数のアプローチ

React アプリケーションを構築する場合、開発者は日付を操作する方法を見つける必要があります。

これには、日付値のフォーマット、解析、および操作が含まれます。何らかの形で日付を含まない React アプリを考えるのは難しいです。

プログラミングにおける日付の問題は、値が常に希望どおりにフォーマットまたは分類されるとは限らないことです。日付値は、文字列、配列、さらにはオブジェクトとして利用できる場合があります。

他の場合は年のみが含まれ、他の日付値には年からミリ秒までのすべてが含まれます。JavaScript には、この問題を解決するための Date オブジェクトが含まれています。これは、データを管理するためのいくつかの優れたメソッドを提供します。

ただし、国際化や時間値の加算/減算など、より複雑なニーズにはまだ不十分です。

開発者は、JavaScript で日付を操作するための多数のライブラリを作成することにより、この問題を解決しました。最も経験豊富な Web 開発者でさえ、外部ライブラリを使用して Date API と直接対話することを選択します。

これらの外部パッケージは、日付のフォーマット、解析、および操作のためのより単純な API を提供します。これらは、JavaScript 開発者のエネルギーと日付の管理に費やす時間を節約します。

最も人気のあるライブラリは、いくつか例を挙げると、moment、date-fns、および luxor です。

JavaScript の日付オブジェクト

JavaScript の Date オブジェクトは完全に役に立たないわけではありません。特定の日付値の曜日を返す .getDay() など、簡単な操作に役立つメソッドをいくつか提供します。

Date オブジェクトは、すべての警告とすべてのメソッドの複雑な詳細を知っている場合に役立ちます。外部ライブラリと比較して、Date オブジェクトの最大の欠点は、変更可能であるということです。

この機能により、Web サイトに不整合が生じる可能性があります。たとえば、変更可能な日付の値を誤って上書きして、知らないうちに間違った日付を表示してしまう可能性があります。

日付オブジェクトで使用できる最も便利なメソッドは次のとおりです。

• .toDateString()：日付値を、はるかに読みやすい口頭の文字列に変換します。たとえば、今日の日付は'Fr Dec 17, 2021'文字列としてフォーマットされます。
• .getDay()：1 週間の日を返します。今日呼び出された場合、それは'Friday'を返します。

公式の MDN に関するドキュメントを読んで、Date オブジェクトとそれに関連するすべてのメソッドについてより深く理解してください。

React で date-fns ライブラリを使用したのフォーマット

moment や date-fns などの日付ライブラリは、React で日付を管理するための最も簡単なソリューションです。

react-moment ライブラリもあり、姉妹ライブラリのすべての機能を備えた React コンポーネントを提供します。これらのライブラリは、React アプリケーションで日付と時刻を処理するための優れたソリューションです。

まず、シェルで次のコマンドを入力して、date-fns パッケージをインストールする必要があります。

npm install date-fns

インストールすると、ライブラリをインポートできます。

date-fns パッケージの優れた点の 1つは、モジュール式です。パッケージ全体をインポートする必要はなく、必要な関数だけをインポートする必要があります。

これは非常に軽量なアプローチであり、アプリの高いパフォーマンスを保証します。date-fns を使用して日付をフォーマットする方法の例を次に示します。

import "./styles.css";
import {format} from 'date-fns'
export default function App() {
  return (
    <div className="App">
      {format(new Date(), "'We are currently in' MMMM")}
    </div>
  );
}

codesandbox でわかるように、最終的な出力は次のようになります-We are currently in December。

これは、date-fns ライブラリの有用性とそのフォーマット機能の簡単なデモンストレーションです。この場合、モジュラーアプローチを使用し、format 関数のみをインポートします。

次に、JSX 内で中括弧の間に呼び出し、関数の呼び出しが通常の JavaScript として解釈されるようにします。中括弧を使用すると、format() 関数の最初の引数である Date オブジェクトのインスタンスを取得することもできます。

2 番目の引数では、出力するテキストとそのフォーマット方法を指定します。この場合、月のフルネームを返す MMMM フォーマットを選択しました。

MMM を選択すると、出力は We are currently in Dec になります。これは、このパッケージのフォーマット機能の簡単なデモンストレーションです。

全体像を把握するには、ドキュメントで format() 関数を確認してください。

React でのフォーマットに date-fns を使用する利点

ライブラリには、他のライブラリに比べて多くの利点があります。速度をさらに上げるモジュラーアプローチについてはすでに説明しました。

ライブラリは、日付オブジェクトを操作するための抽象化レイヤーを提供するため、使い慣れたものであり、車輪の再発明はありません。多くのタイムゾーンと言語をサポートしています。

date-fns には簡単な API があります。最も重要なことは、ユースケースを詳細に説明する有益なドキュメントが付属していることです。

React で非常にうまく機能することはすでに実証済みです。このライブラリは、TypeScript と Flow でもうまく機能します。