カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-5

設計

このアプリケーションでの設計を説明していきます。

機能

  • カレンダーのロジック作成・表示
  • カレンダーの月の切り替え
  • 予定の追加
  • 予定の詳細表示
  • 予定の削除
  • サーバーからデータの取得と保存

この教材では上記の機能を作成していきます。

カレンダーの UI

カレンダーの UI は日付を扱うライブラリと Material UI のみを使って React 側でフルスクラッチで実装します。カレンダーのロジックの作り方や状態管理の仕方はかなり勉強になります。

予定の管理

予定の追加機能は最初 React 側だけで実装して、最終的にはサーバーに保存できるようにしていきます。サーバーとの通信という非同期処理はここででてきます。

Redux の状態

Redux では以下の 4 つの状態を扱います。チュートリアルレベルで 5 つも状態が出てくることは普通はないので、実践的な開発のいい経験になることは間違いありません。

calendar

カレンダーの日付データを管理します。表示されている月の年月を保持し、表示のタイミングでカレンダーを計算して表示します。

js
1234
Copied!
{ month: 1, year: 2020 }

addSchedule

予定を追加するときの dialog の状態を管理します。入力項目と dialog 自体の管理を行います。

js
123456789
Copied!
{ isDialogOpen: false, form: { title: "予定", location: "会議室", description: "週次MTG", date: dayjs() } }

dateに関してはdayjs()というライブラリのオブジェクトで管理します。

schedules

addScheduleで追加された予定を配列で管理します。calendarから生成された日付の配列に挿入して最終的には表示させます。

js
12345678910111213141516
Copied!
[ { id:1 title: "予定", location: "会議室", description: "週次MTG", date: dayjs() }, { id: 2 title: "予定", location: "会議室", description: "週次MTG", date: dayjs() } ];

currentSchedule

予定の詳細を dialog に表示する際に使う状態です。中身はaddScheduleとほぼ同じです。

コンポーネント

このアプリケーションでは、Material UIを使って構築していきます。そのためボタンやテキストフィールドを 1 から作るようなことはないので、コンポーネント総数も 7 個とそれほど多くありません。

それぞれのコンポーネントを作成していくときにそれぞれの役割については説明していくことにします。

API サーバー

予定の保存を行うためのサーバーです。ここではデータベースのスキーマを紹介します。

sql
12345678
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のみとなっています。