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

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

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

2, 3-4, 5-6, 7-8, 9-10 ぐらいでやれそうかな。

まずは、第２章の環境構築を進めます。

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

# Ⅱ．環境構築

## １．Laravel Sail のインスコ

Windows ユーザーなので、WSL 2 をまずは準備します。
なお、OS は物理マシンとしました。Win10 の 22H2 です。

:::note info
最初は仮想マシンで進めたのですが、仮想化云々エラーが出たので
とっとと止めて、サラの物理マシンにしました。
:::

本の通りに、PowerShell で wsl 2 をインストールしました。
Ubuntu のユーザーを作り、Docker Desktop をインスコしました。
ここまでは順調です。

## ２．プロジェクトの作成

ubuntu のシェルを起動し、テストプロジェクトを取得します。

:::note info
最初 Docker is not running. と出ましたが、
Docker Desktop を起動すると解決しました。
タイミングが早すぎたせいかもしれないｹﾄﾞ
:::

順調に進んでるみたいです。
結構時間がかかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/cbbb9809-62f8-9ac9-020c-ad70d8e63d04.png)
完了！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/bbdc98af-d482-8c57-9956-f926a76c7917.png)

終わったら、sail up して Laravel Sail を起動します。
これまた、結構時間がかかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/bb0fdb2a-ec91-0e50-737b-22d5913db222.png)

:::note info
初回の sail up を待っている間に、後述する
［VS Code の準備］を進めておけば良いかと思います。
:::

しばらく経つと、上図のようにメッセージが繰り返されますが、
これはコンテナ起動中のステータスっぽいので、
この状態で、sail up 完了と見て良さそうです。

ブラウザで http://localhost/ を叩くと、Laravel 起動してます。イェイ！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/3df8dc4b-a77a-9290-889d-4d832f0eb7ac.png)


## ３．VS Code の準備
Visual Studio Code をインストールします。

本に従い、拡張機能をインストールしておきます。
日本語化パック、Remote Development、Tailwind CSS IntelliSense、
Laravel Blade Snippets を入れておきます。

:::note info
教科書では sail のエイリアス設定の項がありましたが、
私は苦にならないのでスキップしました。
:::

## ４．phpMyAdmin の追加

ubuntu のシェルを呼び出し ~/test-project の docker-compose.yml を編集します。
教科書に従い、phpmyadminを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/64cc31be-2843-8412-f41c-972137c0c1aa.png)
selenium の下、network の上に挿入しました。

:::note info
VS Code にて「WSLでフォルダーを開く」が出てこなかったため
シェルから nano で編集しましたが、VS Code の
リモートエクスプローラーから繋いで test-project 下の 
docker-compose.yml をVS Code で編集すれば良かったみたいです。
:::
http://localhost:8080/ で phpmyadmin にアクセスできます。
sail / password でログインできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/dcb1da4f-a262-7e2b-b457-f1aef828c274.png)

## ５．ユーザー登録・ログイン機能の追加
教科書では Laravel Breeze を使って、ユーザー認証機能を追加しています。
まずは、この Breeze をインストール。
sail up した状態で、composer を実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/4de96b73-d2bd-ec99-e8e7-2b745ae87a20.png)
そして breeze をインストール。
いくつか質問をされますが、デフォルトのままでOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/1a6fe3a7-1f7e-2dce-f589-4c76b13e5f7b.png)
教科書に従い、マイグレートしてテーブルを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/b3eff0fd-b743-3733-e613-ba81be064a1a.png)
ブラウザに戻り、localhost を叩くと、Register メニューが増えています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/9a26f760-d83c-33f4-2392-8314062d9b25.png)
早速ユーザーを登録してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/27323365-219f-da33-11b3-f455ef2fff80.png)
［REGISTER］を押すと、登録＆ログインが実行されます。
ログイン状態に遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/585efbfe-9aa8-602f-f53a-d7faf8f7660a.png)
左上メニューの Profile から ユーザー情報を編集・削除ができますし、
ログアウトすることもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/7f56fb6a-2f5a-f0e1-99df-92d2c1c3818f.png)
こちらから、またログインできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/cf0a2312-b3fc-33d3-c33f-249a9128bdfd.png)
このように、ごく簡単にログイン機構を実装できました。
教科書に従い、phpmyadmin にログインすると、
test_project データベースの users テーブルに、
hoge ユーザーのレコードが登録されていることが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508336/9a00fca6-9c13-c7d8-af20-83916b2a771a.png)
## ６．日本語化
割愛します。教科書参照。
## ７．開発・本番環境の切り替え
割愛します。必要に応じて参照します。

# まとめ

以上、第２章でした。
つまづく事も無く、スムーズに Laravel sail の世界を覗けました。
素晴らしい教科書だと思います。

また、次は３章以降に着手しようと思います。