こんにちは、自意識過剰な正義のヒーローでお馴染みの株式会社SCOUTERの石岡 将明( @masaakikunsan )です。
皆さんは、 JavaScript の日付時刻操作をどうやっていますか?
僕は、 JavaScript の Date は罠が多くそのまま使うことをあまり好まず、今までは日付時刻の操作を行うとなれば黙って moment.js をぶっこんでいました。
フロント界隈でも少し前までは、男は黙って moment.js !って流れがありましたが、最近だと dayjs が主流になりつつあります。 今回はその dayjs について書いていきます。
そもそも
JavaScript の Date はいろいろしんどいんですが、個人的にサービス開発においてブラウザの対応をいちいちするのがだるいなと思っています。 そこで前述の通り、これまでは moment.js をぶっこんでいたのですが、 moment.js はファイルサイズが大きく、バンドルサイズが肥大化するというデメリットがありました。
ですがある日、Twitter を見ていたら dayjs と出会い心を奪われてしまい今後は黙って dayjs やなとなりました。
dayjs について
Day.js は日付と時刻をパース・検証・操作・表示する最小のモダンブラウザ向け JavaScript ライブラリであり、 Moment.js の API との広い互換性を持ちます。 Moment.js を使ったことがあればすぐにでも Day.js を使い始めることができます。
上記はドキュメントの引用なのですが、この通り、dayjs は moment.js を使えれば直ぐ使えるという魅了があります。 そして、 moment.js でのデメリットであったファイルサイズが大きいという問題を day.js では解決してくれています。
つまり、moment.js のような使用感でファイルサイズがめちゃくちゃ小さくなった最強ライブラリといった感じです。 (これまで moment.js を使って人にとっての話)
使い方
ここでは、みなさんの大好きな Nuxt に day.js をぶっこんで sampleを書いていきます
最初に dayjs をいれていきましょう。
$ yarn add dayjs
次にpluginsを定義していきます。
plugins/dayjs.js
import 'dayjs/locale/ja' import dayjs from 'dayjs' import Vue from 'vue' dayjs.locale('ja') Vue.prototype.$dayjs = dayjs
あとは、nuxt.config.js に下記を追記でglobalでdayjsが使えるようになります。
plugins: ['@/plugins/dayjs']
それでは、さっそくdayjsで今日の日付が正しく表示されるかみてましょう。 index.vue を書き換えて日付を表示してみます。
<template> <section class="container"> <div> <logo /> <h1 class="title"> nuxt-dayjs-sample </h1> <p>現在の時刻: {{ now }}</p> </div> </section> </template> <script> import Logo from '~/components/Logo.vue' export default { components: { Logo }, data: () => ({ now: null }), mounted() { this.now = this.$dayjs().format('YYYY年MM月DD日 HH:mm:ss') } } </script>
今日の日付の表示ができました。 あとは、やりたいことをドキュメントを見ながら実装していくだけです。
ファイルサイズ
※ moment との比較はちょっと用意できなかったので使ってる人は自分で確認してみてください。
さいごに
dayjs は、moment.js をこれまで使っていた人にとっては最高のライブラリです。 moment と書き方が基本的に変わらず、ファイルサイズがめちゃくちゃ小さいので使わない理由がほぼないです。
これまで moment を使ってみた人は移行コストも学習コストもほぼないので乗り換えてみてはいかがでしょうか?
現在、back check チームでは、エンジニアの募集をしております。 僕と一緒にフロントエンドを朝まで語り尽くしたいフロントエンドエンジニアやレベルの高いフロントエンドチームと最高のプロダクトを作って行きたいサーバーサイドエンジニアは是非ご応募お願いいたいします!