day.jsを✅ - subaru-hello’s blog

カレンダーの日付と過去に作成した酒ケジュールデータの日付を結びつけることに苦戦中の23期中野昴です。

今日は、day.jsについて学習していきたいと思います。

day.jsとは

moment.jsに置き換わるAPI 年月日時間をフォーマットしてくれるライブラリ

https://day.js.org/

javascriptのビルトインオブジェクトであるDateオブジェクトは、日付のフォーマットに限界がある。そんな時に役に立つのが外部ライブラリであるday.js

どんな時に使うのか

日付を見やすい形にフォーマットしたい時

created_atやupdate_atなどのtimestampは、そのままの状態だと下記のように読みづらくなってしまう。

dayjs().の後にフォーマットしたいtimestampを入れて使用する。

dayjs().year() // 年
dayjs().month() // 月 (0~11)
dayjs().date() // 日
dayjs().day() // 曜日 0(日曜日)~6(土曜日)
dayjs().format('YYYY/MM/DD') // フォーマットして表示

実際に使用してみる

Vueのテンプレートに適用させたい場合。

まずyarnもしくはnpmを使い、day.jsをインストールする。

$yarn add dayjs

次に、pluginsにdayjsのインポート情報を書き込む。

javascript/plugins/dayjs.js

import dayjs from 'dayjs';
import 'dayjs/locale/ja';
dayjs.locale('ja');

export default {
  methods: {
    $dateFormat(date) {
      return dayjs(date).format('YYYY年M月D日(dd)');
    },
  },
};

そしてmain.jsに書き込む。

javascript/packs/hello_vue.js

import Vue from 'vue';
import App from '../App';

import dayjs from '../plugins/dayjs';
Vue.mixin(dayjs);

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: (h) => h(App),
  }).$mount();

  document.body.appendChild(app.$el);

  console.log(app);
});

使いたいコンポーネントに先程定義した$dateFormatを呼び出す。

<script>
export default{
methods:{
date(date) {
      return this.$dateFormat(date);
    },
}
}
</script>

適宜フォーマットしたい箇所を先程定義したdateで囲む。

<template>
							<v-col
                    cols="12"
                    v-for="(specificData, index) in data"
                    :key="index"
                    class="d-flex justify-space-between mb-6"
                  >
                  
                    <div>
                      <v-card class="text-center mx-auto my-5 form" elevation="2" shaped id="form">
                       {{ date(specificData.created_at) }}
                        <v-card-title style="width: 100%" class="headline justify-center">
                          {{ specificData.name }}
                        </v-card-title>
                        <v-row justify="center">
                          <img :src="beerSrc" width="150" height="100" />
                          <v-row justify="center" align-content="center">
                            <p>度数: {{ specificData.alcohol_percentage }}%</p>
                            <p>量: {{ specificData.alcohol_amount }} ml</p>
                          </v-row>
                        </v-row>
                      </v-card>
                    </div>
                  </v-col>
                </v-col>
</template>

specificData.created_atをdateで囲んでいる。

{{ date(specificData.created_at) }}

date(date)の仮引数の場所にspecificData.created_atという引数が入り、('YYYY年M月D日(dd)の形にフォーマットされていることがわかる。

 $dateFormat(date) {
      return dayjs(date).format('YYYY年M月D日(dd)');
    },

mixinとは

ミックスイン (mixin) は、Vue コンポーネントに再利用可能な機能を提供します。ミックスインオブジェクトは任意のコンポーネントオプションを含むことができます。コンポーネントがミックスインを使用するとき、ミックスインの全てのオプションはコンポーネント自身のオプションに"混ぜられ"ます。

Vue.mixin(day.js)のように記述すると、Vueで作成されるインスタンス全てに影響が出てしまうため注意が必要。

後書き

ちょっとほんとに間に合わない気がしてきた、、優先順位しっかりつけないとな、、

Issues · subaru-hello/Zeroken