# TanStack Start でアプリ内フィードバックフォームを作る > TanStack Start のアプリ内フィードバックフォーム。セッションのミドルウェア付きの POST サーバー関数、文脈としてのルート ID、リクエストヘッダーから読むページを組み合わせます。 公開日 2026-10-25 · https://ikiform.com/ja/guides/feedback-form/tanstack-start フィードバック用の POST サーバー関数を書き、セッションを読んでユーザーを `context` に入れる関数ミドルウェアを付けます。関数は、そのユーザー、リクエストの `Referer` から取ったページ、一致したルート ID を評価に加え、シークレットキーを付けてフォームバックエンドに転送します。ログイン後のレイアウトルートにフォームを 1 回マウントすれば、どの画面にいるかを自分で把握します。 [メインガイドの TanStack Start タブ](https://ikiform.com/ja/guides/feedback-form.md#form)では、誰からでもページのフィードバックを送信し、ページはブラウザーで設定します。ログインが必要なアプリの中なら、もっとうまくできます。誰が送っているかはサーバーが、どの画面が開いているかはルーターが知っています。アカウントの準備、キー、許可ドメインについては[サーバーのドキュメントガイド](https://ikiform.com/ja/docs/guides/server.md)にまとめてあります。 ## どの値を誰が用意するか Start のサーバー関数は `/_serverFn/` 以下の HTTP エンドポイントで、コンポーネントは生成されたクライアントを通じてそれを呼び出します。入力に含まれるものは、呼び出す側が誰でも書き換えられます。そのため入力にはユーザーが選んだものだけを入れ、本人に関する情報はすべて、ハンドラーより前にサーバーで動くミドルウェアから取ります。 | 値 | 流入元 | 信頼 | | --- | --- | --- | | `rating`, `comment` | フォームの `FormData` | ユーザー自身の言葉 | | `user_id`, `email` | セッションのミドルウェアが設定する `context.user` | サーバーで封印された Cookie から読む | | `page` | ハンドラー内の `getRequestHeader("referer")` | ブラウザーは開いているページから関数を呼ぶので、ヘッダーにはそのページの URL が入る | | `screen` | 最も深い一致の `routeId`。例: `/_app/projects/$projectId/settings` | まとめるためのラベル。保存前にパターンで確認 | 図: TanStack Start のサーバー関数がフィードバックの回答にユーザーとページを加える流れ 1. フォームがスコアとコメントを集め、現在のルート ID を加えて、サーバー関数を呼び出します。 2. サーバーでは、ミドルウェアがセッションを読み、ユーザーを context として渡します。 3. バリデーターが FormData を型付きのオブジェクトにし、形の合わない画面名を捨てます。 4. ハンドラーはユーザーがいなければ拒否し、ユーザーと Referer ヘッダーのページを加えます。 5. シークレットキーを付けて Ikiform に送信し、sent か、フォームが表示するエラーを返します。 ユーザーはサーバー上の Cookie から来ます。フォームのデータをどう変えても、回答の送り主は変えられません。 ## プロジェクトの準備 このツリーは、ログイン後のすべての画面を包むパスなしの `_app` レイアウトを使ったファイルベースのルーティングを前提にしています。`session.ts` は Start の認証ガイドにある iron-session のヘルパーです。Cookie を読むセッションライブラリなら何でも同じように動きます。`users.ts` の `findUser` と `server/user.ts` の `getCurrentUserFn` は、自分で用意するユーザーの取得処理です。 `プロジェクトの構成`: ```text src/ components/feedback-form.tsx lib/ session.ts user-middleware.ts users.ts routes/ _app.tsx _app/projects/$projectId/settings.tsx server/ feedback.ts user.ts .env ``` Start は接頭辞のない変数を、サーバー上でだけ `process.env` から読みます。`VITE_` の接頭辞が付いたものはブラウザー向けにバンドルされるので、キーには絶対に付けないでください。キーはモジュールの先頭ではなく、ハンドラーの中で読みます。 `.env`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=at-least-32-characters-from-your-auth-setup ``` フィールド定義をフォームの **Fields** タブに貼り付けます。フォームに表示されるのはそのうち 2 つで、残りの 4 つはサーバー関数が埋めます。`email` フィールドがあるので、各通知の **Reply** はユーザーに届きます。 フォーム: In-app feedback - **この画面の使い心地はどうですか？** (`rating`, rating, 必須) - **どうすればもっと良くなりますか？** (`comment`, textarea) - **ページ** (`page`, url) - **画面** (`screen`, text) - **ユーザー** (`user_id`, text) - **メールアドレス** (`email`, email) `rating: 6` や定義にないフィールドを送ると、サーバー関数が受け取るのと同じ `422` がプレビューに表示されます。 ## 作ってみる ### セッションのミドルウェア 関数ミドルウェアは、それを列挙したサーバー関数を包みます。`next({ context })` に渡したものは、型付きでハンドラーに届きます。例外を投げずに `null` を渡すので、ハンドラーはフォームが表示するメッセージで応答できます。 `src/lib/user-middleware.ts`: ```ts import { createMiddleware } from "@tanstack/react-start"; import { getAppSession } from "./session"; import { findUser } from "./users"; export const userMiddleware = createMiddleware({ type: "function" }).server(async ({ next }) => { const session = await getAppSession(); const user = session.userId ? await findUser(session.userId) : null; return next({ context: { user: user ? { id: user.id, email: user.email } : null } }); }); ``` ### サーバー関数 `src/server/feedback.ts`: ```ts import { createServerFn } from "@tanstack/react-start"; import { getRequestHeader } from "@tanstack/react-start/server"; import { userMiddleware } from "../lib/user-middleware"; export type FeedbackResult = { status: "sent" } | { status: "error"; message: string }; const ROUTE_ID = /^\/[A-Za-z0-9/$_.-]{0,119}$/; function pageFrom(referer: string | undefined) { try { const url = new URL(referer ?? ""); return url.origin + url.pathname; } catch { return ""; } } export const sendFeedback = createServerFn({ method: "POST" }) .middleware([userMiddleware]) .validator((data: unknown) => { if (!(data instanceof FormData)) throw new Error("Expected form data"); const rating = Number(data.get("rating")); const screen = String(data.get("screen") ?? ""); return { rating: Number.isInteger(rating) && rating >= 1 && rating <= 5 ? rating : null, comment: String(data.get("comment") ?? "").trim().slice(0, 4000), screen: ROUTE_ID.test(screen) ? screen : "unknown", trap: String(data.get("_gotcha") ?? ""), }; }) .handler(async ({ data, context }): Promise => { if (!context.user) return { status: "error", message: "You're signed out. Sign in and send it again." }; if (data.rating === null) return { status: "error", message: "Choose a score first." }; const origin = getRequestHeader("origin"); let response: Response; try { response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`, ...(origin ? { Origin: origin } : {}), }, body: JSON.stringify({ rating: data.rating, comment: data.comment, page: pageFrom(getRequestHeader("referer")), screen: data.screen, user_id: context.user.id, email: context.user.email, _gotcha: data.trap, }), signal: AbortSignal.timeout(8000), }); } catch { return { status: "error", message: "Feedback is unreachable right now. Try again shortly." }; } const result = await response.json().catch(() => null); if (result?.ok) return { status: "sent" }; return { status: "error", message: result?.error?.message ?? "That didn't go through. Try again." }; }); ``` - `.validator` は生の `FormData` を受け取り、普通のオブジェクトを返します。不正なスコアは例外ではなく `null` になります。例外を投げると、クライアントには汎用的な失敗として届いてしまいます。 - `getRequestHeader` は、リクエストオブジェクトを受け渡さなくても、ハンドラー内のどこからでも受信したリクエストを読めます。 - `Origin` はブラウザーからの呼び出しから転送します。Ikiform が送信をローカルのテストとして扱うかどうかはこれで決まります。詳しくは下で説明します。 - context に入れるのはユーザーのレコード全体ではなく、ID とメールアドレスだけです。ハンドラーが返すものはすべてシリアライズされてブラウザーに送られます。 ### フォーム `src/components/feedback-form.tsx`: ```tsx import { useMatches } from "@tanstack/react-router"; import { useServerFn } from "@tanstack/react-start"; import { type FormEvent, useState } from "react"; import { type FeedbackResult, sendFeedback } from "../server/feedback"; const SCORES = ["Badly", "Poorly", "Okay", "Well", "Very well"]; export function FeedbackForm() { const send = useServerFn(sendFeedback); const screen = useMatches({ select: (matches) => matches.at(-1)?.routeId ?? "unknown" }); const [result, setResult] = useState(null); const [pending, setPending] = useState(false); async function onSubmit(event: FormEvent) { event.preventDefault(); const data = new FormData(event.currentTarget); data.set("screen", screen); setPending(true); try { setResult(await send({ data })); } catch { setResult({ status: "error", message: "We lost the connection. Try again." }); } finally { setPending(false); } } if (result?.status === "sent") return

Thanks. We read every one.

; return (
How is this screen working for you? {SCORES.map((label, index) => ( ))}