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

間違いや改善の指摘

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

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

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

質問ポリシー①

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

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

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

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

0-4

kanbanの設計を考える

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

全画面の洗い出し

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

トップページ

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

image

リスト作成ページ

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

image

リスト編集ページ

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

image

カード作成ページ

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

image

カード詳細ページ

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

image

カード編集ページ

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

image

サインアップページ

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

image

サインインページ

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

image

必要な情報の洗い出し

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

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

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

img_1779

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

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

情報の関係性を考える

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

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

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

image

テーブル設計

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

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

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

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

image

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

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

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

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

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