Lesson 7
TODOアプリを作成（事前準備編）
Lesson 7
Chapter 1
作成するアプリケーションの紹介
Lesson7ではLesson8以降で作成していくwebアプリケーションのご紹介をしていきます。
アプリケーションの仕様
Lesson8で作成するwebアプリケーションはTODOアプリになります。タスク管理アプリとも呼ばれます。今後の予定などを「登録」「表示」「削除」「更新」といった一連の操作が可能となっており、自身のタスクを管理することができるwebアプリケーションです。又、このような「登録」「表示」「削除」「更新」を含むwebアプリケーションのことをCRUD（クラッド）とも呼びます。登録（Create）、表示（Read）、更新（Update）、削除（Delete）のそれぞれ頭文字を持ってCRUDと呼ばれており、CRUDは今後開発を行っていく上で最も基本的な部分になりますので、覚えておきましょう。
画面遷移図
ここからは画面を用いて処理の流れを解説していきます。
ログイン画面
ログイン画面では登録されているユーザーのメールアドレスとパスワードを入力し、認証に成功することでTODO一覧画面への遷移ができます。
新規登録画面
新規登録画面ではユーザーの情報を新たに作成する為の、画面になっています。登録が完了するとログイン画面へと遷移します。
TODO一覧画面（トップページ）
TODO一覧画面はログイン完了後に閲覧可能なページであると同時に、登録されているタスク一覧の表示を行っているページになります。TODO一覧画面ではTODOの作成、削除、編集、完了を行うことができます。
TODO作成画面
TODO作成画面では実際にタスクを登録できるページになります。登録が完了するとTODO一覧ページへ遷移し、登録したタスクがTODO一覧に表示されます。
TODO更新画面
TODO更新画面では既に登録しているタスクの編集を行うことができます。編集が完了するとTODO一覧ページへ遷移し、編集後のタスクがTODO一覧に表示されます。
画面の紹介はこれで以上になります。
機能一覧
続いては今回実装する機能のご紹介をしていきます。
ログイン機能
既に登録済みのユーザーのデータと入力された情報で照合を取ります。一致していれば、ユーザーの認証が行われTODO一覧ページへと遷移し、入力に誤りがあればページの遷移は行いません。又、Lesson5ではLaravelのログイン機能を実装して認証を行いましたが、今回は認証の処理を作成していきます。
新規登録機能
各入力欄に入力されたデータをDBへ登録します。ユーザーの作成機能になります。
TODO一覧画面（トップページ）
TODO一覧ページではタスクの表示機能を実装しています。DBへ登録されている情報をこのページに一覧形式で表示しています。
TODO完了機能
こちらは「完了」ボタンを押すことでタスクを「完了」のステータスに変更します。完了したタスクはTODOリストではなく「完了したTODOリスト」へ表示を出し分けていきます。尚、こちらの機能は画面が存在せず、ボタンを押したことによりステータスを変更するだけの機能になります。
TODO削除機能
「削除」ボタンを押すことでタスクを削除することが可能です。タスクのステータスを完了に変更することでタスクの削除ボタンが表示され、削除を行うことが可能です。尚、こちらの機能も画面は存在せず、ボタンを押したことでタスクを削除するのみの機能になります。
TODO作成機能
タスクを実際に登録する機能になります。それぞれの入力欄に入力されたデータがDBへ保存され、TODO一覧画面にて表示される仕組みです。登録処理が完了するとTODO一覧画面へ自動的に遷移します。
TODO更新機能
TODO一覧の各タスクから編集画面へ遷移することが可能です。遷移後には予め変更予定のデータが各入力欄へセットされている状態で、「編集」ボタンを押すことでデータの編集が可能となっています。データ編集後はTODO一覧ページへ自動的に遷移されます。
実装機能のご紹介はこれで以上になります。
DBの構成図・ER図
ER図とは
一言でER図（Entity Relationship Diagram）とはデータベースの設計図のことを指します。ER図を確認することでそれぞれのデータの関係性を把握することが可能です。又、ほとんどのプロジェクトには当たり前のように存在しており、開発者はER図も参考にしながら開発を行っていきます。その為、ER図について認識を持っておきましょう。
ER図を導入する理由
やり直しの手間を省いたり、効率よく開発を進める為にER図を導入しています。ER図がない状態で思いつきで進めてしまうと、後々必要な部分が含まれていなかったり、実装すべき部分が抜けていたりと無駄な時間を要してしまいます、又、途中からアサインしたエンジニアにとってもER図があることで、ある程度の仕様が理解できるメリットもあります
TODOアプリケーション ER図
今回使用するER図は以下になります。
1. Entity
Entityとは実態のことを言い、テーブルを指します。ER図ではusersとtodosのそれぞれがEntityになります。
2. Relation
Relationはusersとtodosを結んでいる線の部分を指し、関係性を意味します。usersからtodosに向けて3本の線に分かれている部分が関係性を表しており、TODOアプリケーションで言うと「一人のユーザーは複数のタスクを持っている（登録することができる）」関係性であるため、それを表すRelationになります。
3. Attribute
それぞれのEntity（テーブル）に含まれているカラムをER図ではAttributeと表します。
4. PK
主キー（Primary Key）はDBの中でデータを識別する為の部分になります。IDはデータ一つ一つに重複することのない番号として振られる為、「ID = 1のデータは○○」「ID = 2のデータは○○」と識別することが可能です。
5. FK
外部キー（Foreign Key）は別テーブルとの関係性を保証する為のカラムになります。ER図ではtodosテーブルのuser_idカラムにusersカラムのIDが入り、「どのユーザーのTODOなのか」の紐付けを行うことが可能です。主キーと外部キーの設定を行っておくことで、存在しないユーザーのTODO登録を防いだり、より確実性のあるシステムを構築することができます。
Lesson 7
Chapter 2
実装方針(それぞれのファイルの役割)
TODOアプリで準備するファイルについてご紹介します。尚これらのファイルはLesson8以降のファイル作成時に改めて詳細を解説していきます。
画面表示系
login.blade.php
ログイン画面を作成する為のbladeファイルになります。
register.blade.php
ユーザーの新規登録画面を作成する為のbladeファイルになります。
top.blade.php
TODO一覧画面を作成する為のbladeファイルになります。
create.blade.php
TODO作成画面を作成する為のbladeファイルになります。
edit.blade.php
TODO編集画面を作成する為のbladeファイルになります。
処理実装系
LoginController.php
ログイン画面表示処理LoginController.php
public function login(){
// 処理
}LoginController.php
public function loginCheck(){
// 処理
}LoginController.php
public function logout(){
// 処理
}RegisterController.php
ユーザー作成画面表示処理RegisterController.php
public function register(){
// 処理
}LoginController.php
public function storeUser(){
// 処理
}TodosController.php
TODO一覧取得、画面表示処理LoginController.php
public function TodoLists(){
// 処理
}LoginController.php
public function TodoCreate(){
// 処理
}LoginController.php
public function TodoEdit(){
// 処理
}LoginController.php
public function TodoStore(){
// 処理
}LoginController.php
public function TodoUpdate(){
// 処理
}LoginController.php
public function TodoCompleted(){
// 処理
}LoginController.php
public function TodoDelete(){
// 処理
}以上が準備していくファイルになります。Lesson8からは実際にファイルを作成しながら実践を行っていきましょう。
