こんにちは。ディレクターのJackです。
最近、JavaScriptを勉強しています。いやー奥が深いし、難しいですね。
「JavaScriptでは日付関連の処理が面倒なんですよ～」みたいなことを小耳に挟んだので、今回はMoment.jsを使って日付処理に挑戦してみます。通常はDateオブジェクトを利用するらしいですが、機能的に不足しているなど、使いづらいようです……。
フロントエンドエンジニアの方からすれば当たり前すぎることかもしれませんが、実際にコードを書いてくれているエンジニアの気持ちを理解するためにも、ディレクターも「まず、やってみる」ということが大事だと思っています。
さて、本題です。
Moment.jsとは
Moment.jsとは、JavaScriptにて日付処理を便利にやってくれるライブラリです。
GitHubで、めちゃくちゃスターが付いている……！
執筆時点の2016/08/29で、27,541ついてます！！
GitHub以外にも、Qiitaへの投稿数も多いです……！
これは使ってみるしかないですね！！
ドキュメントを読みつつ、ゆっくりコーディング開始です。
実際に書いてみる
会社の隣の席にいるフロントエンドエンジニアのほりでーから、「Jackさん、JavaScriptを書くなら、CodePenが便利ですよ！」と言われたので、それを使って書いてみます。
ライブラリを読み込む
まず、Moment.jsのライブラリを読み込む必要があります。
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>上記のように読み込めば問題なし！ 今回はCDN経由で読み込みます。
現在時刻を取得してみる
手はじめに、現在時刻を取得してみます。
var m = moment();
var output = m.format('YYYY年MM月DD日 HH:mm:ss dddd');
console.log(output);コンソールログには、このように出力されます。
> 2016年01月25日 22:30:46 Monday現在時刻が取得できました。とてもEasyですね。
1日の終わりの時刻を取得する。
1日の終わり、つまり日付の変わり目の時刻を取得するには、下記のようなスクリプトになります。
var m = moment();
var output = m.endOf('day').toDate();
console.log(output);さっそくコンソールログで確認してみましょう。
> Mon Jan 25 2016 23:59:59 GMT+0900 (JST)これで、23時59分59秒の時刻を取得できます。うん、便利。
1日の終わりにCookieを仕込む
Cookieを実装するには、jQueryプラグインの「jquery.cookie.js」が便利です。
jQueryとjquery.cookie.jsを読み込む
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>Cookieを設定する
var expiration = moment().endOf('day').toDate();
$.cookie('the_key_of_cookie', 'the_value_of_cookie', {expires: expiration});このように、1日の終わり（23時59分59秒）が有効期限のCookieも簡単に実装することができます！ これは本当に便利！！
終わりに
最近はいろいろと便利なライブラリがあって、すばらしいですね。なんとかJavaScriptとも仲良くなれそうです。ディレクターでもデザイナーでも、簡単なコードは書けるようになった方が良いな～と思った1日の終わり。
そう思っている隣で、エンジニアのほりでーは今まさにJavaScriptをガリガリ書いています。いいね、クールだ。エンジニアはそうでなくっちゃ！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
