Inertia.js v2.0がリリースされていた
Inertia.jsってそもそも何なんだ
って話があるけどこれは要するにbladeの部分をまるごとReactとかVueとかSvelteに差し替える事を目的としている。ルーティングの機能などなどはlaravelのものを使って、単純にviewエンジンをうまいことこれらのjsフロントエンドに差し替えようってノリで作られている。これにより、たとえばreactならreactエコシステムを簡単に取り込む事ができるんだけど、反面bladeは当然捨てる必要がある。でもって、結構マイナーなのでちゃんとプロジェクトが完遂できるのか不安になる事も多いと思うんだけど、「まあまあ」かなというのが個人的な感想ではある(細かいことをするとハマるし、ナレッジベースとかが薄いのでchatgptに聞いてもまともに返ってこないとかあるぞい)。
いずれにせよ、フロントエンドとバックエンド分離型をちゃんとやろうと思うとある程度の工数や予算規模が必要だし、bladeでフルフルにやるのは今時なんだかなーって場合採用してみてもいいんじゃないだろーか。
ってわけで2.0が出とる
ので訳っぽいものも兼ねて以下に書いておく。ちなみに筆者はまだ使ってない。
新機能
コアライブラリが完全に書き直され、非同期リクエストをサポートするようにアーキテクチャが変更され、以下の新機能が追加された
- ポーリング (ブラウザーの定期リクエスト送信によるセッション維持とか情報更新とか)
- プリフェッチ(事前取得する場合のオプション(属性)追加)
- 遅延プロップ(初期レンダリングと後からレンダリングするものをわける時に使う)
- プロップマージによる無限スクロールサポートとか。これはいずれどこかで書きたい。
- スクロール時のデータ遅延読み込み
さらに、セキュリティが重要なプロジェクト向けに、Inertiaは履歴データをログアウト時にクリアするための履歴暗号化APIも提供している。
依存関係のアップグレード
Inertia.js v2.0にアップグレードするには、まずnpmを使用して、以下のクライアントサイドアダプターをインストールする
Vue
npm install @inertiajs/vue3@^2.0
React
npm install @inertiajs/react@^2.0
Svelte
npm install @inertiajs/svelte@^2.0
次にinertiajs/inertia-laravelパッケージを2.x devブランチにする
composer require inertiajs/inertia-laravel:^2.0
破壊的変更
Laravel 8および9のサポート終了
Laravelアダプターは、最低でもLaravel 10およびPHP 8.1を必要とする。
Vue 2のサポート終了
Vue 2のアダプターは削除。Vue 2は2023年12月3日にサポート終了したため、このタイミングでの削除となった。
Router replace メソッド
以前非推奨だったrouter.replaceメソッドが再実装されたが、その機能は変更され、現在は、クライアントサイドのページ訪問に使用されることとなった。
サーバーサイドの訪問で現在の履歴エントリを置き換えたい場合は、replaceオプションを利用する
router.get('/users', { search: 'John' }, { replace: true })
Svelteアダプタの変更
- Svelte 3のサポート終了（2023年6月20日）
-
rememberヘルパーはuseRememberに名前が変更され、一貫性が持たせられました。 - app.js のセットアップコールバックが更新され、Appコンポーネントの初期化時にプロップを渡す必要がある。app.js内のセットアップを確認すること。
- ssr.js でセットアップコールバックが必須となった。ssr.js内のセットアップを確認すること。
パーシャルリロードがasyncになった
以前、Inertiaのパーシャルリロードは同期的だったが、v2.0で非同期に変更された。
この変更は大部分のコードでokのはずだけど、同期的なリクエストに依存していた場合は、コードの調整が必要かも。
まあそもそもパーシャルリロードの機能がちょっと特殊というのは前の記事でも書いた通りなので、ここでちょっと書いておくのもアリか...
ってわけで
使ってみないといけないね。laravel11 + breezeとかで、どういう感じになるか、そのうち書いてみよう。新機能を中心に。
Discussion