教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
今回のパートではkanbanを作る上でどのように設計を行うかを解説して行きます。
設計をする前に本教材で作成する画面を全て紹介します。画面は全部で8画面あります。
トップページにはユーザーが作成したリストやカードの情報が表示されます。またヘッダーからサインアウトできます。
リスト作成ページでは、テキストを入力してリストを作成できます。
リスト編集ページでは、リストのタイトルを編集できます。
カード作成ページでは、カードのタイトルとカードの詳細内容を入力できます。
カード詳細ページでは、カードのタイトルとカードのメモとどのリストにあるのか確認できます。またカードを削除できます。
カード編集ページでは、カードのタイトルとメモとリストの編集ができます。
サインアップページでは、ユーザーの新規登録ができます。
サインインページではユーザーがサインインできます。
今回のコースで開発する機能は、以下の3つになります。
Copied!- サインアップ・サインイン機能
- リスト機能
- カード機能
これらの機能を開発する上で必要な情報を紙に書き出してみます。
まとめると必要な情報は以下の3つです。
Copied!- ユーザーの情報
- リストの情報
- カードの情報
ユーザーの情報とリストの情報の関係性は以下のようになります。
Copied!- ユーザーは複数のリストを作成できる
- リストAに関して、リストAを作成したユーザーは一人しかいない
このような関係のことを「1対多の関係」と言います。
先ほど、ユーザーの情報とリストの情報の関係を考えましたが、今度は「リストの情報とカードの情報」など全ての情報の関係性を考えます。全ての情報をの関係を洗い出したら、テーブル設計を行います。テーブル設計は例えばusersテーブルとlistsテーブルにはどういった関係があるか設計することで、後に変更があった場合も対応できる冗長性・拡張性を考慮できます。
テーブル設計する際はER図を書きます。
ER図に関しては、こちらのURLを参考にしてください。
若手プログラマー必読!5分で理解できるER図の書き方5ステップ
今回作成するkanbanのテーブル設計すると以下のようになります。
一人のユーザーはリストを作成できて、1つのリストに複数のカードを作成できます。
今回開発するコードの完成版は下記に示します。
kanbanというフォルダがあるのでそちらをダウンロードできます。
https://drive.google.com/drive/folders/1aCMOoeae_L6JVIVQk15UR3f0ejBegfOt