Laravel9+React+TypeScript+Inertia.jsでのSPA開発
shun57Github
システム構成
仮想環境
- Docker
ミドルウェア
- PHP8.0
- Laravel9
- MySQL8
- Nginx1.20
- React17
- Inertia
Laravel Breezeを利用
- React
- Tailwind CSS => MaterialUIと悩んだがBootstrapっぽくて簡単そうだったので選択。
- Inertia.js
Intertia.js
API構築なしでSPAが作れる。
APIと分ける説と悩んだが、今後フロントとバックを変えることもないと思う、かつ使ってみたいという理由で選択。
Laravel開発環境の整備
Mac
-
php cs fixer：コード整形、PSR2に設定(Laravelの標準コーディングスタイル）
https://github.com/FriendsOfPHP/PHP-CS-Fixer -
PHP Intelephense：IDE補完(VSCode)
https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
Docker上
-
Larastan：静的解析ができる(標準でエラーが出ないLevel4に設定）
https://phpstan.org/user-guide/rule-levels -
Laravel Debugbar：デバッグが手軽にできる。inertia.jsでも使えるということで導入
https://github.com/barryvdh/laravel-debugbar
shun57フロントエンドの設定
Typescriptの導入
- js配下のjsファイルを全てtsxに修正し、型エラーを修正する
参考
- https://github.com/ecavalcanti/laravel-breeze-inertia-react-typescript
- Laravel 8 Breeze を React + TypeScript + sass に対応させる。
Storybookの導入
- そのまま導入すると下記パッケージの脆弱性のエラーが発生するため、resolutionsで解決
- npm-force-resolutionsを入れる
"resolutions": {
"trim": "0.0.3",
"trim-newlines": "3.4.0",
"glob-parent": "5.1.2",
"immer": "9.0.6"
}
StorybookにTailWindCSSを適用させる
-
tsconfig-paths-webpack-pluginを導入して設定を追加する
参考
shun57Renovateの導入
プロジェクトの依存関係 (Dependency) の更新を自動化するツール。（プルリク作ってくれる）
GitHubやGitLabなどで使える。
shun57Laravelのアークテクチャをどうするか？
候補
- そのままMVCを使う
- クリーンアーキテクチャ
https://qiita.com/nrslib/items/aa49d10dd2bcb3110f22 - オニオンアーキテクチャ
https://speakerdeck.com/canon1ky/laravel-x-onionakitekutiyadeshi-merutesutoqu-dong-kai-fa - なんちゃってクリーンアーキテクチャ
結論
mpyw さんがおすすめしている「なんちゃってクリーンアーキテクチャ」を採用する。
クリーンアーキテクチャはオーバースペック、オニオンアーキテクチャもEloquentを使えないため。
ただのMVCだと経験上もファットモデルorサービスになり、チームでコードがぐちゃぐちゃになる可能性が高いので見送り。
DDDについてもう少し理解を深めたらオニオンアーキテクチャも使ってみたい。
参考
shun57ログ出力
下記のQiitaを参考にDIで実装。
Inertiajs + Laravel + Reactでのエラー画面
Inertiajsのドキュメントにハンドリングの方法が記載されていたので、下記の通り実装。
shun57定数の管理にlaravel-enumを利用
PHP8.1から列挙型が追加されたが、
文献が多く簡単にファイルを作成できるので、laravel-enumを利用