いくつかの破壊的変更に注意する必要があるInertia 3
ここまで、Laravel 13で導入されたAI以外の新機能を2つ紹介しました。
最後に、Laravel本体から離れて、Inertiaに話を移していきます。Laravelのバージョン13がリリースされたほぼ直後ぐらいに、Inertiaのメジャーアップデートであるバージョン3もリリースされました。このアップデートでいくつか破壊的変更が施されています。
今回はそのうち主要なものを4つ、リファレンス的に紹介していきます。なお、Inertiaが何かに関しては、こちらの記事を参照してください。
バンドルされなくなったライブラリー
Inertia 3で含まれなくなったライブラリーとして以下があります。これらを利用する場合は、記載の代替手段を採用してください。
- Axios：標準のfetch()関数などを利用する。
- qs：Inertiaビルトインのクエリ文字列を利用する。あるいは、必要に応じて別途qsライブラリを追加する。
- lodash-es：es-toolkitに置き換えられたのでそちらを利用する。あるいは、必要に応じて別途lodash-esライブラリを追加する。
エラーイベント名の変更
アプリケーションで一貫したエラーハンドリングを行いたい場合、app.jsに、次のrouter.on()の実行コードを追記します。
router.on("エラーイベント名", (event) => {
:
});
その際のエラーイベント名が、表4のように変更になっています。
| v2までのイベント名 | v3でのイベント名 | 内容 |
|---|---|---|
| invalid | httpException | サーバ側処理でエラーが発生した場合のイベント |
| exception | networkError | ネットワークそのものに障害が発生した場合のイベント |
キャンセル処理メソッドの変更
リクエスト処理をキャンセルしたい場合は、これまではrouterオブジェクトのcancel()メソッドを実行していました。これがcancelAll()メソッドと、メソッド名が変更になっています。
<script setup lang="ts">
import { router } from "@inertiajs/vue3";
:
const cancelAllRequests = () => {
router.cancelAll();
};
</script>
<template>
<button v-on:click="cancelAllRequests">リクエストをキャンセル!!</button>
</template>
プログレスバーの表示と非表示
Inertiaには、非同期処理など、時間がかかる処理の場合にプログレスバーを表示させる機能があります。そのプログレスバーを表すオブジェクトprogressをインポートして次のように利用できます。
<script setup lang="ts">
import { progress } from "@inertiajs/vue3";
:
const handleHide = () => {
progress.hide();
};
const handleReveal = () => {
progress.reveal();
};
</script>
<template>
<button v-on:click="handleHide">非表示</button>
<button v-on:click="handleReveal">表示</button>
</template>
このhide()メソッドとreveal()メソッドの別名インポートとしてhideProgress()とrevealProgress()というのがありましたが、これが削除されました。バージョン3からは、上記コードを利用します。
まとめ
Laravelでの変更点を紹介する本連載の第2回は、いかがでしたでしょうか。
今回は、バージョン13で導入されたAI以外の新機能2つと、Inertia 3での破壊的変更を4つ紹介しました。Inertiaのようなエコシステムも含めて、年々進化していくLaravelに今後も注目していきたいと思います。
