Moment.js | 日付と時間の操作を簡単に | 複数の実例で理解するJavaScriptライブラリ解説

INDEX

Moment.jsについての解説

Moment.jsについての解説

Moment.jsは、JavaScriptで日付と時間を操作するための非常に便利なライブラリです。生のJavaScriptでの複雑な日付操作をシンプルにし、日付の解析、フォーマット、出力、操作を容易に行えるようにします。多くのプロジェクトで使用されており、特に日付のフォーマット変換や、相対的な時間の計算などで非常に有用です。

Moment.jsの実装方法

Moment.jsを使用するためには、以下のコードを<head>内に記述して、ライブラリを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Moment.jsの特徴

特徴	説明
日付フォーマットの簡略化	様々なフォーマットで日付や時間を操作し、出力することができる。
時間の相対計算	過去や未来の時間を計算して表示できる（例：2時間前など）。
柔軟な操作性	日付や時間の加算、減算、比較などを簡単に行える。
タイムゾーン対応	タイムゾーンを考慮した日付操作も可能。

プロパティとその値の一覧表

プロパティ名	説明	値の例
moment()	現在の日時を取得します。	moment().format()
moment.format()	指定したフォーマットで日時を文字列として返します。	moment().format(“YYYY-MM-DD”)
moment.add()	指定した時間を加算します。	moment().add(7, ‘days’)
moment.subtract()	指定した時間を減算します。	moment().subtract(1, ‘month’)
moment.fromNow()	現在時刻からの相対時間を返します。	moment().fromNow()

現在の日付を取得する例

実行例

HTMLとJavaScriptコード


// 現在の日付を取得するMoment.jsの例
<div id="current-date"></div>

<script>
document.getElementById('current-date').textContent = moment().format('YYYY-MM-DD HH:mm:ss');
// 結果: 2024-10-06 12:30:45（現在の日付と時間）
</script>

解説

この例では、Moment.jsの`moment().format()`メソッドを使用して、現在の日付と時間を”YYYY-MM-DD HH:mm:ss”形式で表示しています。

時間を加算する例

実行例

HTMLとJavaScriptコード


// 時間を加算するMoment.jsの例
<div id="add-time"></div>

<script>
document.getElementById('add-time').textContent = moment().add(7, 'days').format('YYYY-MM-DD');
// 結果: 2024-10-13（現在の日付に7日を加算した結果）
</script>

解説

この例では、`moment().add()`メソッドを使用して、現在の日付に7日を加算し、”YYYY-MM-DD”形式で結果を表示しています。

時間を減算する例

実行例

HTMLとJavaScriptコード


// 時間を減算するMoment.jsの例
<div id="subtract-time"></div>

<script>
document.getElementById('subtract-time').textContent = moment().subtract(1, 'month').format('YYYY-MM-DD');
// 結果: 2024-09-06（現在の日付から1ヶ月を減算した結果）
</script>

解説

この例では、`moment().subtract()`メソッドを使用して、現在の日付から1ヶ月を減算し、”YYYY-MM-DD”形式で結果を表示しています。

相対時間を表示する例

実行例

HTMLとJavaScriptコード


// 相対時間を表示するMoment.jsの例
<div id="relative-time"></div>

<script>
document.getElementById('relative-time').textContent = moment().subtract(10, 'days').fromNow();
// 結果: 10日前
</script>

解説

この例では、`moment().subtract()`メソッドと`moment().fromNow()`を組み合わせて、現在から10日前の日時を相対的に「10日前」と表示しています。

Moment.jsの公式サイト

Moment.js | Home