【Nuxt.js】開発ブログ：カレンダーを作成してみる②

前置き

【Nuxt.js】開発ブログ：カレンダーを作成してみる①

前回の続きです。
カレンダーの作成をしたい📆
前回は必要な情報が何か、
探すのでいっぱいでした😵💦
ということで、
情報の整理からしていきます❗️🧹

続きをやる前に
今一度やり方を見直し、
実装できそうなものから
手をつける方向にしています🌟

前回同様、
思い立ってやってみる系の
日記みたいなものです✍️

dayjsの使い方とよく使うTips
とりあえずdayjsを使う際には
ここを見ながらやる予定です🌱👀

パターンの見直し

まずは前回の情報の見直し💫
どれかで実装したい🎈🧸
自分のやりやすそうな順番で整理📦

①【JS】dayjsライブラリを用いて、指定した期間の日付を全て取得したいが

dayjsでやるなら
カレンダーにしたい期間の差分を出して
それを配列にしてforすればいけそう、
ということらしい。
ただ回答だとDateでやっているので
やるべきことを見ながらチャレンジ🔥

②JavaScriptでdayjsを使ってカレンダーを作成

<div class="c-calendar-container"></div>
このclassを見て
別のpluginを使用しているのかと
勘違いしていました、、、
他のpluginは使用したくないな〜
とか思っていた💥

単純にdocument.querySelectorで
指定できるようにしていただけですね💡

③dayjs/plugin/calendarを使用する

これはググったけど
使っている記事を全然みかけなかったので、
今回は使用しない方向でいきたい…
やるとしても入れ方が不明、
Plugin
@nuxtjs/dayjsを使用することになりそう。

パターン①

質問者のコードをチェック

【JS】dayjsライブラリを用いて、指定した期間の日付を全て取得したいが

現在日時の前後1ヶ月を出す

私は前後1ヶ月にしたかったので
質問者とは違う日時になります💡

2021-05-12_11:03
2021-07-12_11:03

前回は差分を出さずに
日時のオブジェクトなので
単純に日付だけを出せない❗️
ということで終了してしまいましたが、
よくよく見るとできそう👀笑
(ただのせっかち🏃‍♀️💥)

<template>
  <div class="calendar">
    <p>{{ beforeMonth }}</p>
    <p>{{ afterMonth }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      now: this.$dayjs().locale('ja'),
    }
  },
  computed: {
    beforeMonth() {
      return this.now.subtract(1, 'month').format('YYYY-MM-DD_HH:mm')
    },
    afterMonth() {
      return this.now.add(1, 'month').format('YYYY-MM-DD_HH:mm')
    },
  },
}
</script>

<p>{{ beforeMonth }}</p>

<p>{{ afterMonth }}</p>

</div>

</template>

export default {

data() {

return {

now: this.$dayjs().locale('ja'),

}

computed: {

beforeMonth() {

return this.now.subtract(1, 'month').format('YYYY-MM-DD_HH:mm')

afterMonth() {

return this.now.add(1, 'month').format('YYYY-MM-DD_HH:mm')

}

</script>

差分を出す

diffではformatが使用できない、
する必要もないので
ここでは外します。
Difference

当然ですが、
5/12, 5/13のように期間ではなく
単純な差分なので61と出ます。

<template>
  <div class="calendar">
    <p>{{ totalNumber }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      now: this.$dayjs().locale('ja'),
    }
  },
  computed: {
    totalNumber() {
      const beforeMonth = this.now.subtract(1, 'month')
      const afterMonth = this.now.add(1, 'month')
      return afterMonth.diff(beforeMonth, 'day')
    },
  },
}
</script>

<p>{{ totalNumber }}</p>

</div>

</template>

export default {

data() {

return {

now: this.$dayjs().locale('ja'),

}

computed: {

totalNumber() {

const beforeMonth = this.now.subtract(1, 'month')

const afterMonth = this.now.add(1, 'month')

return afterMonth.diff(beforeMonth, 'day')

}

</script>

繰り返す

ではその61日分を
1つずつ繰り返しながら
beforeMonthに
足していけば良いということですね💡
{ "0": "2021/05/12", "1": "2021/05/13", … }
となりました。

<template>
  <div class="calendar">
    <p>{{ totalNumber }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      now: this.$dayjs().locale('ja'),
    }
  },
  computed: {
    totalNumber() {
      const beforeMonth = this.now.subtract(1, 'month')
      const afterMonth = this.now.add(1, 'month')
      const totalNumber = afterMonth.diff(beforeMonth, 'day')
      const totalObject = new Object()
      for (let i = 0; i < totalNumber; i++) {
        totalObject[i] = beforeMonth.add(i, 'day')
        totalObject[i] = totalObject[i].format('YYYY/MM/DD')
        console.log(totalObject[i])
      }
      return totalObject
    },
  },
}
</script>

<p>{{ totalNumber }}</p>

</div>

</template>

export default {

data() {

return {

now: this.$dayjs().locale('ja'),

}

computed: {

totalNumber() {

const beforeMonth = this.now.subtract(1, 'month')

const afterMonth = this.now.add(1, 'month')

const totalNumber = afterMonth.diff(beforeMonth, 'day')

const totalObject = new Object()

for (let i = 0; i < totalNumber; i++) {

totalObject[i] = beforeMonth.add(i, 'day')

totalObject[i] = totalObject[i].format('YYYY/MM/DD')

console.log(totalObject[i])

}

return totalObject

}

</script>

オブジェクトにすると
プロパティの配列番号が邪魔で
扱いにくそうなので、
ひとまず形を変えてみます。
[ "2021/05/12_14:00", "2021/05/13_14:00", … ]

<template>
  <div class="calendar">
    <p>{{ totalNumber }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      now: this.$dayjs().locale('ja'),
    }
  },
  computed: {
    totalNumber() {
      const beforeMonth = this.now.subtract(1, 'month')
      const afterMonth = this.now.add(1, 'month').format('YYYY/MM/DD_HH:mm')
      const totalNumber = afterMonth.diff(beforeMonth, 'day')
      const array = []
      for (let i = 0; i < totalNumber; i++) {
        const num = beforeMonth.add(i, 'day')
        array.push(num)
      }
      return array
    },
  },
}
</script>

<p>{{ totalNumber }}</p>

</div>

</template>

export default {

data() {

return {

now: this.$dayjs().locale('ja'),

}

computed: {

totalNumber() {

const beforeMonth = this.now.subtract(1, 'month')

const afterMonth = this.now.add(1, 'month').format('YYYY/MM/DD_HH:mm')

const totalNumber = afterMonth.diff(beforeMonth, 'day')

const array = []

for (let i = 0; i < totalNumber; i++) {

const num = beforeMonth.add(i, 'day')

array.push(num)

}

return array

}

</script>

これで指定期間分の日時は表示できたものの、
カレンダーにするとなると
月日をformatで
管理しないといけないですね🤔💭
何か良い方法はないのか。。。

ベストアンサーのコードをチェック

ということで、
ベストアンサーのコードも見て
きちんと意味を理解しておきます🎓
dayjsに置き換えてできるのであれば
そちらを進めますが、
NGなら素直にパターン②に移ります。

var d=new Date();
var start=d.setMonth(d.getMonth()-1);
var end=d.setMonth(d.getMonth()+2);
var count=(end-start)/1000/60/60/24+1;
var dd=Array(count).fill(null).map((x,y)=>(
  z=new Date(start+y*60*60*24*1000),
  Object.fromEntries(
    [
    ["date",z.toLocaleString().split(" ").splice(0)[0]],
    ["week","日月火水木金土".split("")[z.getDay()]],
    ])
  ));
console.log(dd);

var d=new Date();

var start=d.setMonth(d.getMonth()-1);

var end=d.setMonth(d.getMonth()+2);

var count=(end-start)/1000/60/60/24+1;

var dd=Array(count).fill(null).map((x,y)=>(

z=new Date(start+y*60*60*24*1000),

Object.fromEntries(

[

["date",z.toLocaleString().split(" ").splice(0)[0]],

["week","日月火水木金土".split("")[z.getDay()]],

])

));

console.log(dd);

⬇️このあたりは
　前回の記事にあるため
　そちらをご覧ください👀
　new Date()
　getMonth()
　setMonth()
【Nuxt.js】開発ブログ：カレンダーを作成してみる①

読み解く

開始と終わりの差分を出すために
setMonthでミリ秒にする必要があり、
ミリ秒なので1000/60/60/24します。
こちらをみた方が早いですね🍀
1日86400000ミリ秒で割れば
日数が分かります💫
どうしてミリ秒を1000×60×60×24で割ったら日にちがでてくるのですか？
時間を秒にした一覧表

現在は6月なので、
const d = new Date()
これでSat Jun 12 2021
d.getMonth()で5が出て-1して4月
d.getMonth()で5が出て+2して7月
その差分を出して日付に変換すると61
+1すると62ですが理由が不明なので
一旦とばします✈️

あれ…❓
そもそも🔼で
質問者のコードを真似しながら
私は前後1ヶ月の
5月〜7月の差分を出して61でした。
ベストアンサーでは
4月〜7月の差分なのに
なぜ同じ61日分と出るのか…❓❓❓

この後のmap()などで
調整するのかもしれません。

そしてcountをArray()し、
fill()してmap()にします。

fill()

構文はarr.fill(value[, start[, end]])
この場合は
valueが0でstartが2, endが4なので
開始する2の後ろの
3, 4が0になるということですね👇
const array1 = [1, 2, 3, 4]; console.log(array1.fill(0, 2, 4)); ⇨[1, 2, 0, 0]

引数が1つの場合は全てに反映されます。
const array1 = [1, 2, 3, 4]; console.log(array1.fill(6)); ⇨[6, 6, 6, 6]

今回の場合はnullなので、
中身全部nullになりますね。

map()

構文はこちら
let new_array = arr.map(function callback( currentValue[, index[, array]]) { // 新しい配列の要素を返す }[, thisArg])

この例だと配列の中身をxとし
xに2を掛けて出すということですね

const array1 = [1, 4, 9, 16]; const map1 = array1.map(x => x * 2); ⇨Array [2, 8, 18, 32]

ここまでは良いのですが、
zが見当たらないとなってしまいました。
ReferenceError: z is not defined

ということで、
そこは置いておき、
わかるとこだけ抜き出して
dayjsに置き換えを試みる予定です🍀

まとめ

日時の操作は複雑で、
理解に時間がかかりそうです⏰笑
1度全体像を把握すれば
そのあとはスムーズにいけそうですが❗️