BLOGスタッフブログ

インソースマーケティングデザイン

2014.04.24 システム

めくるめくJavaScriptライブラリの世界 ~Moment.js

はじめまして、4月から入社しましたシステムエンジニアの福田と申します。
以後、よろしくお願い致します。

 

さて、今や当然のように利用されているJavaScriptですが、登場してから約20年。

 

今に至るまで有志の手により様々なライブラリが開発・公開されて、我々開発者もその恩恵に浴しております。

 

今後は、そんな珠玉のライブラリを紹介してゆきたいと思います。

 

今回紹介するのは「Moment.js
JavaScriptで面倒な処理といえば「日付・時間」関係が挙げられるのではないでしょうか。

例えば、日時表記の変換や日時の差分などはその代表ですね。

JavaScriptでの日時処理はDateオブジェクトを使いますが、コレがなかなか面倒、先に挙げた例の日時表記の変換ですと・・・

 

//YYYY-MM-DD HH:mm:ssからYYYY年MM月DD日 HH時mm分ss秒へ
var da = new Date(‘2014-04-05 12:02:40’);
var formatDate =
da.getFullYear() + ‘年’ +
(’00’ + (da.getMonth() + 1)).slice(-2) + ‘月’ +
(’00’ + da.getDate()).slice(-2) + ‘日 ‘ +
(’00’ + da.getHours()).slice(-2) + ‘時’ +
(’00’ + da.getMinutes()).slice(-2) + ‘分’ +
(’00’ + da.getSeconds()).slice(-2) + ‘秒’;
console.log(formatDate);

 

と、まぁ長々と書く事となります。
※しかも0埋め処理で余計に見づらい

 

しかしながらMoment.jsを使うことで・・・

 

var m = moment(‘2014-04-05 12:02:40’);
var formatDate = m.format(‘YYYY年MM月DD日 HH時mm分ss秒’);
console.log(formatDate);

 

このようにスッキリ。

 

また、日時の差を取得する場合も・・・

 

var m1 = moment(‘2014-04-23 18:32:51’);
var m2 = moment(‘2014-04-19 02:12:40’);
var di = m1.diff(m2, ‘days’);
console.log(di);

 

このように書くことができるため、コードの可読性も向上します。

 

さて、Moment.jsの機能を一部ではありますが紹介させて頂きました。
「劇的」という訳ではありませんが、なかなかに便利なツールなのではないでしょうか?

インソースマーケティングデザインが書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します