SvelteKit の Remote Function はどうして好きな Validation Library を使えるのか

はじめに

2025/12/8 時点の SvelteKit の version@2.49.1 の実装を参考にしています。
将来的に変更する可能性もあります。

SvelteKit の Remote Function は下記のように自分の好きなZod、Valibot、Yupなど、お気に入りの Validation Library をそのまま使えることができます。

import * as v from 'valibot';
import * as z from 'zod';

import { form } from '$app/server';

const vSchema = v.object({
	title: v.pipe(v.string(), v.nonEmpty()),
	content: v.pipe(v.string(), v.nonEmpty())
});

const zSchema = z.object({
	title: z.string().min(1, 'Title is required'),
	content: z.string().min(1, 'Content is required')
});

export const createPost = form(
	vSchema または zSchema,
	async ({ title, content }) => {
		...
	}
);

なぜこれが可能なのでしょうか？その秘密はStandard Schemaという仕様にあります。

Standard Schemaとは？

Standard Schemaは、JavaScriptおよびTypeScriptのスキーマバリデーションライブラリ向けの共通インターフェース仕様です。

Standard Schema is a common interface designed to be implemented by JavaScript and TypeScript schema libraries.

The goal is to make it easier for ecosystem tools to accept user-defined type validators, without needing to write custom logic or adapters for each supported library. And since Standard Schema is a specification, they can do so with no additional runtime dependencies. Integrate once, validate anywhere.

StandardSchemaV1という Interface が定義されており、多くの Validation Library はこの定義に準じて設計を行なっています。

/** The Standard Schema interface. */
export interface StandardSchemaV1<Input = unknown, Output = Input> {
  /** The Standard Schema properties. */
  readonly '~standard': StandardSchemaV1.Props<Input, Output>;
}

export declare namespace StandardSchemaV1 {
  /** The Standard Schema properties interface. */
  export interface Props<Input = unknown, Output = Input> {
    /** The version number of the standard. */
    readonly version: 1;
    /** The vendor name of the schema library. */
    readonly vendor: string;
    /** Validates unknown input values. */
    readonly validate: (
      value: unknown
    ) => Result<Output> | Promise<Result<Output>>;
    /** Inferred types associated with the schema. */
    readonly types?: Types<Input, Output> | undefined;
  }

  /** The result interface of the validate function. */
  export type Result<Output> = SuccessResult<Output> | FailureResult;

  /** The result interface if validation succeeds. */
  export interface SuccessResult<Output> {
    /** The typed output value. */
    readonly value: Output;
    /** The non-existent issues. */
    readonly issues?: undefined;
  }

  /** The result interface if validation fails. */
  export interface FailureResult {
    /** The issues of failed validation. */
    readonly issues: ReadonlyArray<Issue>;
  }

  /** The issue interface of the failure output. */
  export interface Issue {
    /** The error message of the issue. */
    readonly message: string;
    /** The path of the issue, if any. */
    readonly path?: ReadonlyArray<PropertyKey | PathSegment> | undefined;
  }

  /** The path segment interface of the issue. */
  export interface PathSegment {
    /** The key representing a path segment. */
    readonly key: PropertyKey;
  }

  /** The Standard Schema types interface. */
  export interface Types<Input = unknown, Output = Input> {
    /** The input type of the schema. */
    readonly input: Input;
    /** The output type of the schema. */
    readonly output: Output;
  }

  /** Infers the input type of a Standard Schema. */
  export type InferInput<Schema extends StandardSchemaV1> = NonNullable<
    Schema['~standard']['types']
  >['input'];

  /** Infers the output type of a Standard Schema. */
  export type InferOutput<Schema extends StandardSchemaV1> = NonNullable<
    Schema['~standard']['types']
  >['output'];
}

これによって以下のような共通な振る舞いをすることができます。

const schema = isString({ minLength: 3, maxLength: 10 });
const result = schema["~standard"].validate("hello");

SvelteKit の技術的な実装

SvelteKit の Remote Function の中身を見ていきましょう。
今回は packages/kit/src/runtime/app/server/remote/form.js をのぞいてみましょう。

export function form(validate_or_fn, maybe_fn) {
	...
	/** @type {StandardSchemaV1 | null} */
	const schema = !maybe_fn || validate_or_fn === 'unchecked' ? null : /** @type {any} */ (validate_or_fn);

	/**
	 * @param {string | number | boolean} [key]
	 */
	function create_instance(key) {
	...
		const validated = await schema?.['~standard'].validate(data);
	}
}

細かい実装は省きますが StandardSchemaV1 を使ってますね。
schema?.['~standard'].validate(data); のように data を validation しています。
この時の schema は StandardSchemaV1 を元に実装しているものではなんでも良いわけですから、独自実装したものでも良いわけです。

コードの詳細は以下のリンクから確認できます。

https://github.com/sveltejs/kit/blob/f555ba6571a97feac3fefd563baad50fd7686437/packages/kit/src/runtime/app/server/remote/form.js#L64

このように SvelteKit ではより柔軟で開発体験の良い API を提供しています。