Inertia.js 2.0 → 2.2まとめ：Wayfinder・Form・InfiniteScroll の全貌
ここでInertia.js 2.0の記事を書いていたけど、結構サボってた間に2.2になっていた、まあ大体の内容は掴んでいたんだけど、この記事で一度まとめておく事にする。
TL;DR
- Wayfinder
-
<Form>の追加 - 無限スクロール
リリース情報
重要な機能追加
| バージョン | 主な新機能 | 概要・補足 |
|---|---|---|
| v2.0.6 | Wayfinder | 型安全なルーティング補助API。ルート解決やリンク生成を容易に。 |
| v2.0.7 | Nested form paths／hrefにObject型対応 |
form.setData('user.name', …) 等が可能に。 |
| v2.0.8 | deepMerge props | ネストしたオブジェクト・配列を安全にマージ。 |
| v2.0.9 | Custom URL protocol |
custom:// のようなスキームを許可。 |
| v2.0.12 | Prefetch header (Purpose: prefetch) |
サーバー側でプリフェッチ要求を識別可能に。 |
| v2.0.15 | Form state reset API／Client Side Visit callbacks／Path Traversal対応 | フォームリセットの簡略化、イベントフック追加。 |
| v2.1.0 | <Form> コンポーネント導入／<Link as> カスタム要素 |
Inertia公式フォーム統合。UIコンポーネントと統合しやすく。 |
| v2.1.1 |
<Form> 拡張：onSubmitComplete／disableWhileProcessing／reset(fields)／defaults()
|
実用的フォーム操作APIを多数追加。 |
| v2.1.2 | Wayfinderをrouterで利用／Prefetchタグ無効化／FormのresetOnSuccess等 |
ルーティングとキャッシュ制御の統合。 |
| v2.2.0 | <InfiniteScroll> コンポーネント／Client-side props update helpers／Nested prop path merge |
タイムライン型UI・クライアントprops更新を正式サポート。 |
| v2.2.1 | Remember Infinite Scroll state | スクロール位置・ページング状態を保持して復元。 |
| v2.2.4 |
<Link preserve-url> prop |
遷移時に現在のURLパラメータを保持可能。 |
2.0から2.1
2.0から2.1は主にform系統の変化である。特に重要なのは<Form>コンポーネントとWayfinderである。特にWayfinderはstarter kitに全面的に採用されるようになったので理解しておく必要がある。つまりWayfinderって何？ という知識は辛くなってきている。これはAI駆動開発する場合でも最新知識へアップデートが必要
2.1から2.2
こちらは無限スクロールに関連するものになった。かつていろいろ書いていたドキュメントがobsoletedになりますねw
Wayfinderとziggy
Wayfinder以前はziggyがやっていた。まずこの違いを理解しておこう。
Ziggy式
Route::get('/users/{user}', [UserController::class, 'show'])->name('users.show');
とかのrouteがあった場合、これはphpなのでjsから読むことは当然できないわけだが、ここで
route('users.show', { user: 1 }) // => /users/1
このようにしてreactとかでroute()関数でリンク先を変換できた。使ったことないけどvueも多分そうなんだろう
Wayfinder式
これは先程のphpを表現する場合
import { route } from '@inertiajs/wayfinder'
<Link href={route('users.show', { id: user.id })}>
{user.name}
</Link>
一見同じじゃねえかと思うけどrouteヘルパのimport元が置き換わっているので同じではない。この機能についてはこの記事だけでは解説しきれないので一応ポインタだけ貼っておく。
少なくとも、今後route()は全部wayfinderに置き換わっていく事になるだろうし、ziggy式は少なくなっていくはず。これに関してはstarter kitの使われ方を見る記事を別途用意する、予定。
<Form>コンポーネント
これは2.1での目玉機能。
import { Form } from '@inertiajs/react'
import { store } from 'App/Http/Controllers/UserController' // Wayfinder が生成する関数
export default function CreateUser() {
return (
<Form action={store()} method="post">
<input type="text" name="name" />
<input type="email" name="email" />
<button type="submit">Create User</button>
</Form>
)
}
こんな書き方になる。つまりuseForm()が不要になる(場合がある)。ここまで来るとほとんどHTML1.0やな。<Form>個別の話も流石にこの題目では書ききれないのでいずれどこかで書きたいですな。
無限スクロール
オフィシャルツイートより
ここでの目玉が<InfiniteScroll>である事を強調しているがスレッドを見ていく
サーバーサイドでは、新しく Inertia::scroll() メソッドが追加されましたってことだけど、これはちょっとすぐ理解が難しい
「クライアント側では、コンテンツを <InfiniteScroll> コンポーネントで包むだけです。それで完了です。」
「ページの末尾に到達すると、自動的に次のデータの塊（ページ）を取得してくれます。」
ということなので、<InfiniteScroll>だけ見ておけばよいということになる
「5ページ目までスクロールしてページをリロードしても心配いりません。」
「リロード後もそのページ（5ページ目）から復元し、上方向にスクロールすると、前のページのデータを自動的に補完してくれます。」
「上下どちらの方向にも対応した双方向無限スクロールが、設定なしでそのまま使えます 💪」
リバースモードは、チャットアプリやタイムラインに最適です 💬
読み込み方向を反転し、上にスクロールすると“次のページ”を、下にスクロールすると“前のページ”を読み込むようになります。
「自動読み込みに加えて、“手動モード” も使えます。たとえば『もっと見る』ボタンのような、自分で用意したUIで追加データを読み込むことができます。」
「さらに、一定回数自動読み込みをしたあとで、手動モードに切り替えることもできます 👌」
「このコンポーネントは非常に柔軟で、細かく設定・カスタマイズできます。」
「読み込みのしきい値を設定したり、デフォルトのローディングインジケータを指定したり、
独自のトリガー要素を用意したり、特定のスクロールコンテナ内で動作させたり、
プログラム的に制御したりと、さまざまなカスタマイズが可能です！」
「詳細なドキュメントが用意されているので、ぜひチェックしてください！📖」
という感じなのでこれもまた別途チェックする事にする。
Discussion