🙆

【Monolithic】Laravel + ReactでWebアプリケーションを作る

2024/11/22に公開

Laravel11の解説が欲しかったので、自分がやったことのメモ。

環境

PHP 8.3.12 (cli) (built: Sep 24 2024 18:08:04) (NTS)
Laravel Framework 11.33.2
react 18.2.0
typescript 5.6.3
tailwindcss 3.2.1
Breeze

Laravel sailで環境構築

これまではyamlファイルをなんとかこねくり回して作っていたものの、エラーも多くて何回も泣きを見てきました。でもLaravel sailはyamlファイルなしでDocker環境を作ってくれるのでとてもいいです。

curl -s "https://laravel.build/app" | bash

カレントディレクトリの直下にapp/が作成されます。appの部分は適宜名前を変更してもOK。

cd app/　//自分の用意したディレクト名
./vendor/bin/sail up -d

dockerが立ち上がったら下記コマンドを起動。
テーブルが作成されてサイトの表示ができるようになります。
逆にここまでやらないと、エラーになります。

./vendor/bin/sail artisan migrate

-dをつけないとdocker compose同様ターミナルが占拠されるので注意。
http://localhost/へアクセスして確認。

sailとphpと./vendor/bin/sailの使い分け学ぶ

ちなみにartisan migrateをしなかったためエラーになった件、学習し始めた当初は全然心当たりがなくChatGPTに質問したら酷く沼りました。

SQLSTATE[42S02]: Base table or view not found: 1146 Table 'laravel.sessions' doesn't exist

（↓ChatGPT提案の手順）
php artisan session:table
php artisan migrate

GPTもテーブル作れとのことでしたが、この時点でphp artisanとsailの違いを理解しておらず...()
php artisan migrateはinfoが出て成功するのに、このときはエラーが残ったままでした。
キャッシュのせいかな？と思ってdocker-compose down --volumesまでしてしまい、Dockerの履歴をきれいに無くししばらく寝込みました。私の屍をみんなは超えて下さい。

痛い勉強代のおかげで
php artisan migrateと./vendor/bin/sail artisan migrateは似て非なるものと理解。
ついでに./vendor/bin/sailのエイリアスのパスを通しておけばsailと打つだけでショートカットもあることを理解しました。
（エイリアス設定方法はこちらhttps://qiita.com/tomo332/items/f6c8c1b4fbcf1d828940）

エラーの解消はこのサイトを参考。

要は、artisan migrateして、テーブルを作成しちゃえば解決です。
それでも解決しないときはこちらも確認↓

Breezeで認証機能を簡単に付与

./vendor/bin/sail composer require laravel/breeze --dev
./vendor/bin/sail artisan breeze:install react --typescript
sail npm install
sail npm run dev

これも一瞬でインストールできました。
react --typescriptなnpxの時と書き方が紛らわしいので要注意です。もちろん、--typescriptがないと.jsxになります。

Inertiaとは

参考サイトでは下記のような説明があります。
Inertiaはフロントエンドとバックエンドを繋ぐ橋のような機能なんですね。本来なら設定を細々しない溶けないけど、、BreezeならインストールついでにInertiaも設定済みにしてくれるってことことかと解釈しました。違ったら誰かご指摘ください。

今回はフロントエンドに React を使います。その場合、Inertiaというツールを使うと、フロント側（React）とバックエンド側（Laravel）の連携を自動で行ってくれます。Inertiaを導入する場合は色々と設定しなければいけないことがあるのですが、Laravel Breezeのスターターキットを使うと、それら諸々の設定も自動で行ってくれるのでさらに便利です。
https://qiita.com/Sho-taro/items/820e4117c5b5f4c6717f

インストール完了

localhostの右上にloginとregisterが現れたら完了です。

ファイルも全てtsxまたはtsで制作されています。

一度jsxで構築してしまうと後から変更が面倒なので、消して作り直した方が早いです。
強いエンジニアだと、「その状態から立て直してこそエンジニアだろ！」と怒るかもしれませんが、タイパが悪いので！！！！サーセン！！！！っとエア謝りしながらコーディングに進もうと思います。

追記：setData('remember', e.target.checked)のエラー

2025年1月20日先週まで新規作成は上記で問題なかったのに、新しいエラーが出てきたので追記。

resources/js/Pages/Auth/Login.tsx:81:53 - error TS2345: Argument of type 'boolean' is not assignable to parameter of type 'false'.
81                                 setData('remember', e.target.checked)
                                                       ~~~~~~~~~~~~~~~~
Found 1 error in resources/js/Pages/Auth/Login.tsx:81

一旦エラーを消す処理をします。

<Checkbox
    name="remember"
    checked={data.remember}
    onChange={(e) =>
    setData('remember', e.target.checked  ? false : false)
   }
/>

これに関してはnodeが古くなっていないか、viteが古くなっていないか、バージョンを確認して適宜アプデが必要です。