Vueと同時にしていると、Laravel自体の特徴がうまく使えないので、
改めてプロジェクトを作成することにする
まずは設計
1.機能設計
ToDo アプリが持つ機能の箇条書きは以下の通りです。
- ユーザーはタスク（ToDo）を作成することができる。
- タスクはタイトル、期限日、状態を持つ。
- タスクの状態とは、「未着手」「着手中」「完了」の3種類である。
- ユーザーはタスクを一覧表示することができる。
- ユーザーはタスクのタイトル、期限日、状態を編集することができる。
- タスクはフォルダに分類して管理する。
- そのため、ユーザーはフォルダを作成することができる必要がある。
- また、ユーザーはフォルダの一覧を表示できる必要がある。
- ユーザーごとにアカウントを持ち、ログインしたユーザーは自分のフォルダおよびタスクだけを閲覧または編集することができる。
- ユーザーはパスワードを忘れた場合には再登録することができる。
2.画面設計
画面は省略
2.1.タスク一覧ページ
出入力
| 項目 | 出入力 |
|---|
| フォルダ タイトル | 出力 |
| タスク タイトル | 出力 |
| タスク 状態 | 出力 |
| タスク 期限日 | 出力 |
アクション
| 項目 | 種類 | 働き |
|---|
| フォルダ作成 | リンク | フォルダ作成ページに遷移する。 |
| タスク作成 | リンク | タスク作成ページに遷移する。 |
| タスク編集 | リンク | タスク編集ページに遷移する。
|
2.2.フォルダ作成ページ
出入力
アクション
| 項目 | 種類 | 働き |
|---|
| 送信 | ボタン | フォルダを新規作成し、タスク一覧ページに遷移する。 |
2.3.タスク作成ページ
出入力
| 項目 | 出入力 |
|---|
| タスク タイトル | 入力 |
| タスク 状態 | 入力 |
| タスク 期限日 | 入力 |
アクション
| 項目 | 種類 | 働き |
|---|
| 送信 | ボタン | タスクを新規作成し、タスク一覧ページに遷移する。 |
2.4.タスク編集ページ
出入力
タスク編集ページでは登録済みの情報を画面に出力しておく必要もあります。
| 項目 | 出入力 |
|---|
| タスク タイトル | 出力 |
| タスク 状態 | 出力 |
| タスク 期限日 | 出力 |
| タスク タイトル | 入力 |
| タスク 状態 | 入力 |
| タスク 期限日 | 入力 |
アクション
| 項目 | 種類 | 働き |
|---|
| 送信 | ボタン | タスクを編集し、タスク一覧ページに遷移する。 |
2.5.ヘッダー
画面をまたいで共通で定義されるパーツもあるでしょう。
今回はヘッダーナビゲーションがすべての画面に共有して配置されます。
出入力
アクション
| 項目 | 種類 | 働き |
|---|
| ログアウト | リンク | ログインしている時のみ表示する。
ログアウト処理を行い、ログイン画面に遷移する。 |
| 会員登録 | リンク | ログインしていない時のみ表示する。
会員登録ページに遷移する。 |
| ログイン | リンク | ログインしていない時のみ表示する。
ログインページに遷移する。 |
3.URL設計
| URL | メソッド | 処理 |
|---|
| /folders/{フォルダID}/tasks | GET | タスク一覧ページを表示する。 |
| /folders/create | GET | フォルダ作成ページを表示する。 |
| /folders/create | POST | フォルダ作成処理を実行する。 |
| /folders/{フォルダID}/tasks/create | GET | タスク作成ページを表示する。 |
| /folders/{フォルダID}/tasks/create | POST | タスク作成処理を実行する。 |
| /folders/{フォルダID}/tasks/{タスクID}/edit | GET | タスク編集ページを表示する。 |
| /folders/{フォルダID}/tasks/{タスクID}/edit | POST | タスク編集処理を実行する。 |
4.テーブル定義
フォルダテーブル
| カラム論理名 | カラム物理名 | 型 | 型の意味 |
|---|
| ID | id | SERIAL | 連番（自動採番） |
| タイトル | title | VARCHAR(20) | 20文字までの文字列 |
| 作成日 | created_at | TIMESTAMP | 日付と時刻 |
| 更新日 | updated_at | TIMESTAMP | 日付と時刻 |
タスクテーブル
| カラム論理名 | カラム物理名 | 型 | 型の意味 |
|---|
| ID | id | SERIAL | 連番（自動採番） |
| フォルダID | folder_id | INTEGER | 数値 |
| タイトル | title | VARCHAR(100) | 100文字までの文字列 |
| 状態 | status | INTEGER | 数値 |
| 期限日 | due_date | DATE | 日付 |
| 作成日 | created_at | TIMESTAMP | 日付と時刻 |
| 更新日 | updated_at | TIMESTAMP | 日付と時刻 |
