LaravelはMVCモデルを採用しているが、ViewにReactやTypeScriptを追加してみると
用語が多くて覚えずらい。そこで、左脳を諦めて右脳に頑張ってもらう事にした。
データの流れ
まず、サーバー上のLaravelに閲覧者がアクセスすると
①ルーティングが受け取ったURLから対応するControllerを選択する。
②Controllerは表示すべきデータや、保存したいデータがあればModelを呼び出し、
処理に応じたSQLを作成させる。
③DBから取得したデータをViewに渡し、テンプレートに組み込み、表示させる。
概ねMVCモデルはこの流れでほぼ一緒である。
Viewの中身
LaravelのViewにはBladeと言うPHPテンプレートエンジンが採用されており、
PHPテンプレートにいろいろな便利機能を追加できるようにしている。
その便利機能の一つがViteである。
Viteはフロントエンド・ビルド・ツールで
・bundle
・transpile
・minify
などで、CSSとJavaScriptファイルを最適な本番環境用アセットに変換してくれる。
また、PHPテンプレートで使えるJavaScriptをリンクしてくれる。
この、JavaScriptをReactやTypeScriptに変更する事も行ってくれる。
上図のようにPHPテンプレートにReactとTypeScriptの記述を可能とし、コンパイルにより、
最適な各種ファイルを作成する。
Viewは表示方法を処理する機能をまとめたモジュールである。つまりフロントエンドで作る
表示コードを作成できる事が求められる。
ここでややこしくなるのが、バックエンドでフロントエンドを作成するという、理解がしずらい
事を行うことである。
