みんなが簡単簡単書いているので、React + JavaScript + FullCalendar を触ってみた

## Glideでカレンダー形式の予約アプリを作ったら紙以下と言われた

詳しくは書きませんが、 **会社の会議室予約管理を紙でやっていて**、テレワークの促進とともにに紙の弊害が目立ち始めたので、[Glide](https://www.glideapps.com/)でサクッとアプリ化してみました
**見出しの通りで激おこなので、フルスクラッチで作ることに決めました。**

![download.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/ba0406c6-ce3e-a772-ae61-c11c600a2551.jpeg)
>画像は紙以下で検索して出てきたイメージ画像です。

React + FullCalendarというありきたりなライブラリではありますが、

* 既存の記事が```TypeScript```向けのものが多かった
* 本当の初心者はどこにソースを追加すれば良いのかわからない
* 忘備録

以上の理由で記事を執筆します。
Reactを触ったことがなくても~~参考記事の皆さんのおかげで~~実装までは辿り着けるように書いてみたつもりなので、是非とも手を動かしてみてください。
**エラー出たら教えていただけると嬉しいです。**

## React.js + JavaScriptでの開発に決定

今回は```React.js```での開発に決定しました。
私自身は小売業で働く一従業員であり、扱えるライブラリやフレームワークがそこまであるわけではないので、選択肢は多くありません。その狭い選択肢の中でもReactを選んだ理由は以下の通りです。

* 会社の社内ポータルサイトがReactで書かれており、**動作が軽快で使い勝手が良かった**
* よく聞くので、単純に興味があった
* 名前がかっこいいい

その他の選択肢としては```Python```の```Django```, ```Flask```もありましたが、Reactの方が名前がかっこいいと感じて採用しました。

## 実行環境

>Node.js version 18.1.0
>npm version 8.8.0
><details><summary>React周り</summary>
>
>  "react": "^18.1.0",
>  "react-admin": "^4.1.2",
>  "react-dom": "^18.1.0",
>  "react-scripts": "5.0.1",
>  "web-vitals": "^2.1.4"</details>
><details><summary>FullCalendar周り</summary>
>
>   "@fullcalendar/core": "^5.11.0",
>   "@fullcalendar/daygrid": "^5.11.0",
>   "@fullcalendar/list": "^5.11.0",
>   "@fullcalendar/react": "^5.11.1",
>   "@fullcalendar/timegrid": "^5.11.0",</details>

## React環境構築

[参考記事](https://qiita.com/watanabe-tsubasa/items/12892b4711bf1526051e#%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B)のところにある環境構築を参照ください。

```
$ cd react_app
$ npm start
```

:::note info
私はnpm使ったので```npm start``` ですが、yarn使った方は```yarn start```で実行してください
:::

実行してReactのロゴが回っていれば大丈夫です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/b3927801-6914-4b44-d801-e5a880dfaae1.png" width=75%>

## カレンダーアプリをFullCalendarで動かす
Reactを環境構築すると、画像のようなファイル構成になるかと思います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/2bbb29ce-3ac5-637f-9ce9-6bfbc511024f.png" width=75%>

:::note warn
```CalendarData.jsx```はこの後追加します
:::

### ライブラリ```FullCalendar```のインストール
```
$ npm install --save @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list
```
ターミナルで実行してください。

### ソースコードの追加

src フォルダの下にフォルダ名を```CalendarData.jsx```として以下のソースのファイルを作成してください

```jsx:CalendarData.jsx
import React, { useCallback, useState, useEffect } from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import jaLocale from "@fullcalendar/core/locales/ja"
import './App.css';

const CalendarData = (props) => {
  return (
    <FullCalendar
      plugins={[dayGridPlugin, timeGridPlugin, listPlugin]}
      initialView="timeGridWeek"
      locales={[jaLocale]}  //todayとかも日本語化される
      locale="ja" // 日本語化
      headerToolbar={{
          left: 'prev,next today',
          center: 'title', 
          right: 'dayGridMonth,timeGridWeek listWeek',
      }}
      events={[
        { title: "event 1", start: "2022-07-01" },
        // endに指定した日付は含まないので注意
        { title: "event 2", start: "2022-07-03", end: "2022-07-05" },
        {
          title: "event 3",
          start: "2022-07-07T10:00:00",
          end: "2022-07-07T13:00:00" // 時間を指定するときはISO 8601の形式で。
        },
      ]}
    />
  );
};
export default CalendarData;

```

### index.jsの書き換え

Reactの環境構築をした際にできているかと思われる```index.js```を以下のように書き換えます

```diff_jsx:index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
- import App from './App';
import reportWebVitals from './reportWebVitals';
+ import CalendarData from './CalendarData';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
-    <App />
+    <CalendarData/>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

```

:::note info
環境構築をしたときは```index.js```になっているので、このタイミンングで拡張子```jsx```にしておくことが望ましいです。
:::

### 実行
```
$ npm start
```

https://twitter.com/shuyin02/status/1547927168629751809

ひとまずローカルで動くところまで行けます。

## 驚いた

確かに簡単でした。

## 続き

https://qiita.com/watanabe-tsubasa/items/366352469913ad09cfc7

## 参考記事

* 環境構築

https://zenn.dev/web_tips/articles/abad1a544f3643

* FullCalendarが簡単と仰る方①

https://qiita.com/FumioNonaka/items/1810f7e211638988af62

* FullCalendarが簡単と仰る方②

https://qiita.com/cokemaniaIIDX/items/32676eacf4d6f5413d81

* FullCalendarが簡単と仰る方③

https://maasaablog.com/development/react/1126/