やってみたLaravelチュートリアル②

# はじめに 🐢
[Laravelの教科書](https://amzn.asia/d/1xFOXD5)という本を見かけたので、
勉強のために、チュートリアルとして頭からやってみました。
その個人的な記録です。

本は 350ページ、12章 ありますが、内容的に
2～10章が手を動かしてやる系ぽいです。

環境構築の第２章は以下で済ませましたので、
⇒ [やってみたLaravelチュートリアル①](https://qiita.com/tmatsumor/items/2cc8f9ac49a6fa28ad37)

次の第３章、第４章に進みます。

:::note info
本が手元にあることが前提となっています
:::

# Ⅲ．Laravel の仕組み
第３章では、イラストを交えて Laravel のフレームワークの
MVCモデルについて、分かりやすく解説されていました。
## １．MVCモデルについて
モデル・ビュー・コントローラに加え、ルーターが入ります。
ルーターは http リクエストの処理への振り分けって感じです。
MVCについては、以下など諸々解説を参照。
- [Model View Controller](https://ja.wikipedia.org/wiki/Model_View_Controller)
- [MVCモデル + router(ルーター)](https://qiita.com/OhshimaRyo/items/310a098418cb09b24285)

:::note info
教科書ではキャラクターを使って分かりやすく解説してあります。
:::

## ２．Laravel のディレクトリ構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/a323eebb-47cf-d9e6-698a-df66d3eeebb6.png)
test-project 配下に 11 フォルダがあります。
1. app
コントローラやモデルなど、主なコードが入る場所です。
1. bootstrap
通常、このディレクトリ内を編集することは無いそうです。
1. config
設定用ファイルが入ります。
1. database
DB 関連のディレクトリ、ファイルが入ります。
1. node_modules
Node のモジュールが入ります。
1. public
公開ディレクトリです。
1. resources
ビューが入ります。
1. routes
ルート設定用のファイルが入ります。
1. storage
画像やログなどが入ります。
1. tests
PHPUnit などテスト用フレームワークのファイルが入ります。
1. vendor
ライブラリ関連。直接編集しません。

::: note info
app, resources, routes が主役っぽい
:::

# Ⅳ．コードを書いてみよう
第４章に入ります。
教科書では ルーター、コントローラ、ビュー、コンポーネント
について、節を立てて解説してあります。
## １．ルーター
ルート設定は routes ディレクトリの中にあります。
Breeze を入れると、auth.php が入るそうです。
### ルートの設定
見てみると、なるほど！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/e20fb9fe-2b83-546c-5c0d-6f08356316f5.png)
use で使うコントローラを読み込んでいます。
ミドルウェアは、コントローラの前後に挟める処理との事。

:::note info
Route::middleware('guest')->group(
これは、グループ化したルートに対し、ミドルウェアを適用している。
group の中に、対象となるルートが入ってる。
これらに対し、guest を適用しているっぽい。
:::

Route::get の第一引数は、ドメイン以下のURL、
第二引数の配列には、コントローラ名とメソッド名が入る模様。
アドレスとコントローラの紐づけを行い、
それらのルートに対して、一括でミドルウェア：guest を適用している、と。

::: note info
メソッドチェーンで続く ->name('register') は、
名前付きルートという奴らしい。後でこの名前で呼び出せるとの事。
:::


## ２．コントローラ
コントローラはコマンドで作るようです。
本に従い、TestController を作ります。

:::note info
VS Code のターミナルから実行しました。
Docker が落ちていたので、デスクトップ起動しました。
sail も落ちていたので、cd して up しときました。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/ec75a3e1-e922-7e56-e5c4-dbaea3dcc3ed.png)
app/Http/Controllers/TestController.php が確かにできている！
あとは、後で参照する test メソッドを足しときます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/6b67c635-9f59-1567-9085-68a785d7182e.png)
そして、対応するビュー test ファイルを resources/views の中に作ります。
test.blade.php ファイルを作り、中に任意のテキストを入れます。

::: note info
Bladeファイルは .blade.php が拡張子とのこと。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/1bc7db40-37f1-01da-8602-0bcfc92a9bdd.png)
あとは、教科書に従い、ルート設定を行います。
use 宣言と、ドメイン名/test の get リクエストに対する
コントローラ名とメソッド名を設定すればOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/bd04b5a0-b662-55a9-b991-683330404725.png)
ブラウザで http://localhost/test を叩くと、画面が表示されました。

## ３．ビュー
すでに上記にて test ビューを作成しました。
次はBlade のディレクティブも使ってみます。

::: note info
Blade はテンプレートエンジン。
Blade のディレクティブはビューの中で使える構文。
:::
教科書では、ビューの welcome.blade.php に
@for ディレクティブ を追記していました。

教科書通りに追記し、localhost を叩くと以下の画面になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/62854499-1c02-e029-6fdf-bafa6cfcae0b.png)
また、ビューファイル上での変数利用例も示しています。
教科書に従い、記述を入れると。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/b62d077e-2686-129c-db19-db8ecd1f9214.png)
確かに。

## ４．コンポーネント
教科書では、見栄えの良いページを作るためのテンプレートと、
部品群である components について解説しています。

また、Tailwind CSS での外見カスタマイズについて触れています。
デザインを改善する際に、またよくよく参照します。

::: note info
Laravel Vite とコンパイル、ホットリロードについて
章末に記述があります。これも知識として押さえておきます。
:::


# まとめ
以上、第３，４章でした。
ここが概念的に一番とっつきにくいところかと思います。
しかし教科書では、イラストや単純な例を重ねて、
体系的に解説されていると思いました👍
分かりやすかったです。

次は、いよいよ５章以降、データ作成とモデルに進んでいきます。

# 参考
[【Laravel】ルーティングのミドルウェアとは何か？使い方を実例で解説](https://prograshi.com/framework/laravel/midleware/)
[【Laravel】名前付きルートの使い方について](https://qiita.com/tamakiiii/items/f474c79a9e50ddc59f06)
[【PHP】Laravelのbladeテンプレートを理解する。](https://qiita.com/shizen-shin/items/24d22265db47d7fb3c3d#%E3%82%A2%E3%83%AD%E3%83%BC-%E3%81%AE%E6%84%8F%E5%91%B3)