React アプリに Moment.js を使用する

1. Moment.js とは
2. React で Moment.js を使用する方法
3. Moment.js の実用例
4. react-moment パッケージ
5. 他の実行可能な代替案

日付と時刻を含む最新の Web アプリケーションを考えるのは難しいです。React アプリケーションも例外ではありません。

日付と時刻の管理は、React で動的アプリケーションを構築する上で中心的な役割を果たします。このため、JavaScript には Date オブジェクトが含まれています。これは、日付と時刻を含む単純な操作に役立ちます。

ただし、Date オブジェクトの操作は、口で言うほど簡単ではありません。日付 API は、日付のフォーマット、国際化、および一般的な操作には不十分です。

このため、JavaScript 開発者のコ​​ミュニティは、より高度な操作のいくつかを実行するために多くの日付ライブラリを作成しました。これらにより、時間とエネルギーを無駄にすることなく、日付をより効率的に処理できます。

Moment.js とは

これは、JavaScript で日付をフォーマットするための最も安定したライブラリの 1つです。モーメントライブラリは主にデータ値の解析とフォーマットに使用されますが、最新のアプリの構築に役立つ可能性のある多くの機能があります。

たとえば、Moment はデータ検証にも役立ちます。Node.js と通常の JavaScript の両方で動作します。

フロントエンドアプリケーションだけでなく、サーバー側のプログラミングにも使用できます。また、React や TypeScript などの多くの一般的な JavaScript ライブラリとも互換性があります。

ライブラリは、JavaScript でネイティブの Date オブジェクトをラップアラウンドする API を提供します。このように、元の DateAPI を操作したり変更したりする必要はありません。

Moment ライブラリは習得が容易で、ボーナスとして多くの言語をサポートしています。したがって、国際化の問題を簡単に解決できます。

この時点で、ライブラリはメンテナンスモードになっています。それはまだ安定しており、すべてのメソッドは想定どおりに機能します。

ただし、作成者は新しいバージョンのリリースを停止することにしました。Moment に慣れていて、React アプリで使用したい場合は、自由に使用できます。

アプリの長期的な将来について懸念している人は、他の JavaScript 日付ライブラリを検討することをお勧めします。

React で Moment.js を使用する方法

Moment.js は外部ライブラリであるため、プロジェクトフォルダにインストールする必要があります。そして、その間に、react-moment パッケージをインストールすることもできます。これについては後で説明します。

アプリにタイムゾーン機能が必要な場合は、moment-timezone もインストールすることをお勧めします。

npm install --save moment moment-timezone

パッケージのインストールが完了したら、それらをインポートする必要があります。それらを使用する予定のファイルを見つけてインポートします。

import moment from 'moment'
import Moment from 'react-moment'
import 'moment-timezone'

Moment は、このライブラリの日付操作用に特別に作成された React コンポーネントであるため、大文字にします。

Moment.js の実用例

React で Moment ライブラリを使用する 1つの例を見てみましょう。

let momentObject = moment()

この例では、コードの実行時間を表す単純なモーメントオブジェクトを返します。Moment ライブラリには、はるかに興味深い他の多くのメソッドが含まれています。

たとえば、.add() メソッドは、特定の時間を追加することでオブジェクトを変更できます。例を見てみましょう：

moment().add(10, 'days')

ご覧のとおり、.add() メソッドの最初の引数は数量を指定し、2 番目の引数は期間を指定するために必要です。たとえば、複数のメソッドを相互にチェーンできます。

moment().add(10, 'days').add(1, 'months')

このコードは、moment() 関数によって返される日付にさらに 1 か月を追加します。

react-moment パッケージ

react-moment は moment パッケージに基づいていますが、コンポーネントで同じ機能を提供します。文字列を日付としてフォーマットする必要がある例を見てみましょう。

import React  from 'react';
import Moment from 'react-moment';

class App extends React.Component {
    render() {
        return (
            <Moment>{'1996-07-21T11:55-5500'}</Moment>
        );
    }
}
export default App

または、Moment コンポーネントの date 属性を使用して文字列を渡すこともできます。日付は文字列である必要はありません。配列、オブジェクト、または Date オブジェクトのインスタンスにすることができます。

Moment コンポーネントは、React アプリで Moment ライブラリのコア機能を使用する簡単な方法を提供します。コンポーネントは、date などの多くのプロップを受け入れます。format、trim、および他の多く。

詳細については、公式ドキュメントを確認してください。

他の実行可能な代替案

JavaScript で日付を操作するためのライブラリは、モーメントライブラリだけではありません。date-fns のようなパッケージは素晴らしい代替手段を提供します。

非常に有益なドキュメントと Moment ライブラリと同じくらい多くの機能があります。このライブラリのすべての関数が文書化されています。

それらの名前は、関数の目的を理解しやすくするために使いやすいものです。