はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

javascriptの日付処理ライブラリである、Day.jsをVue3で使用する方法についてまとめたいと思います。

Day.jsの導入経緯

JavaScriptは日付処理がややこしい。

Javascriptは、日付処理がややこしいです。年月日の表示を以下のように、わざわざオブジェクト指向チックに扱わなければいけません。

const now = new Date()
const year = now.getFullYear()
const month = now.getMonth() + 1
const day = now.getDate()
console.log(`${year}年${month}月${day}日`)
// 2021年9月29日 と出力

PHPだったら、日付表示は以下のように簡単に表示できるのにね。

<?php
echo date("Y年m月d日") ;

JavaScriptで簡単に日付処理を扱えるライブラリないのか探すことにしました。

momentは既に死んでいる

Javascriptの日付処理ライブラリで人気のものはmoment.jsだと思います。

githubでスターが4万件もついている人気のライブラリです。

しかし、moment.jsの公式を見ると、メンテナンスモードのレガシープロジェクトであり、もう機能の追加などはしないようです。

フロントエンド界隈の進化は早いので、もう開発しないのであれば、moment.jsの使用はためらいます。

Day.js、君に決めた

moment.jsの代替ライブラリは何がいいのでしょうか？

候補として、Luxon,Day.js,date-fns,js-jodaが挙げられていますが、私はDay.jsを採用することにしました。

理由としては、日付フォーマットの仕方がPHPに似ており、シンプルに使えそうだからです。

PHPerでフロントエンドも開発する方に、Day.jsは向いてるかもしれません。

また、他の日付ライブラリと比較して軽量ライブラリであるというのも非常に強みです。

Vue.js(Vue3)でのDay.js使用方法

Day.jsのインストール

npmでのインストール方法です

npm install dayjs --save

Day.jsをvue.jsへ読ませる方法(inject/provide使用)

vue.jsをマウントする処理にて、以下のようにprovideへ設定してあげると、便利に使えます。

app.config.globalPropertiesへ渡して使う方法もあるのですが、それはdayjsの呼び出し方が少し手間になるので、provide/injectで考えたほうがベターだと思います。

main.js

import {createApp} from 'vue'
import App from './App.vue'
// dayjsのインポート
import dayjs from 'dayjs'
// ロケールのインポート
import 'dayjs/locale/ja'

// ロケール設定
dayjs.locale('ja')

const app = createApp({
    components: {
        App
    },
})
// dayjsをprovideに設定する
app.provide('dayjs', dayjs)
app.mount('#app')

App.vue

<script setup>
import {inject} from 'vue'
// injectからdayjsを呼び出す
const dayjs = inject('dayjs')
console.log(dayjs().format('YYYY年M月DD日'))
</script>

<template>
今日は{{dayjs().format('YYYY年M月DD日')}}です。
</template>

Day.jsをvue.jsへ読ませる方法(globalProperties使用)

なお、globalPropertiesに設定した場合は以下のようになります。

VueのインスタンスのglobalPropertiesにdayjsを設定します。

ただし、globalPropertiesに定義する場合、コンポーネントのscript内部では、getCurrentInstanceからdayjsを呼び出して使用しないといけません。少し面倒ですね。

しかし一方で、メリットも存在し、コンポーネントでdayjsの関数を定義しなくてもtemplate側でdayjsが使用できるメリットも存在します。

結局は、inject/provide方式のほうがシンプルで良い気がします。

main.js

import {createApp} from 'vue'
import App from './App.vue'
// dayjsのインポート
import dayjs from 'dayjs'
// ロケールのインポート
import 'dayjs/locale/ja'

// ロケール設定
dayjs.locale('ja')

const app = createApp({
    components: {
        App
    },
})
// dayjsをglobalPropertiesに設定する
app.config.globalProperties.dayjs = dayjs
app.mount('#app')

App.vue

<script setup>
import {getCurrentInstance} from 'vue'
const app = getCurrentInstance()
// dayjsをglobalPropertiesから取得
const dayjs = app.appContext.config.globalProperties.dayjs

console.log(dayjs().format('YYYY年M月DD日'))
</script>

<template>
<!--この関数は、script側で定義しなくても動作します-->
今日は{{dayjs().format('YYYY年M月DD日')}}です。
</template>

Day.jsプラグインの読ませ方

day.jsにはプラグインが存在します。
日付が特定日より前かどうかなど、便利関数がプラグインとして定義されています。

それらプラグインの読み込ませ方は、以下のように、dayjsをインポートした後、extendsして設定します。

main.js

import {createApp} from 'vue'
import App from './App.vue'
// dayjsのインポート
import dayjs from 'dayjs'
// ロケールのインポート
import 'dayjs/locale/ja'

// ロケール設定
dayjs.locale('ja')
// ↓使用するプラグインを追加
dayjs.extend(require('dayjs/plugin/isBetween'))
dayjs.extend(require('dayjs/plugin/isSameOrAfter'))
dayjs.extend(require('dayjs/plugin/isSameOrBefore'))

const app = createApp({
    components: {
        App
    },
})
// dayjsをprovideに設定する
app.provide('dayjs', dayjs)
app.mount('#app')

以下のように、プラグインを使用することができます

import {inject} from 'vue'
const dayjs = inject('dayjs')

// 2021年10月1日は、2021年9月15日と2021年11月1日の間にあるかどうかtrue/falseで返却される
console.log(dayjs('2021-10-01').isBetween('2021-09-15', '2021-11-01')) // true

// 2021年10月1日は、2021年10月11日より後なのかtrue/falseで返却される
console.log(dayjs('2021-10-01').isSameOrAfter('2021-10-11'))　// false

// 2021年10月1日は、2021年10月11日より前なのかtrue/falseで返却される
console.log(dayjs('2021-10-01').isSameOrBefore('2021-10-13'))　// true

まとめ

いかがでしたでしょうか。JavaScriptの日付操作ライブラリである、Day.jsをVue.jsで使用する方法についてまとめました。皆様の開発のお役に立てたら光栄です。ありがとうございました。

プログラマーノート

プログラマーの学習や雑記のメモです

【Vue.js】Vue.js(Vue3)でDay.jsを使う