読者です 読者をやめる 読者になる 読者になる

だれも聞いていないと思って歌え

dance as if no one’s watching, sing as if no one’s listening, and live everyday as if it were your last.

Moment.jsで日付を扱う

とあるWebアプリを作ろうとしている中で、JavaScriptでもっと日付を楽に扱いたいと調べていて、 Moment.js というライブラリを知りました。

このMoment.jsについて紹介しているサイトは以前からあるので、最近できたものではないです。 比較的最近の Cybozuさんの記事 を読んだのをきっかけに使ってみることにしました。

現在の日付を扱う

Moment.js を参考にダウンロード、もしくはインストールをしてscriptタグで moment.min.js を読み込みます。

// momentオブジェクトの初期化
var today = moment();

// 日付の出力
console.log(today.format());    // -> 2016-06-05T19:37:38+09:00

// フォーマットを指定して出力
console.log(today.format('LLLL'));  // -> Sunday, June 5, 2016 7:54 PM

// 年月日をそれぞれ出力
console.log("year: ", today.year());    // -> year:  2016
console.log("month: ", today.month());  // -> month:  5
console.log("date: ", today.date());    // -> date:  5

moment().month() は、0から11の数字で帰ってくるため6月の場合は 5 と返ってきます。

日本語で出力する

上の手順と同様に、次は moment-with-locales.min.js をscriptタグで読み込みます。 Dateオブジェクトと比較して、この出力フォーマットの指定方法が一番楽だと感じました。

// locale指定
moment.locale('ja');

// momentオブジェクトの初期化
var today = moment();

// フォーマットを指定して出力
console.log(today.format('LLLL'));  // -> 2016年6月5日午後7時54分 日曜日

特定の日付を設定

日付の設定方法はいくつかあります。 moment() と括弧内で指定を行わなかった場合は現在日時で初期化が行われ、逆に括弧内で年月のみ指定された場合は1日で初期が行われます。そのため、上2つと下2つの結果が異なってきます。

// locale指定
moment.locale('ja');

console.log(moment(new Date(2016, 6 -1)).format('LL'));    // -> 2016年6月1日
console.log(moment({year:2016, month:6 -1}).format('LL')); // -> 2016年6月1日
console.log(moment().year(2016).month(6 -1).format('LL')); // -> 2016年6月5日
console.log(moment().set('year',2016).set('month',6 -1).format('LL')); // -> 2016年6月5日

最後に

すべての使い方を把握した訳ではないけれど、便利そうだなと思ったものをいくつか。 これら以外にも多くの関数が用意されている上に、タイムゾーンを扱うこともできるようです(タイムゾーンについては今回触れなかったので省略)。

// locale指定
moment.locale('ja');

// 指定した年月の日数を取得
console.log(moment(new Date(2016, 2 -1)).daysInMonth());  // -> 29

// 1月1日からの経過日数を取得
console.log(moment(new Date(2016, 6 -1, 5)).dayOfYear());  // -> 157

// 1月1日からの何週目か取得
console.log(moment(new Date(2016, 6 -1, 5)).weeksInYear());  // -> 53

X-UA-Compatibleについて調べてみた

今更ながらBootstrapの勉強を始めました。現在最新のBootstrap3です(4はαリリースのため)。 公式サイトを参考にしていて、Basic templateに書かれているmetaタグが見慣れないものだったので、調べてみました。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Getting started · Bootstrap

http-equiv

Mozillaの開発者向けの解説ページによると次のように記載されています。

プラグマディレクティブ、つまりどのように Web ページを提供するかについて、通常 Web サーバから与えられる情報です。 meta 要素 - HTML | MDN

では、 X-UA-Compatible は何かというと、Internet Explorerでどのバージョンのモードでレンダリングを行うか(ドキュメントモード)を指定することができるプラグマです。 IE=edge と指定することで、使用しているIEで利用可能なモードの中から、最高のモードを使用するように指示ができます。Internet Explorer 8 の場合はIE8モードに相当し、Internet Explorer 10 の場合はIE10モードに相当します。

ただし、 Internet Explorer 11 以降ではドキュメントモードの指定は推奨されず、Microsoft Edge では無視されるようになっているそうです。

新しい記事ではないですが、 X-UA-Compatible が何かを理解するためにこちらも参考にしました。