JavaScript

moment.jsで簡単！JavaScript日時処理の方法と実例

  /

JavaScriptで日付や時間の操作を行う際に便利なライブラリとして、moment.jsがあります。このライブラリを使うことで、複雑な日時処理が簡単に行えます。
今回は、moment.jsを使って日時を表示する方法について紹介します。

Contents

CSSスタイルの設定

まず、日時を表示するためのページのスタイルを設定します。以下のCSSコードを使って、ページの見た目を整えましょう。

<style>
body {
  font-size: 18px;
  text-align: center;
  line-height: 1.8em;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0;
}
h2{
  text-align: center;
  font-size: 20px;
  padding-top: 20px;
}
p{
  padding-bottom: 20px;
}
</style>

JavaScriptによる日時の表示

次に、moment.jsを使って日時を表示するためのJavaScriptコードを紹介します。moment.jsファイルを読み込みます。
以下の様に記述することで指定した日時処理を簡単に出来ます。

  • moment().format(‘日付のフォーマット’)
  • 相対時間の表示：以下のコードでは、現在時刻からの相対的な時間を表示しています。
    moment(“相対時間”, “日付のフォーマット”).fromNow()
  • カレンダー時間の表示：以下のコードでは、現在時刻から何日か前や後の日時を表示しています。
    moment().subtract(何日前数値, ‘days’).calendar()

document.write()で各日時処理後の内容を表示してます。

<script src="moment.js"></script>
<h2>日付のフォーマット</h2>
<script>
var m = moment().format('MMMM Do YYYY, h:mm:ss a'); // July 25th 2023, 5:28:31 pm
document.write(m);
</script>
<br>

<script>
var m = moment().format('dddd');    // Tuesday
document.write(m);
</script>
<br>

<script>
var m = moment().format("MMM Do YY");   // Jul 25th 23
document.write(m);
</script>
<br>

<script>
var m = moment().format('YYYY [escaped] YYYY'); // 2023 escaped 2023
document.write(m);
</script>
<br>

<script>
var m = moment().format();  // 2023-07-25T17:35:13+09:00
document.write(m);
</script>
<br>


<h2>相対時間</h2>
<script>
var m = moment("20111031", "YYYYMMDD").fromNow();   // 12 years ago
document.write(m);
</script>
<br>

<script>
var m = moment("20120620", "YYYYMMDD").fromNow();   // 11 years ago
document.write(m);
</script>
<br>

<script>
var m = moment().startOf('day').fromNow();  // 18 hours ago
document.write(m);
</script>
<br>

<script>
var m = moment().endOf('day').fromNow();    // in 6 hours
document.write(m);
</script>
<br>

<script>
var m = moment().startOf('hour').fromNow(); // 38 minutes ago
document.write(m);
</script>
<br>


<h2>カレンダー時間</h2>
<script>
var m = moment().subtract(10, 'days').calendar();   // 07/15/2023
document.write(m);
</script>
<br>

<script>
var m = moment().subtract(6, 'days').calendar();    // Last Wednesday at 5:40 PM
document.write(m);
</script>
<br>

<script>
var m = moment().subtract(3, 'days').calendar();    // Last Saturday at 5:40 PM
document.write(m);
</script>
<br>

<script>
var m = moment().subtract(1, 'days').calendar();    // Yesterday at 5:40 PM
document.write(m);
</script>
<br>

<script>
var m = moment().calendar();    // Today at 5:40 PM
document.write(m);
</script>
<br>

<script>
var m = moment().add(1, 'days').calendar(); // Tomorrow at 5:40 PM
document.write(m);
</script>
<br>

<script>
var m = moment().add(3, 'days').calendar(); // Friday at 5:40 PM
document.write(m);
</script>
<br>

<script>
var m = moment().add(10, 'days').calendar();    // 08/04/2023
document.write(m);
</script>
<br>

moment.jsを使って日時処理を簡単に表示するデモページ

実際に動作するデモページを以下のリンクから確認できます。moment.jsを使った日時処理がどのように行われるか、実際の動作を確認してみましょう。

moment.jsを使って日時処理を簡単に表示するデモページ

ソース元：Moment.js

Moment.js

まとめ

moment.jsを使うことで、JavaScriptの標準的なDateオブジェクトよりも簡単に、そして柔軟に日時を操作することができます。特に、複雑なフォーマットや相対時間の表示が必要な場合に非常に便利です。今回紹介した方法を参考に、ぜひ自分のプロジェクトでもmoment.jsを活用してみてください。

　

※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

日付フォーマット moment.js 日時処理
関連記事