wayfinder

Wayfinder

手順

Wayfinder は、Laravel のコントローラーとルートに対応する TypeScript の関数と型を生成し、クライアント側のコードにインポートできるようにします。型安全性を提供し、バックエンドのルートとフロントエンドのコードを自動的に同期します。

開発ガイドライン

• ツリーシェイキングのため、常に名前付きインポートを優先してください（例：import { show } from '@/actions/...'）
• デフォルトのコントローラーインポートは避けてください（ツリーシェイキングを妨げます）
• エラーがある場合は、ルートを変更した後に php artisan wayfinder:generate を実行してください

機能の概要

• フォームのサポート：--with-form フラグを指定して .form() を使用すると、HTML フォームの属性を生成できます — <form {...store.form()}> → action="/posts" method="post"
• HTTP メソッド：特定のメソッドを指定するには .get()、.post()、.patch()、.put()、.delete() を呼び出します — show.head(1) → { url: "/posts/1", method: "head" }
• 呼び出し可能なコントローラー：関数として直接インポートして呼び出せます。例：import StorePost from '@/actions/.../StorePostController'; StorePost()
• 名前付きルート：コントローラー以外のルートでは @/routes/ からインポートします。例：ルート名 post.show の場合、import { show } from '@/routes/post'; show(1)
• パラメーターバインディング：ルートキー（例：{post:slug}）を検出し、一致するオブジェクトプロパティを受け取ります — show("my-post") または show({ slug: "my-post" })
• クエリーのマージ：window.location.search とマージするには mergeQuery を使用し、削除する値には null を設定します — show(1, { mergeQuery: { page: 2, sort: null } })
• クエリーパラメーター：オプションで { query: {...} } を渡すとパラメーターが追加されます — show(1, { query: { page: 1 } }) → "/posts/1?page=1"
• ルートオブジェクト：関数は { url, method } 形式のオブジェクトを返します — show(1) → { url: "/posts/1", method: "get" }
• URL の取得：.url() を使用して URL 文字列を取得します — show.url(1) → "/posts/1"

例

// Import controller methods (tree-shakable) import { show, store, update } from '@/actions/App/Http/Controllers/PostController'

// Get route object with URL and method...
show(1) // { url: "/posts/1", method: "get" }

// Get just the URL...
show.url(1) // "/posts/1"

// Use specific HTTP methods...
show.get(1) // { url: "/posts/1", method: "get" }
show.head(1) // { url: "/posts/1", method: "head" }

// Import named routes...
import { show as postShow } from '@/routes/post' // For route name 'post.show'
postShow(1) // { url: "/posts/1", method: "get" }

Wayfinder + Inertia

アプリケーションで Inertia の <Form> コンポーネントを使用している場合、Wayfinder を使ってフォームのアクションとメソッドを自動生成できます。