ToDoアプリを作成する（要件定義と外部設計）


# 初めに
Laravelの基礎を学習したのでToDoアプリの開発をウォーターフォールの手順で実行することで基礎能力の向上と同時にポートフォリオの作成を目指します

## 開発環境

#### 言語
- PHP（8.2.4）
- HTML,CSS(SASS)

#### DMBS
- MySQL 5.7.39

#### フレームワーク
- Laravel Framework(10.9.0)
- Bootstrap（CDNリンク）

#### サーバー　
- MAMP

### ウォーターフォール開発とは
次の手順で開発することを指しますが今回は「実装」までを行います
1. 要件定義
1. 設計
1. 実装
1. テスト
1. 運用・保守

## 要件定義
### 目的
ブラウザに「やることリスト」を管理できるWEBアプリ、ToDoアプリを作成する



### 概要
本システムは、ToDoリストをブラウザで管理することを目的としたWEBアプリです。ユーザーはブラウザを通じてToDoの作成、編集、削除を行えます。また、完了ボタンを押すことで完了したタスクを別のグループとしてリスト化することができます。タスクの登録時にカテゴリの選択することでToDoリストの視認性を高めます。個人情報を扱うことを考慮し、LaravelフレームワークとJetstreamを使用して、ユーザー認証機能を実装します

### 機能要件

1. ユーザー登録機能
   - ユーザー名,パスワードを登録可能とする
   - バリデーションを実装し、重複した情報の登録を防止する  　
1. ログイン機能
   - 登録メールアドレスとパスワードでログイン可能とする。
   - ログインに失敗した場合はエラーメッセージを表示する。
1. ToDoの作成機能
   - タイトル、詳細、期限、カテゴリを入力してToDoを作成できる。
   - カテゴリはプルダウンから選択できるようにする。
   - 作成したToDoは一覧表示画面に表示される。
1. ToDoの編集機能
   - ToDoのタイトル、詳細、期限、カテゴリを編集できる。
1. ToDoの削除機能
   - 作成済みのToDoを削除できる。
1. 完了済みToDoの表示機能
   - 完了済みのToDoを一覧表示画面に表示できる。
   - 完了済みのToDoは、一覧表示画面とは別に表示する。
1. カテゴリ別ToDoの表示機能
   - カテゴリごとにToDoを一覧表示できる。
   - カテゴリの選択はプルダウンからジャンル選択できる
1. ページネーション機能
   - 5件以上でページネーションで表示する。
1. ユーザー情報の編集機能
   - メールアドレス、パスワードの編集ができる
   - 変更時は現在のパスワードの入力が必要とする
1. ログアウト機能
   - ログイン中のはログアウトできるようにする。
### 非機能要件
1. 性能: Webページの読み込み速度が3秒以内になるようにする。
    - CDNの利用、ファイルサイズの縮小させる
3. セキュリティ: ユーザーの個人情報を扱うため、パスワードのハッシュ化やSSL通信の導入などセキュリティ対策を実施する。
    - Jetstreamによる機能導入
4. ユーザビリティ: ユーザーが直感的に操作できるように、簡単なUI/UXデザインを採用する。
    - Bootstrapによるレスポンシブデザイン
5. 保守性: コードの修正やバグの修正など保守性を考慮した構成にする。
    - Laravelフレームワークによるコード管理
### 使用例

1. ToDoリストの追加
    - ログイン後、画面上部にある「新しいタスクを追加」ボタンをクリックすることで新しいタスクを追加できる
1. ToDoリストの表示
    - ログイン後のトップページはリストの一覧が表示される
1. ToDoリストの編集
    - 一覧から編集ボタンを押すことでタスクの編集操作ができる
1. ToDoリストの削除
    - 一覧から削除ボタンを押すことでタスクの削除操作ができる
1. ToDoリストの完了
    - 一覧から完了ボタンを押すことで完了グループに移動できる

### システム機能仕様

#### ユーザー管理機能
- ユーザー登録機能
    - メールアドレス、パスワードの入力による登録機能
    - 入力値に対するバリデーション機能
- ログイン機能
    - メールアドレスとパスワードによるログイン機能
- ログアウト機能
    - ログイン中のユーザーをログアウトさせる機能
- ユーザー情報編集機能
    - ユーザー名、メールアドレス、パスワードの変更機能
    - 入力値に対するバリデーション機能
- パスワードリセット機能
    - パスワードの再設定機能
#### ToDoリスト管理機能
    
- 新規タスク登録機能
    - タイトル、詳細、期限の入力によるタスク登録機能
    
- タスク一覧表示機能
    - 登録済みタスクを一覧表示する機能
    - タスクの絞り込み機能
    - ページネーション機能
- タスク詳細表示機能
    - 登録済みタスクの詳細を表示する機能
- タスク編集機能
    - タイトル、詳細、期限の変更機能
- タスク削除機能
    - 登録済みタスクを削除する機能
- タスク完了機能
    - 登録済みタスクを完了させる機能
- タスク検索機能
    - タイトル、詳細、期限からのキーワード検索機能
- タスクソート機能
    - タイトル、期限、作成日時による並び替え機能
- カテゴリ管理機能
    - カテゴリの追加、編集、削除機能
- 完了タスクグループ機能
    - 完了タスクと別グループ画面に表示させる
#### 通知機能
- 通知機能
    - 登録されたメールアドレスに通知する
    


### データベース基本要件

#### データベースの目的
- ToDoアプリで扱うタスク情報の管理
#### データベースの構造
テーブル名：todos
| ID | user_id|task | content | deadline| category | flag |created_at|
| --- | --- |--- | --- | --- | --- | --- | --- |

#### データベースの詳細
- ID：タスクを一意に識別するためのID
- user_id：タスクを作成したユーザーのID。ユーザーごとにタスクを管理します
- task：タスクのタイトルや概要などを記録するためのカラム
- content：タスクの詳細な説明など、タスクに対する補足情報を記録するためのカラム
- deadline：タスクの締め切り日時を記録するためのカラム
- category：タスクのカテゴリーを記録するためのカラム。仕事、プライベートなど
- flag：タスクの状態を表すフラグ。例えば、未完了、完了済み、進行中など。
- created_at：タスクが作成された日時を記録するためのカラム

#### データベースの機能要件
- タスクの登録、更新、削除ができること
- タスクの締め切り日時を設定できること
- タスクが完了したかどうかをフラグで管理できること
- タスクを一覧表示できること
- タスクを締め切り日時や完了フラグでソートして表示できること
#### データベースの性能要件
- 同時に複数のユーザーがタスクを登録・更新・削除しても、快適に利用できること
- タスクが数千件、数万件でも快適に表示できること
- データベースのセキュリティ要件
- ユーザーごとにタスクの閲覧・編集権限を設定できること
- データベースにアクセスするための認証機能を実装すること
- データベース内の情報が漏洩しないよう、適切な暗号化やアクセス制御を行うこと

## 外部設計

### 画面一覧

| ファイル名 | 分類 | 説明 | 備考| 
| --- | --- | --- | --- |
| top | ログイン前画面 | ログアウトされた状態の画面 | リダイレクト先 |
| login | ログイン画面 | システムにログインする画面 | ユーザー認証 |
| index | 一覧表示画面 | タスクを一覧表示とタスクの新規登録フォームを表示する |  |
| show | 未完了一覧画面 | 未完了タスクを一覧で表示する | --- |
| edit | 情報編集画面 | 登録タスクを編集する | --- |
| completion | 完了済みタスク一覧表示画面 | 完了したタスク一覧を表示する | --- |
| edit | 未完了タスク一覧表示画面 | 未完了のタスクを一覧表示する



### ログイン前画面画面(top)

![ポートフォリオ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/246f87f1-fc69-dcf0-f7e9-cabcce702d5a.png)

### 一覧表示画面（index)
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/d679a34c-cbd6-6162-03aa-6ac426196bdd.png)

### 未完了タスク一覧表示（show)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/0c399b9c-2dff-3bb6-b668-a308eae777cf.png)

### 完了タスク一覧表示(complete)
![ポートフォリオ (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/f8119c1b-f247-d170-c268-15757867e245.png)


### 情報編集画面（edit)
![ポートフォリオ (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/63f70469-eb03-0039-5b11-af27a1977c8d.png)

### タスク登録・編集用入力フォームの内容
- タスクタイトル
- コンテンツ（内容）
- タスクの予定日時（締め切り）
- タスクの種類（プライベート、仕事など）

### 画面遷移図

![ToDoアプリ画面遷移ず.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/e8e43887-fe6b-e3bc-9a1b-ccbccf957375.png)

### ER図

![ToDoアプリ画面遷移ず-ページ2.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/d9e68a58-fe27-74e6-0b78-fa7ffa64bbc2.png)

##　実際に作ったもの

https://github.com/AlecTrippier/todo.git

![スクリーンショット 2023-05-15 15.41.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/6bfbcd9a-a2f5-9df0-ac04-c7862c754b7f.png)

![スクリーンショット 2023-05-15 15.44.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/513a32b5-54a7-00c8-f7c9-dee4ca90423b.png)

![スクリーンショット 2023-05-15 15.45.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/5d7be7d6-b2a2-3c6f-8364-00fc0cdabd36.png)

![スクリーンショット 2023-05-15 15.48.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/6087ac64-b562-81a8-3756-9380cc5cfd33.png)

### 制作時間

要件定義/外部設計：1日
コード作成：2日

## 感想と課題

要件定義と外部設計それぞれの書き方が分からず
調べながらの作業だったので時間がかかりました。

コードの作成についてはまず、jetstreamで認証機能の雛形を作成し、
モデル、マイグレーションを作成し、ルーティングを作成し、コントローラーを作成し、
ビューを作成する流れでした

コントローラーの中身もindex,show,edit,delete,updateと
一つ一つ作成していきましたが結局CRUD形式なので、コマンドで一気に作った方が
効率が良かったと思います

仕様でToDoに期限（時間）と通知機能を盛り込む予定と書いてありましたが、
日付を入れずに時間だけを入れると反映されないとか、編集で時間のみを更新できないとか
さまざまな問題点が見つかり、解決できず実装ができませんでした。

さらに問題点といえば圧倒的なデザインセンスが無いところ。
どのようなHTMLにすれば良いかを考えることに苦労もしました。

コントローラーからビューへのデータ受け渡しについてはコードを記述する上で
理解度が進み、自分でもコードを見るだけで機能が把握できる段階に近づきつつあります

HTMLに不安がありますが、新しくフォームを用意することになっても
自分で調べれば対応ができるかとは思います。