開発ブログ

【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

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

差分を出す

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

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

繰り返す

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

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

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


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

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

⬇️このあたりは
 前回の記事にあるため
 そちらをご覧ください👀
 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()などで
調整するのかもしれません。

そしてcountArray()し、
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度全体像を把握すれば
そのあとはスムーズにいけそうですが❗️


-開発ブログ
-,

© 2021 aLiz Nuxt