初めに

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

開発環境

言語

PHP（8.2.4）
HTML,CSS(SASS)

DMBS

MySQL 5.7.39

フレームワーク

Laravel Framework(10.9.0)
Bootstrap（CDNリンク）

サーバー　

MAMP

ウォーターフォール開発とは

次の手順で開発することを指しますが今回は「実装」までを行います

要件定義
設計
実装
テスト
運用・保守

要件定義

目的

ブラウザに「やることリスト」を管理できるWEBアプリ、ToDoアプリを作成する

概要

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

機能要件

ユーザー登録機能
- ユーザー名,パスワードを登録可能とする
- バリデーションを実装し、重複した情報の登録を防止する　
ログイン機能
- 登録メールアドレスとパスワードでログイン可能とする。
- ログインに失敗した場合はエラーメッセージを表示する。
ToDoの作成機能
- タイトル、詳細、期限、カテゴリを入力してToDoを作成できる。
- カテゴリはプルダウンから選択できるようにする。
- 作成したToDoは一覧表示画面に表示される。
ToDoの編集機能
- ToDoのタイトル、詳細、期限、カテゴリを編集できる。
ToDoの削除機能
- 作成済みのToDoを削除できる。
完了済みToDoの表示機能
- 完了済みのToDoを一覧表示画面に表示できる。
- 完了済みのToDoは、一覧表示画面とは別に表示する。
カテゴリ別ToDoの表示機能
- カテゴリごとにToDoを一覧表示できる。
- カテゴリの選択はプルダウンからジャンル選択できる
ページネーション機能
- 5件以上でページネーションで表示する。
ユーザー情報の編集機能
- メールアドレス、パスワードの編集ができる
- 変更時は現在のパスワードの入力が必要とする
ログアウト機能
- ログイン中のはログアウトできるようにする。

非機能要件

性能: Webページの読み込み速度が3秒以内になるようにする。
- CDNの利用、ファイルサイズの縮小させる
セキュリティ: ユーザーの個人情報を扱うため、パスワードのハッシュ化やSSL通信の導入などセキュリティ対策を実施する。
- Jetstreamによる機能導入
ユーザビリティ: ユーザーが直感的に操作できるように、簡単なUI/UXデザインを採用する。
- Bootstrapによるレスポンシブデザイン
保守性: コードの修正やバグの修正など保守性を考慮した構成にする。
- Laravelフレームワークによるコード管理

使用例

ToDoリストの追加
- ログイン後、画面上部にある「新しいタスクを追加」ボタンをクリックすることで新しいタスクを追加できる
ToDoリストの表示
- ログイン後のトップページはリストの一覧が表示される
ToDoリストの編集
- 一覧から編集ボタンを押すことでタスクの編集操作ができる
ToDoリストの削除
- 一覧から削除ボタンを押すことでタスクの削除操作ができる
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)

一覧表示画面（index)

未完了タスク一覧表示（show)

完了タスク一覧表示(complete)

情報編集画面（edit)

タスク登録・編集用入力フォームの内容

タスクタイトル
コンテンツ（内容）
タスクの予定日時（締め切り）
タスクの種類（プライベート、仕事など）

画面遷移図

ER図

##　実際に作ったもの

制作時間

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

感想と課題

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

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

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

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

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

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

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