教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
このアプリケーションでの設計を説明していきます。
この教材では上記の機能を作成していきます。
カレンダーの UI は日付を扱うライブラリと Material UI のみを使って React 側でフルスクラッチで実装します。カレンダーのロジックの作り方や状態管理の仕方はかなり勉強になります。
予定の追加機能は最初 React 側だけで実装して、最終的にはサーバーに保存できるようにしていきます。サーバーとの通信という非同期処理はここででてきます。
Redux では以下の 4 つの状態を扱います。チュートリアルレベルで 5 つも状態が出てくることは普通はないので、実践的な開発のいい経験になることは間違いありません。
カレンダーの日付データを管理します。表示されている月の年月を保持し、表示のタイミングでカレンダーを計算して表示します。
js1234 Copied!{
month: 1,
year: 2020
}
予定を追加するときの dialog の状態を管理します。入力項目と dialog 自体の管理を行います。
js123456789 Copied!{
isDialogOpen: false,
form: {
title: "予定",
location: "会議室",
description: "週次MTG",
date: dayjs()
}
}
date
に関してはdayjs()
というライブラリのオブジェクトで管理します。
addSchedule
で追加された予定を配列で管理します。calendar
から生成された日付の配列に挿入して最終的には表示させます。
js12345678910111213141516 Copied![
{
id:1
title: "予定",
location: "会議室",
description: "週次MTG",
date: dayjs()
},
{
id: 2
title: "予定",
location: "会議室",
description: "週次MTG",
date: dayjs()
}
];
予定の詳細を dialog に表示する際に使う状態です。中身はaddSchedule
とほぼ同じです。
このアプリケーションでは、Material UIを使って構築していきます。そのためボタンやテキストフィールドを 1 から作るようなことはないので、コンポーネント総数も 7 個とそれほど多くありません。
それぞれのコンポーネントを作成していくときにそれぞれの役割については説明していくことにします。
予定の保存を行うためのサーバーです。ここではデータベースのスキーマを紹介します。
sql12345678 Copied!CREATE TABLE schedules (
id INT NOT NULL AUTO_INCREMENT,
date DATETIME NOT NULL,
title TEXT NOT NULL,
description TEXT,
location TEXT,
PRIMARY KEY (id)
);
テーブルは予定を扱うschedules
のみとなっています。