JavaScriptでmoment.jsを使った日時管理｜初心者向けガイド
生徒
「先生、JavaScriptで日時をもっと簡単に扱う方法ってありますか？」
先生
「あります。標準のDateオブジェクトでもできますが、moment.jsというライブラリを使うと、日付や時間の操作が格段に便利になります。」
生徒
「ライブラリって難しそうですが、初心者でも使えますか？」
先生
「大丈夫です。簡単なメソッドを覚えるだけで、月末や月初の取得、フォーマットの変更も楽にできます。」
1. moment.jsとは？
moment.jsは、JavaScriptで日付や時間を扱うための人気ライブラリです。標準のDateオブジェクトだけでは複雑な日付操作が面倒ですが、moment.jsを使うとシンプルなコードで日時管理ができます。
例えば、日付の計算、フォーマット変更、月末・月初の取得などが簡単にできます。
2. moment.jsの導入方法
まずは、npmやCDNでmoment.jsを導入します。
// npmの場合
// npm install moment
// CDNの場合（HTMLに記載）
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
CDNを使えば、特別なインストールなしでブラウザで利用できます。
3. 現在日時の取得
現在の日時を取得するのも簡単です。moment()と書くだけです。
const now = moment();
console.log("現在日時:", now.format());
現在日時: 2025-11-18T12:34:56+09:00
format()メソッドで表示形式を自由にカスタマイズできます。
4. 日付のフォーマット変更
日付を「YYYY/MM/DD」の形式にしたい場合は、次のように書きます。
console.log("今日の日付:", now.format("YYYY/MM/DD"));
今日の日付: 2025/11/18
フォーマットの文字列は自由に組み合わせられるので、カレンダーやレポートに合わせて表示できます。
5. 月初・月末の取得
月初や月末を取得するのも簡単です。startOfとendOfメソッドを使います。
const startOfMonth = moment().startOf("month");
const endOfMonth = moment().endOf("month");
console.log("月初:", startOfMonth.format("YYYY-MM-DD"));
console.log("月末:", endOfMonth.format("YYYY-MM-DD"));
月初: 2025-11-01
月末: 2025-11-30
これだけで、複雑な計算なしに月初・月末を取得できます。
6. 日付の加算・減算
日付を加算したり減算したりするのも簡単です。addやsubtractを使います。
const nextWeek = moment().add(7, "days");
const lastMonth = moment().subtract(1, "months");
console.log("1週間後:", nextWeek.format("YYYY-MM-DD"));
console.log("先月同日:", lastMonth.format("YYYY-MM-DD"));
1週間後: 2025-11-25
先月同日: 2025-10-18
この方法を使えば、スケジュール管理やカレンダーアプリの実装も簡単です。
7. 日付の比較
日付の大小比較も簡単です。isBeforeやisAfterを使います。
const deadline = moment("2025-12-01");
console.log("締め切りは過ぎた？", moment().isAfter(deadline));
console.log("締め切り前？", moment().isBefore(deadline));
締め切りは過ぎた？ false
締め切り前？ true
これでタスク管理やイベント管理の条件分岐も簡単に行えます。
8. まとめの応用
moment.jsを使えば、標準のDateオブジェクトでは複雑な操作も、簡単なメソッド呼び出しで直感的に扱えます。日付の取得、フォーマット、月初・月末、加算・減算、比較まで一通り操作できます。
カレンダーアプリやスケジュール管理、ログの日付表示など、日付操作を多用するアプリには特におすすめです。
