JavaScriptで時間を扱うならMoment.js

@nqounetです。

時間の表示というのは結構面倒な事です。

momentは時間を扱うライブラリです。

昔書いていた、AJAXでチャットのようなスクリプトには、サーバから取得した時間の値（unixtime）を文字列に変換している部分があるのですが、momentがあればその辺を全部任せることができます。

ドキュメントの量がものすごい

時間を扱うのはどの言語でも共通して必要なことだと思います。

しかし、扱い方は多種多様です。

年だけにしても、西暦4桁、西暦下2桁、日本の場合はさらに元号で省略なし（平成、昭和）、省略形（平、昭）、アルファベット（H、S）が考えられます。

最近では、カレンダー形式での入力もできるようになっていたりして便利ですが、扱える物が多すぎるので、それに応じてドキュメントもものすごいことになっています。

正直なところ、これを使いこなすのはかなり大変だと思います。

よく使うのはunixとformat

データとして時間を考えた時、文字列の形で保持しておくと何かと面倒なので、私はわりと数値（unixtime）で持っています。

それはそれで問題になることもあるのですが、扱う範囲がある程度限られている場合はかなり有効だと思っています。

MySQLにはDATETIME型というのがありますが、あまり踏み込んでいません。

大きく過去（例えば生年月日など）は、日付だけで文字列にしてしまうことが多いです。

で、momentを使って時間のオブジェクトを作るのはmoment()を使います。

1

var now = moment();

お手軽ですね。

Perlとのやりとりの場合は、moment.unix()が便利ですね。

1

var date = moment.unix(1318781876);

nowもdateもmomentオブジェクトになっています。

で、これを表示するにはformatを使います。

1
2

now.format(); // => 2014-05-22T16:53:16+09:00
date.format('YYYY/MM/DD'); // => 2011/10/17

まずは、入力のmoment()とmoment.unix()、出力のobj.format()だけ覚えておけば良いのではないかと思います。

相対表示

momentには相対表示（5分前とか昨日とか）ができるオブジェクトも用意されています。

1

date.fromNow(); // => 3 years ago

しかし、こちらにはformatが無いようで、あまり自由には表示できません。

細かく表示したい場合は、結構大変です。

色々と調べてみましたが、色々と検討はされている（独自実装もある）ようですが、まだ実装はないみたいです。

この部分だけを以前実装しましたが、momentを使っている利点が格段に減った気がしました。

多言語対応もちゃんと出来ているので、日本語で使うのも特に支障はないと思います。

言語の設定ファイルの文字列を変更するのは簡単なので、必要ならば変更するとよいでしょう。

AJAXで時間のデータを扱うときには本当に便利だと思います。

ソースコード 

1
2
3
4
5
6
7

var now = moment();
console.debug('now:', now.format());

var date = moment.unix(1318781876);
console.debug('date:', date.format('YYYY/MM/DD'));

console.debug('fromNow:', date.fromNow());

余談ですが

ちなみに、この検証用のソースコードを作る環境を作るのに入力したコマンドは

1
2
3
4

yo webapp
bower install -S momentjs
grunt bowerInstall
grunt serve

これでブラウザが立ち上がり、moment.jsが読み込まれているページが表示されます。

app/scripts/main.jsを編集するとブラウザが更新されて、ウェブツールでみる（Chromeだとコマンド+オプション+iでいける）とコンソールにデバッグ出力されているのが確認できます。

参考になる資料

© 2000 - 2025 nqou.net
Hugo で構築されています。
テーマ Stack は Jimmy によって設計されています。