初心者向け。Laravel製のTODOアプリ①タスクの表示
409 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
現在Laravelを習得中ですがネットの情報で勉強をしました。
アプリを作る流れは分かるのですが（多分自分で調べさせるために）説明が抜けている部分が多々あったので私なりに説明を加えて後で自分が見て思い出せるようにする為のアウトプットの記事を書きました。
説明をかなり追加したので初心者向けのTODOアプリの記事で情報量は一番多いと思います。
自分へのアウトプットなのでなるべくごまかさないようにしているからなんですけどね。
アプリの立ち上げはLaradockを使っていますが何でアプリを立ち上げるかを決めていない人はおすすめです。
MAMPはLaravelのバージョンが8系以上だとPHPのバージョン的に立ち上げエラーになったので使うのを止めました。
今回の解説のLaravelのバージョンは8系です。
8系からルーティングの書き方が変わるので0からLaravelを初める人は8系で勉強した方がルーティングを書く時に混乱しないです。（私は最初7系以下を使って混乱しました）
それでは説明します。
目次
マイグレーションファイルの作成
テーブル（今回はtasksテーブルとします）を編集できるマイグレーションファイルを作成します。
今回はデータベースに登録した情報を表示するのでテーブルの情報が必要になります。
だからマイグレーションファイルを作成します。
コマンドは「php artisan make:migration create_テーブル名_table 」でテーブル名を「tasks」とします。
テーブル名は小文字の複数形です。
ターミナルで↓のコマンドを入力します。
これで「プロジェクト名 > database > migrations > 2022_10_02_063504_create_tasks_table.php」ができているのを確認できます。（2022_10_02_063504はテーブルを作成した日によって変わるので同じでなくていいです）
ファイルを開くと↓になっているのを確認できます。
3行目・4行目・5行目に「use」がありますがこれは他のファイルのクラス・変数・定数などをインポートして使えるようにするためにあります。
7行目の「class CreateTasksTable extends Migration」ですがこれは理解しなくても問題ないと思います。（私は今の段階ではそんなものだと思っています）
14行目の「upメソッド」ですがこの中にデータベースにテーブルやカラムなどを生成するための記述があります。
16行目ですが今は「こんなのがあるんだ〜」位でいいと思います。
17行目・18行目がテーブルの中のカラムの設定で17行目の「id()」でテーブルにidカラムを作成して18行目の「timestamps()」でcreated_atカラムとupdated_atカラムを作成します。
例えば↓のテーブルの赤枠がidカラムで青枠がcreated_atカラムとupdated_atカラムです。
laradockを使っている時にデータベースのテーブルに接続する方法は↓で解説していますがテーブルを見なくても今回の解説は読めるように説明しています。
27行目の「downメソッド」はロールバックする時用ですが今回の解説に必要ないので説明を省きます。
ロールバックはテーブルやカラムに追加した内容を1つ前の状態に戻す事です。
今の段階でtodosテーブルに存在するカラムは「id」・「created_at」・「updated_at」ですがカラムを追加するためにコードを↓にします。
19行目の「string」・20行目の「text」はデータ型といい細かく違いますが今の段階では文字を入力するという認識でいいと思います。
データ型に関してはこの記事に一覧があります。
ファイルに記述しただけではデータベースが更新されないので更新しますがデータベースを更新する時は「php artisan migrate」です。
これでデータベースを確認するとテーブルが作成されているのを確認できます。
私はLaradockでアプリを立ち上げていますがその場合のデータベースへの接続は↓で解説しています。
テーブルのカラムに情報を追加
カラムに情報を追加する時にターミナルからSQL文を書いてデータベースに直接書いてもできますが面倒です。
こんな場合はシーダーファイルを使いますがコマンドは「php artisan make:seeder シーダー名」です。
シーダー名を「TaskSeeder」とします。
ターミナルで↓のコマンドを入力します。
これで「プロジェクト名 > database > seeders > TaskSeeder.php」が作成されます。
TaskSeeder.phpの中身は↓なのを確認できます。
14行目に「runメソッド」がありますがシーダーファイルを実行した時にrunメソッドの中に書いてある内容が実行されます。
TaskSeeder.phpに追記するためにコードを↓にします。
6行目のDBは「DBクラス」と言ってデータベースにアクセスする機能です。
この記事に解説があります。
19行目の「DB::table(‘tasks’)->insert([ ])」のtasksはテーブル名ですがこれでtasksテーブルの中のカラムに情報を追加できます。
[ ]の中にJSON形式でテーブルに追加する内容を書きます。（JSON形式の意味が分からなかったらこんなコードの書き方をするんだと思えばいいです）
20行目〜26で説明すると「‘id’ => 1」 のように「カラム名 => 追加する値」の書き方をします。
今のままではシーダーの内容がテーブルに反映されないのでターミナルでコマンドを使って反映させますが「
php artisan db:seed –class=シーダー名」です。
これでテーブルを確認すると↓になります。
今のままではページに表示されていないのでページに表示します。
MVC
Laravelでページを表示する流れですがMVC（モデル・ビュー・コントローラーの略）を使います。
流れを説明しますが色んなサイトの説明を見たら難しい言葉を使っていて全然理解できない説明が多い印象でした。
言葉で説明を書きますが理解がいまいちだと思うので併せてリンクの記事も読んだ方が理解が深まります。
MVCが分からないとLaravelの理解は絶対にできないので頑張りましょう。
- サイトを見る人が見たいページのURLにアクセスするとルーターがコントローラーに役割を分担する（ルーティングと言います）
- 役割を振られたコントローラーがモデルに必要な情報をデータベースから取ってくるように連絡してモデルがデータベースから情報を持ってきてコントローラーに渡す（データベースの情報が必要な場合）
- コントローラーが受け取った情報をビューに渡してビューがサイトを見る人にページ（ビュー）を表示する
この記事に図付きの解説があります。（この記事を読むとMVCの理解が本当に深まるので読んだ方がいいです）
ルーターは「プロジェクト名 > routes > web.php」にあるのでコントローラーの作成をします。
コントローラーの作成
「php artisan make:controller コントローラー名」でコントローラーの作成をします。
コントローラー名は「〜Controller」となりますが〜とControllerの文字の先頭を大文字にして単数形・複数形のどちらでもいいです。（StudyController・TaskController・TodoControllerなど）
ターミナルで↓のコマンドを入力します。
コントローラーを作成すると「プロジェクト名 > app > Http > Controllers > TasksController.php」にコントローラーがあるのを確認できます。
モデルの作成
現在データベースのテーブルに情報がありますがデータベースから情報を持ってこないとページに表示ができません。
そこでデータベースから情報を持って来る役割が必要になりますがそれをモデルです。
モデルの作成は「php artisan make:model モデル名」です。
モデル名はテーブル名の先頭の文字を大文字にした単数系ですがテーブル名をtasksにしたのでモデル名はTaskになります。
ターミナルで↓のコマンドを入力します。
これでモデルが「プロジェクト名 > app > Models > Task.php」 に作成されます。
ビューの作成
ビューは表示するページです。
「プロジェクト名 > resources > views > welcome.blade.php」に↓を表示するページがあります。
他に表示するページが欲しい場合は自分で作成します。
「プロジェクト名 > resources > views」の下にtasksフォルダを作成してtasksフォルダの下にindex.blade.phpを作成します。（フォルダは作成しなくてもいいですが今回は作成しています）
「プロジェクト名 > resources > views > tasks > index.blade.php」という事です。
index.blade.phpの中身は何もない状態ですがとりあえずダミーを入れます。
それではページを表示する流れについて説明します。
タスクを表示するページ（ルーティング）
「プロジェクト名 > routes > web.php」にありますがコードを↓に変えます。
4行目ですがルーターからコントローラーに指示を出すのにコントローラーに繋がないといけないからあります。
ルーティングの書き方は下記になります。
「Route::メソッド名(‘リンク名‘, [コントローラー名::class, ‘アクション名‘])->name(‘表示するファイル名‘); 」
メソッド名ですがgetにすればサイトにアクセスする時に使えます。
getやpostなど色々とありますがこの記事に解説があります。
コントローラー名は4行目に「TasksController」と記述しているのでそれを使います。
アクション名はコントローラーの中で書くメソッドの事ですがとりあえずindexとして後で記述します。
表示するファイル名はリンク名にアクセスした時に表示するファイルの名前です。
今回はトップページ（/の事）にアクセスした時にtasksフォルダの中のindex.blade.phpの内容を表示するという意味になります。
表示するファイル名は「tasks.index」になっていますが「プロジェクト名 > resources > views」の下のtasksフォルダの中のindex.blade.phpという意味です。
次はコントローラー（TasksController.php）の中にアクション（コントローラーの中のメソッド）を書きます。
タスクを表示するページ（コントローラー）
「プロジェクト名 > app > Http > Controllers > TasksController.php」を編集します。
4行目ですがデータベースの中の情報を表示するのでモデルにデータベースから情報を取ってきてもらう為に記述しています。
15行目の「Task::get();」でデータベースから情報を持ってきて$tasksに代入して$tasksから$を取ってtasksにして16行目の「compact(‘tasks’)」のようにcompactの中で使うことで$tasksを使う事ができます。
Taskはモデル名ですが「モデル::get()」の時のモデルを特にEloquentモデルといい「get()」はメソッドと言いますがEloquentモデルのメソッドは色んな物が用意されています。
それについてはこの記事で解説してますが「get()」は結果の取得ができます。
Eloquentモデルは何かというとSQLをできるだけ書くことなく、簡潔にデータベースにアクセスできるような仕組みの事です。
「compact(‘tasks’)」をcompact関数と言いコントローラーからビューに変数を渡す時に使います。
タスクを表示するページ（ビュー）
「プロジェクト名 > resources > views > tasks > index.blade.php」にtasksテーブルの内容を表示します。
index.blade.phpのコードを↓に変えます。
すると表示が↓になります。
39行目の「$tasks」がTasksController.phpの15行目の$tasksです。
表示したい内容は41行目のように「{{ }}」の中に書けばいいです。
今回はここまでで次の記事で「詳細」の表示とタスクの追加の解説をしますが↓です。
