Inertia(イナーシャ)とは
今回私がLaravelとVueを使ったWebアプリ作成の学習をしていた際に、Inertia.jsの存在を知った為ご紹介します。
Inertiaは日本時間 2023年1月27日にVersion1.0がリリースされました。クライアントサイドレンダリング、サーバーサイトレンダリングの両方を組み合わせたSPAの作成が可能となった仕組みです。
SPA開発時にはバックエンド側でAPIの開発をしたり、フロントエンドでルーティングを行うなど実装の複雑さがありました。ですが、Inertaを組み込むことにより、APIを構築することもフロントエンドでルーティングを行うこともなくなりSPAを作成できるようになりました。
勘違いされがちですが、Inertia(イナーシャ)はJavaScriptのフレームワークではないようです。
Laravelの開発者であるTaylor OtwellがXにて以下内容をポストしていました。
これはJSONプロトコルの仕様で、バックエンド（Laravelだけではありません！）がReact / Vue / Svelteのフロントエンドに、どのページをどのようなデータでロードするかを通信できるようにするものです。 Inertiaの様々なバックエンドとフロントエンドのライブラリは、基本的にこのプロトコルで動作するためのヘルパーを提供するだけです。 このように理解すれば、Inertiaは「完全なソフトウェア」である。
つまり、サーバーサイドとクライアントをつなぐ接着剤のようなものです。
Inertiaで何が出来るの
Inertiaはページ全体を再読み込みすることなく、一部分のみの切り替えでページ間の移動ができます。かつ、LaravelのBladeを使っているような感覚で、Vue(またはReact)を導入し、SPA開発を行うことができるようです。
Vue Routerなどを使わずにLaravelの機能だけでうまくいくってとても便利ですね。
一部分のみというのは、以下画像のように、ヘッダーとサイドメニューはそのまま。メインとなる中央部分のみ、切り替えることが可能となります。
イメージとしてはSide内にリンクがあるとすれば、リンク押下すると、黄色枠内のみ表示が切り替わります。
ヘッダーとサイドを読み込まない分、高速な処理が可能となっています。
最後に
現在のサポート
現在サポートされているフレームワークは一部のみです。
フロントエンド
- React
- Vue
- Svelte
サーバーサイド
- Laravel
- Rails