実施すること
主にReactのコーディングの正解を知る目的で、LaravelとReact（TypeScript）でTODOアプリを作成していきます。
今回は以下のYoutube動画を見ながら、TODOアプリを作成します。
React + Laravel SPA開発講座
動画ごとに見出し・PRを作成し、（自分用に）概要をまとめながら進めていきます。
環境
Laravel - 10.7.1
SQLite - 3.39.5
#01~03 - アプリケーションのデモ等
使用するライブラリ
-
React Query：サーバからデータを取得する際に利用する
-
SQLite
- 軽量なDB。サーバーとしてではなく、アプリケーションに組み込んで利用する（database.sqliteというファイル）
- Laravelにも標準で用意されている
- 【デメリット】ファイル形式なのでセキュリティ対策を自身でする必要がある
#04 - TODOリスト一覧APIの作成
// リソースコントローラーを使用した場合の書き方
// @see: https://www.wakuwakubank.com/posts/454-laravel-resourcefull-controller/
Route::apiResource('tasks', TaskController::class);
#5 - ユニットテストの設定と実行
sqlite関連のエラーにいくつか遭遇しました。
遭遇したエラー
vendor/bin/phpunit 実行時エラー「Your XML configuration validates against a deprecated schema」の対処法
→以下のコマンドでphpunit.xmlを更新
vendor/bin/phpunit --migrate-configuration
【Laravel】『Database does not exist.』エラーの原因と対処法
→環境変数の読み込みをなくして直接database.sqliteの完全パスを指定するように修正
#6 LaravelでCRUD APIの作成
App\Models カラムの型を指定する場合は$castsを使用する
研修で作成しているアプリのbooleanも0or1で返ってきてしまっているから、この方法でリファクタしてみるのもありかも
protected $casts = [
'is_done' => 'bool'
];
Laravel10の日本語化
以下のサイトを参考にしました。
Laravel 9.x validation.php言語ファイル
（Laravel10のlangフォルダはプロジェクトディレクトリ直下という記事も見受けられましたが、上記サイトの方法だとresourcesディレクトリ下でも日本語対応できてますね。。）
#7 LaravelにReact.jsとTypeScriptをインストール
LaravelにReact.jsとTypeScriptを自身で初インストール。
勉強なる。。
Viteを使用して開発環境構築
動画ではLaravel Mixを使用していたが、Laravelのバージョン的な問題でViteを使用。
以下の記事を参考に開発環境を構築
【Laravel9系】 Laravel Sail Viteを使ってReact TypeScriptの開発環境を用意する。
- 研修で作成しているアプリのディレクトリ構造はjsディレクトリ下にtsファイルがあったりするので、今回ディレクトリ構造をきちんと整理できてよかった。
tsファイルの表示が可能な状態まで持ってこれました。
#10 AxiosとReactQueryでAPIからデータを取得する
ReactQuery
- データ同期処理に活躍するライブラリ
- 頻繁な更新、キャッシュ、サーバーとの非同期通信時処理のuseEffect, useStateを置き換えて、よりシンプルな書き方にする
以下のサイトがわかりやすい