1
0

JavaScript: カレンダーアプリで今月に記述されている「先月の最終週」と「翌月の最初の週」を取得する方法

Posted at

読んで欲しい人

  • カレンダーアプリで下記の部分を取得する方法がわからん人
    image.png

    • 1.先月から今月に、はみ出てきてる奴ら:28, 29, 30, 31
    • 2.翌月から今月に、はみ出てきてる奴ら:1, 2, 3, 4, 5, 6, 7
  • dotインストールの問題を自力で解こうと頑張ってた過去の俺

ソースコード

1.先月から今月に、はみ出てきてる奴ら:28, 29, 30, 31

  const getCalendarHead = () => {
  
    const dates = []
    const d = new Date('現在の年', '現在の月', 0).getDate()
    const n = new Date(currentYear, currentMonth, 1).getDay()

    for (let i = 0; i < n; i++) {
      dates.push(d - i)
    }

    return dates
  }

考え方

  • 先月の最終日を d として定義する。
  • 今月の1日の曜日を n として定義する。

イメージ

28 29 30 31 1 2 3
Sun Mon Tue Wed Thu Fri Sat
d
0 1 3 4 5(n)
  • 先月の d(最終日)からn(曜日分)分のループを回して1ずつ引いていく

解説

  • new Date('現在の年', '現在の月', 0).getDate()

    • new Dateの日数の引数に0を指定して、getDate()をすると先月の末日を返してくれる
    • イメージ:2024/08/00 = 2024/07/31 だよね
  • new Date(currentYear, currentMonth, 1).getDay()で曜日を取得する

    • jsでは、曜日は0-6の数値で取得されます
    • 0が日曜日、2が火曜日といった具合

2.翌月から今月に、はみ出てきてる奴ら:1, 2, 3, 4, 5, 6, 7

  const getCalendarFoot = () => {
  
    const dates = []
    const n = new Date('現在の年', '現在の月' + 1, 0).getDay()

    for (let i = 1; i < 7 - n; i++) {
      dates.push(i)
    }

    return dates
  }

考え方

  • 翌月は逆に数字を足していくことで求められる
  • 最終日の曜日から土曜日までループを回して、日数を取得する
28 29 30 31 1 2 3
Sun Mon Tue Wed Thu Fri Sat
n 1 2 3

解説

  • new Date('現在の年', '現在の月' + 1, 0).getDay()で今月の最終日の曜日を取得してnに定義する

以上

感想、考えたこと

  • ロジックを考えるのが苦手なので精進します

  • ロジックを考える上で意識したほうがいいのかな?と思ったこと

    1. 求めたい内容(表示したい、取得したい etc)を定義する
    2. 何があれば1が実現できるのか、考える
    3. 2を実行する
    4. 3の結果を元に検証して2に戻る
  • Atcodeとかやったほうがいいのか

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0