前のパートに戻る 完了して次のパートへ  

  0-5 kanbanの設計を考える

今回のパートではkanbanを作る上でどのように設計を行うかを解説して行きます。

全画面の洗い出し


設計をする前に本教材で作成する画面を全て紹介します。画面は全部で8画面あります。

トップページ


トップページにはユーザーが作成したリストやカードの情報が表示されます。またヘッダーからサインアウトできます。

リスト作成ページ


リスト作成ページでは、テキストを入力してリストを作成できます。

リスト編集ページ


リスト編集ページでは、リストのタイトルを編集できます。

カード作成ページ


カード作成ページでは、カードのタイトルとカードの詳細内容を入力できます。

カード詳細ページ


カード詳細ページでは、カードのタイトルとカードのメモとどのリストにあるのか確認できます。またカードを削除できます。

カード編集ページ


カード編集ページでは、カードのタイトルとメモとリストの編集ができます。

サインアップページ


サインアップページでは、ユーザーの新規登録ができます。

サインインページ


サインインページではユーザーがサインインできます。

必要な情報の洗い出し


今回のコースで開発する機能は、以下の3つになります。

- サインアップ・サインイン機能
- リスト機能
- カード機能

これらの機能を開発する上で必要な情報を紙に書き出してみます。

まとめると必要な情報は以下の3つです。

- ユーザーの情報
- リストの情報
- カードの情報

情報の関係性を考える


ユーザーの情報とリストの情報の関係性は以下のようになります。

- ユーザーは複数のリストを作成できる
- リストAに関して、リストAを作成したユーザーは一人しかいない

このような関係のことを「1対多の関係」と言います。

テーブル設計


先ほど、ユーザーの情報とリストの情報の関係を考えましたが、今度は「リストの情報とカードの情報」など全ての情報の関係性を考えます。全ての情報をの関係を洗い出したら、テーブル設計を行います。テーブル設計は例えばusersテーブルとlistsテーブルにはどういった関係があるか設計することで、後に変更があった場合も対応できる冗長性・拡張性を考慮できます。

テーブル設計する際はER図を書きます。 ER図に関しては、こちらのURLを参考にしてください。

若手プログラマー必読!5分で理解できるER図の書き方5ステップ

今回作成するkanbanのテーブル設計すると以下のようになります。

一人のユーザーはリストを作成できて、1つのリストに複数のカードを作成できます。

今回開発するコードの完成版


今回開発するコードの完成版は下記に示します。

kanbanというフォルダがあるのでそちらをダウンロードできます。

https://drive.google.com/drive/folders/1aCMOoeae_L6JVIVQk15UR3f0ejBegfOt

議論
0 質問
このコースの評価は?