# 1ヶ月カレンダーの作成1 次に、ログイン後に1ヶ月カレンダーを表示するようにします。 `feature/calendar-page`にて作業します。 ```bash git switch -c feature/calendar-page ``` 1ヶ月カレンダーを作るために、`date-fns`というライブラリをインストールしましょう。 `date-fns`はDateオブジェクトを扱う上で便利なメソッドが一通り揃っているため、こちらを利用します。 ```bash npm i date-fns ``` まず、今月の月を表示するようにしましょう。`date-fns`の`getMonth`という関数を利用することで、引数に渡したDateオブジェクトの月を取得することができます。注意点として、-1された値が返却される(1月の場合は0、12月の場合は11）ので、`+1`をして表示しましょう。

import { getMonth } from "date-fns";

export const CalendarPage = () => {
  const today = new Date()

  return (
    <>
      <h1 className=" font-bold text-3xl mb-5">
        {`${(getMonth(today)) + 1}月`}
      </h1>
    </>
  );
}

次に1ヶ月カレンダー上部の曜日の部分を表示します。そのため曜日の配列を定義します。 `src`配下に`constants`ディレクトリを作成し、その中に`calendar.ts`を作成します。その中に以下のような定数を定義します。

export const DAYS_LIST = ["日", "月", "火", "水", "木", "金", "土"]

こちらをmapにて表示しましょう。1ヶ月カレンダーはtableタグを使用して表示するようにしましょう。

import { getMonth } from "date-fns";
import { DAYS_LIST } from "../../constants/calendar";

export const CalendarPage = () => {
  const today = new Date()

  return (
    <>
      <h1 className=" font-bold text-3xl mb-5">{`${getMonth(today) + 1}月`}</h1>
      <table className="w-[80%] border-collapse border-2 border-solid border-lime-800 table-fixed">
        <thead>
          <tr className="bg-lime-800 text-white rounded-tl-lg rounded-tr-lg py-10">
            {DAYS_LIST.map((day) => (
              <th key={day} className="text-center text-xl py-3">
                {day}
              </th>
            ))}
          </tr>
        </thead>
      </table>
    </>
  );
}

次に日付部分を表示します。日付部分の表示に関しては、 ``` [ [1, 2, 3, 4], [5, 6, 7, 8, 9, 10, 11], [12, 13, 14, 15, 16, 17, 18], [19, 20, 21, 22, 23, 24, 25], [26, 27, 28, 29, 30, 31], ] ``` のような二次元配列を作り、この配列をmapで回すようにします。（実際は、数字のところにDateオブジェクトを入れます。）ですので、以下のようなstateを定義します。

import { getMonth } from "date-fns";
import { DAYS_LIST } from "../../constants/calendar";
import { useState } from "react";

export const CalendarPage = () => {
  const today = new Date()
  const [dateList, setDateList] = useState<Date[][]>([]);
...

そして`dateList`に`useEffect`にて二次元配列を格納します。まず、`eachWeekOfInterval`という関数に`start`と`end`を渡すと、その期間が含まれる週の始めの日(日曜日)を配列で返します。例えば`start`に`2024-04-01`のDateオブジェクトを渡し、`end`に`2024-04-30`のDateオブジェクトを渡した場合に、 ``` [ 2024-03-31, 2024-04-07, 2024-04-14, 2024-04-21, 2024-04-28, ] ``` のような配列を返却します。

また、`startOfMonth`、`endOfMonth`という関数を利用することで、引数に与えられた日の月初の日と、月終わりの日を取得することができます。 (例えば`startOfMonth(2024-04-14)`と呼び出せば、`2024-04-01`のDateオブジェクトを取得可能。）この`eachWeekOfInterval`,`startOfMonth`,`endOfMonth`を利用することで、表示したい1ヶ月カレンダーの各週初日の日付の配列を作成することができます。

import { eachWeekOfInterval, endOfMonth, getMonth, startOfMonth } from "date-fns";
import { DAYS_LIST } from "../../constants/calendar";
import { useEffect, useState } from "react";

export const CalendarPage = () => {
  const today = new Date()
  const [dateList, setDateList] = useState<Date[][]>([]);

  useEffect(() => {
      const monthOfSundayList = eachWeekOfInterval({
        start: startOfMonth(today),
        end: endOfMonth(today),
      });
  }, [])

次に、`eachDayOfInterval`という関数にて`start`と`end`を渡すとその期間の1日ごとのDateオブジェクトの配列を取得することができるので、`map`にて先ほどの各週初日の日付の配列を回し、`start`に各週初日の日付を渡し、`end`には`endOfWeek`を使用することで、引数に与えられた日付の週の最終日を取得することができるので、そちらを渡すことで、1週間の配列を作り、最終的に1ヶ月の二次元配列を作成することができます。こちらのnewDateListをsetDateListにて格納しましょう。

import { eachDayOfInterval, eachWeekOfInterval, endOfMonth, endOfWeek, getMonth, startOfMonth } from "date-fns";
import { DAYS_LIST } from "../../constants/calendar";
import { useEffect, useState } from "react";

export const CalendarPage = () => {
  const today = new Date()
  const [dateList, setDateList] = useState<Date[][]>([]);

  useEffect(() => {
    const monthOfSundayList = eachWeekOfInterval({
      start: startOfMonth(today),
      end: endOfMonth(today),
    })
    const newDateList: Date[][] = monthOfSundayList.map((date) => {
      return eachDayOfInterval({
        start: date,
        end: endOfWeek(date),
      })
    })
    setDateList(newDateList)
  }, [])
  ...

では、こちらの`dateList`をmapにて表示しましょう。二次元配列なので、map内にてさらにmapで回す必要があります。また日付は`getDate`という関数で取得することができます。

...
  return (
    <>
      <h1 className=" font-bold text-3xl mb-5">{`${getMonth(today) + 1}月`}</h1>
      <table className="w-[80%] border-collapse border-2 border-solid border-lime-800 table-fixed">
        <thead>
          <tr className="bg-lime-800 text-white rounded-tl-lg rounded-tr-lg py-10">
            {DAYS_LIST.map((day) => (
              <th key={day} className="text-center text-xl py-3">
                {day}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {dateList.map((oneWeek) => (
            <tr key={`week-${getDate(oneWeek[0])}`} className="mx-10">
              {oneWeek.map((item) => (
                <td
                  key={`day-${getDate(item)}`}
                  className="bg-white h-[10vh] border-2 border-solid border-lime-800"
                >
                  <span className="inline-block w-[20px] leading-[20px] text-center">
                    {getDate(item)}
                  </span>
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
...

これで、以下のような1ヶ月カレンダーが表示されるかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: date-fnsを導入し、1ヶ月カレンダーを作成 ``` としましょう。