Laravel のスターターキットでinertia + vueの開発環境を構築します。WSLを利用したこちらの記事で簡単に開発環境を作ることができます。
今までの経験では、知らない技術を組み合わせて開発環境を作るときにそれぞれの技術要素の設定をして動作させるのが一番苦労させられました。そういう手間がなくてもすぐに開発ができる状態を提供してもらえるなんて便利な世の中になったものだなと思います。
シングルページアプリケーションとマルチページアプリケーション
WEBサイトは複数のページで構成されていて、アプリケーション開発において複数のページを別々のファイルで構成するマルチページアプリケーション（以下MPA）が昔は主流でした。また、ページを表示するときは、全ての情報をダウンロードして表示します。
一方、シングルページアプリケーション（以下SPA）はページを構成する部品単位で開発し一部の部品を更新するだけの場合、該当の部品に対して必要なデータのみをやり取りします。近年はSPAで作成されるWEBアプリケーションが増えています。MPAよりSPAのほうがデータのやり取りや更新箇所の限定によりユーザー操作の効率が向上するためです。
そもそもWEBページの画面構成は多くの場合にヘッダー・フッター・メニュー・コンテンツのような部品になっています。さらにヘッダー・フッター・メニューは共通で、コンテンツが変わることでページ遷移する構成です。
MPAだとページ遷移するときに変わらない共通部分も含めて全部のデータをやり取りしてページを表示するのに比べて、SPAはコンテンツのみやり取りをするだけで済みます。
Laravel でSPAを開発する場合の問題点
LaravelはMPAで開発される前提でいろいろな機能が実装されてきたため、SPAで作成しようとするといくつかの機能を制限するか使わないようにしないとならないです。具体的にはルーティングやBladeテンプレートなどです。
また、サーバーサイドはRESTなどのWebAPIとしJSONデータを返す仕組みで作成し、クライアントからはAjaxなどを使ってデータのやり取りを実装するのがよくある手法です。さらにWebAPIへのアクセスが認証済みかどうも独自に実装が必要になってきます。そしてサーバーサイドとクライアントサイドのソースが別々のリポジトリで管理されがちです。
inertiaの役割
SPAで構築するときの上記の問題を解決するためにフロントエンドでは<Link>コンポーネントをinertiaが提供します。そのコンポーネントはクリックを遮断してXHRにリダイレクトしてサーバーサイドにリクエストを送信します。
サーバーサイドでもinertiaのメソッドを使うことで、MPAでコントローラーからビューにレスポンスを返す今までの記述形式を実現しています。
以上の仕組みがあることでMPAでのフレームワークの流れが変わることなく開発することを実現しています。
まとめ
LaravelでSPAを開発する場合の問題点を開発者は気にすることなく、通常通りLaravelの機能を使って開発することが出来て、ソースもサーバーサイドとクライアントサイドが分割されずに管理出来ます。
スターターキットを利用すれば、inertiaのインストールの手間も省けて開発当初から認証機能が実装済みかつLaravelやinertiaの各種設定も済んだ状態から始められます。必要なリソースを必要な開発にだけに集中させること出来ます。
次回はinertiaの公式ドキュメントを参考にスターターキットで利用されている機能を紹介します。
