こんにちは、ティウェブ藤園です。

今回は、日付処理を簡単にしてくれるMoment.jsと、それを使ってWordPressのRSSから取得した日付を整える方法についてお話します。

（追記）Moment.jsは現在非推奨となりました。
Moment.jsの公式サイトにて代替のJSライブラリのご紹介がありますのでそちらを参照ください。

Moment.js

Moment.jsは、独自に実装するにはいろいろと面倒な日付に関する処理を、ざっくりと簡単にしてくれるJavaScriptのライブラリです。

▼公式ドキュメント
https://momentjs.com/docs/

使い方

まずはCDNからライブラリを読み込みます。

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

「月曜日」など日本語表現を使いたい場合は、ロケール(locale)設定のファイルも読み込む必要があります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/ja.js"></script>

その後、必要な処理を記述していきます。

単純に日付を表示することはもちろんですが、年月だけ、曜日だけなどの、部分的な取得だったり、「2020/05/31」を「2020年5月31日」と表示方法の変換をすることも可能です。

また、日付の足し算や引き算などの計算、2つの日付の比較などもできるので、例えばイベントのWebサイトなどで、当日までのカウントダウンといったことにも利用できます。

実用例

では実用例として、表題に挙げた「WordPressのRSSから取得した日付を整える方法」について説明します。

WordPressのRSSは、日付を下記のような形で吐き出しています。

Sun, 31 Mar 2020 12:00:00 +0000

これを「2020年05月31日」と表示させたい場合、日付の表示をカスタマイズしていく必要がありますが、Moment.jsを使うとこのカスタマイズがとても簡単に行えます。

RSSの読み込み

まず、RSSを読み込みます。

基本的に読み込み方はすべて以前のXMLの記事と同様の方法で行います。

※合わせて、Moment.jsのfalls back error対応に対応するための記述も追加しておきます。
RSSから取得した日付のフォーマットがMoment.jsのデフォルトと異なり、警告が表示されてしまうので、フォーマットのチェックをパスするための記述です。

<script>
	$(window).on('load', function() {
		// falls back error対応
		moment.createFromInputFallback = function(config) {
			config._d = new Date(config._i);
		};

		// RSS取得
		$.ajax({
			url: 'RSSのURL',
			type: "GET",
			dataType: 'xml',
			timeout: 3000,
			success: function(data){
				var item = $('item', data);
				for( var i = 0; i < 3; i++ ) {
					var itemDate = $('pubDate', item[i]).text();
					console.log(itemDate);
				}
			}
		});
	});
</script>

上記で、RSSが取得され、最新の記事の3件までの日付がコンソールに表示されます。

これをMoment.jsで整えます。

日付のカスタマイズ

Moment.jsの処理を1行追加するだけで日付表示のカスタマイズができます。

<script>
	$(window).on('load', function() {
		// falls back error対応
		moment.createFromInputFallback = function(config) {
			config._d = new Date(config._i);
		};

		// RSS取得
		$.ajax({
			url: 'RSSのURL',
			type: "GET",
			dataType: 'xml',
			timeout: 3000,
			success: function(data){
				var item = $('item', data);
				for( var i = 0; i < 3; i++ ) {
					var itemDate = $('pubDate', item[i]).text();
					var itemDate = moment(itemDate).format('YYYY年MM月DD日'); // Moment.jsの処理
					console.log(itemDate);
				}
			}
		});
	});
</script>

これで、日付の表示が「YYYY年MM月DD日」というフォーマットに整えられたので、Webサイトで使用しやすくなりました。

JavaScriptのDateクラスで独自実装するとなると面倒な日付の処理が、たったこれだけで実現できます。

まとめ

こういった機能はプラグインで実現できるものもありますが、WordPressのプラグインの記事でデメリットとして書いたように、不要な機能が付随していることもあって、導入の見極めが難しいです。

今回のように限定的な機能が欲しいケースでは、ご紹介したMoment.jsのような軽量なライブラリを使用すると、独自に実装するよりメンテナンスがしやすくなったり、他のコンテンツでも流用できたりといったメリットが得られます。

もちろんライブラリの導入にも注意すべき点はありますが、ひとつの選択肢として検討してみてはいかがでしょうか。

ライブラリに限らず、Webサイトへの新しい機能の導入などでお困りごとがありましたら、ティウェブまでお気軽にご相談ください。