Laravel 10days チャレンジ! 9日目 〜TODOアプリを作ろう 設計編〜

Laravel

みなさんこんにちは、ちょいまけです。

今回は「Laravelをゼロから10日でどこまで習得できるのか」という企画の9日目です。

この企画が始まった経緯が知りたい方はコチラをご確認ください。

この記事では、LaravelでTODOアプリを作るための設計を行います。よろしければ、お付き合いください。

TODOリストを作る

このLaravelチャレンジを初めて、ついに9日目です。今までずっと【青本】をベースにインプット的な学習を行ってきました。しかしこのチャレンジの最後に「何かアプリを作ってみたい」という気持ちが強くなり、現在持っている知識で作ることができそうな「TODOアプリ」を作ることを決意したのです。

設計に必要なものは

アプリを作るためには、事前にある程度アプリの設計をしなくてはなりません。さぁ設計をやってみようと思ったわけですが、そこでいきなり手が止まりました。具体的にどうやれば良いのか全くわからなかったからです。

そこからGoogle先生に色々教わった結果、設計のため以下のものを作ることにしました。

  • 機能一覧
  • 画面設計
  • URL設計
  • テーブル定義

それぞれがどういったものかを紹介します。

機能一覧

機能一覧はアプリケーションが持つ機能を一覧でまとめたものです。まずアプリケーションによって何ができるのかをはっきりさせないとどうしようもありません。必要な機能についてまとめた一覧を作り、それを元に残りの設計を進めます。

画面設計

画面設計は各機能をどの画面にどのように載せるかを設計したものです。機能一覧が出せたら、その機能をどう画面に載せるかを考える必要があります。どの機能をどの画面に置くか、データを出力するのか、入力するのかをこの段階で決めます。

URL設計

URL設計とは各画面やPOSTなどに対応するURLの組み合わせと機能を決めることです。機能設計と画面設計を元に必要な一意なURLを割り出し、どのURLでどの機能を実現するかを決定します。 

テーブル定義

テーブル定義とはアプリケーションの機能を実現するためにデータをどのようなDBのテーブルに保存するかなどを定義することです。

例えば、TODOリストのタスクのデータはtaskテーブルにidTODOの内容を記した文字列を入れるといったように、機能実現のためのデータの保存に必要なデータベースのテーブルの形を決めます。

それではこれから実際に各設計を考えていきます。

機能一覧

必要な機能の一覧は以下の通りです。

  • ユーザーはタスクを作ることができる
  • タスクはタイトル、タスク内容、状態を持つ
  • タスクの状態とは「未完了」「完了」である
  • ユーザーはタスクのタイトルを変更することができる
  • ユーザーはタスクのタスク内容を変更することができる
  • ユーザーはタスクを状態を変更することができる
  • ユーザーはタスクを削除することができる

画面設計

画面設計では、各画面の「デザイン」と「どの機能を配置するか」を決めます。

タスク一覧

タスク一覧では、タスクの追加、編集、削除ができます。

TODOアプリ一覧画面

タスク追加

タスク追加では、新規タスクの追加が可能です。タスクの名前を詳細を設定できます。

TODOアプリ追加画面

タスク編集

追加したタスクの編集ができます。タスク名や詳細、完了/未完了の状態の更新が可能です。

TODOアプリ編集画面

タスク削除

タスクの削除ができます。

TODOアプリ削除画面

URL設計

URL設計は「URLをどの文字列で設定するか」と「HTTPメソッドの種類」を設定します。

URLメソッド処理
taskGETタスクの一覧ページ表示
task/addGETタスクの追加入力ページ表示
task/createPOSTタスクの追加
task/edit?id={タスクID}GETタスクの編集入力ページ入力
task/updatePOSTタスクの更新
task/del?id={タスクID}GETタスクの削除確認ページ表示
task/remove?POSTタスクの削除

テーブル定義

テーブル定義では、アプリが入出力するデータの保存形式を決めます。

TODOアプリのテーブル定義

今回はtaskテーブルを用意します。内容は以下の通りです。

カラムコメント
idINTID(自動連番)
titleVARCHAR(100)タスク名
detailVARCHAR(100)タスク内容
statusINTタスクの完了状態
createdDATETIME作成日時
modifiedDATETIME更新日時

これでアプリを作るための準備が完了しました。

さいごに

「Laravel 10days チャレンジ! 9日目 〜TODOアプリを作ろう 設計編〜」いかがだったでしょうか?今回はLaravelでTODOアプリを作るための設計を行いました。

今までまともに設計をこういった形でアウトプットしたことがなかったので、この記事を書くのは本当に苦労しました。コード書くほうが楽だと感じます。ただ設計はとても大事なので、きちんとできるようになりたいですね。

次回はいよいよTODOアプリを実際に作ります。かなりシンプルなので今まで勉強してきたことを使ってサクッとやっつけます。お楽しみに。

今回は以上です。
最後まで読んでいただきまして、ありがとうございました。

参考

コメント

タイトルとURLをコピーしました