Mach3.laBlog

日付を便利に操作するためのJavaScriptライブラリ色々

この記事は賞味期限切れです。(更新から1年が経過しています)

JavaScriptには日付を扱う為の “Date” オブジェクトがありますが、正直なところこれはあまり親切ではありません。 そこで、JavaScriptの日付周りで楽をするためのライブラリのメモをここに。

日付を便利に操作するためのJavaScriptライブラリ色々

XDate

XDate – A Modern JavaScript Date Library

XDate - A Modern JavaScript Date Library

Dateをもっと便利にした XDateオブジェクト を実装するライブラリです。 使い方はDateとほとんど変わらず、XDateに引数を渡して初期化して使います。

XDateオブジェクトは、DateにあるsetTimeやgetFullYearなどのメソッドを継承している他、 日付の足し算を行ったり、差分を計算したり等便利なメソッドが沢山生えています。

var d = new XDate(1977, 10, 25); // 1977/11/25のXDateオブジェクトを生成
d.addDays(14); // 14日足してみる
d.diffYears(new XDate()); // 今日との差分を取得する
d.toString("yyyy年M月d日 HH:mm"); // フォーマットした文字列を取得

Dateにないけど欲しかった機能が一通り手に入り、 且つDateの実装からあまり離れていないので使いやすいです。 大抵の物はこれでカバーできそうですね。

また、あまり世話を焼かないタイプのライブラリなので、サイズも小さくまとまっています。

Moment.js

Moment.js | Parse, validate, manipulate, and display dates

Moment.js | Parse, validate, manipulate, and display dates in javascript.

こちらもDateオブジェクトのラッパーのMomentオブジェクトを実装するライブラリですが、 メソッド群はXDateと違ってDateオブジェクトを模した形にはなっていません。

Momentオブジェクトの初期化は new を使わずに moment() に引数を渡しておこないます。

var m = moment(); // 現在の日付時刻のMomentオブジェクト

多彩なパーサー

そして注目すべきはその多彩なパーサーです。 引数に値を渡して日付・時刻を指定したMomentオブジェクトを生成出来るのはDateと同じですが、 moment() は様々な形式に対応する事ができます。

これもまだ一部ですが、例を挙げます。

moment("1977/11/25"); // 文字列
moment([1977, 10, 25]); // 配列
moment("1977-11-25", "YYYY-MM-DD"); // フォーマットを指定した文字列
moment("25-11-1977", ["YYYY-MM-DD", "DD-MM-YYYY"]); // フォーマットを複数指定した文字列

フォーマットの指定はすごく便利ですね。しかも配列で渡せば複数のフォーマットでチェックを行なってくれます。

その他機能

var now = moment();
now.add("days", 30); // 30日足す
now.subtract("days", 90); // 90日引く
now.format("YYYY/MM/DD"); // フォーマット
now.fromNow()); // "2 months ago"

fromNow() はTwitter等のWebサービスでよく使われる 「〜時間前」 といった表現を簡単に実装してくれます。 デフォルトは英語ですが、同梱された言語ファイルで簡単に日本語化できます。親切。

その他にも、ここではとても紹介しきれない程に機能満載なライブラリです。 また、その分少しファイルサイズがかさんでしまう側面も。

Humane-Dates

zachleat/Humane-Dates

「〜時間前」 のような表現を実装してくれる為だけの、非常にショートでシンプルなライブラリ。 “human” ではなく “humane” なので間違えぬよう。

cf) humaneの意味 – 英和辞典 Weblio辞書

humaneDate("1977/11/25"); // "36 years ago" (執筆時点)
humaneDate("1977/11/25", new Date()); // 第二引数と比較ができる

jQueryを読み込んでいれば、jQueryプラグインとしても機能するようです。

残念なのは、Moment.jsのように多言語化していないのと、 その為のインターフェイスを持ちあわせていない事。 日本語化する為には、コード内の “lang” オブジェクトを直接編集する必要があります。

単機能なのでコンパクトさが売りです。 コレだけが欲しい、という時には選択肢に入るかもしれません。

node-date-utils

JerrySievert/node-date-utils

node-data-utilsは、Dateオブジェクトを拡張するPolyfillです。 下の例はほんの一部ですが、Dateに追加される機能はシンプルで基本的な物です。

// スタティックなメソッド
Date.yesterday(); // 昨日のDateオブジェクトを返す
Date.tomorrow(); // 明日のDateオブジェクトを返す

// インスタンスのメソッド
var format = "YYYY年MM月DD日";
var d = new Date(1977, 10, 25);
d.toFormat(format); // 1977年11月25日
// 1年と2ヶ月と3日を足す
d.add({
    years: 1,
    months: 2,
    days: 3
});
d.toFormat(format); // 1979年1月28日

add に負の数を渡せば引き算にもなります。

node-date-utilsはDateのprototypeを拡張する事になるので、 あなたの環境・主義がそれを許すならば使ってみても良いのではないでしょうか。

まとめ

本当は datejs の実装が面白かったので紹介したかったのですが、 数年アップデートされておらず、試してみたもののうまく動かない物が多かったので、残念ながら諦めました。

日付の出力はWebサービス等で頻繁に行うと思いますので、 開発者の皆さんに感謝しつつ、できるだけ楽をしましょう。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

JavaScript for Date manipulation | Tech-Stepd41d8cd98f00b204e9800998ecf8427e