TypeScript Academy · レッスン

parseとsafeParse

Q: 「parseとsafeParse」で何を学びますか？

バリデーションの成功と失敗を適切に処理します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

バリデーションの成功と失敗を適切に処理します。

「parseとsafeParse」はCoddyKit上の無料TypeScript Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

検証する2つの方法

Zodには2つの検証方法があります。無効なデータでエラーをスローするparseと、代わりに結果オブジェクトを返すsafeParseです。

import { z } from "zod";
const schema = z.string();
// schema.parse(x) throws on failure
// schema.safeParse(x) returns { success, ... }

parseは無効なデータでスローする

parseは成功時に検証済みの値を返し、失敗時にはZodErrorをスローします。無効なデータが本当に例外的な状況である場合に適しています。

import { z } from "zod";
const schema = z.number();
const ok = schema.parse(42); // 42
// schema.parse("nope"); // throws ZodError

parseのエラーを捕捉する

parseをtry/catchで囲むと、スローされたエラーを処理できます。エラーを調べれば、何が失敗したのか詳しく確認できます。

import { z } from "zod";
const schema = z.number();
try {
  schema.parse("nope");
} catch (err) {
  if (err instanceof z.ZodError) {
    console.log("Invalid:", err.issues.length);
  }
}

safeParseは結果を返す

safeParseは決してスローしません。success: trueとdataを持つオブジェクト、またはsuccess: falseとerrorを持つオブジェクトを返します。

import { z } from "zod";
const schema = z.number();
const result = schema.safeParse("nope");
// result is { success: false, error: ZodError }

結果の型を絞り込む

結果はsuccessを判別子とする判別可能なユニオンです。successを確認すると、dataまたはerrorのどちらかに型を絞り込めます。

import { z } from "zod";
const schema = z.object({ id: z.number() });
const result = schema.safeParse({ id: 1 });
if (result.success) {
  console.log(result.data.id); // typed
} else {
  console.log(result.error.issues);
}

parseを使う場面

無効な入力がバグである場合や、処理を中断すべき場合はparseを使います。たとえば、起動時に必須の設定を読み込む場合です。

import { z } from "zod";
const configSchema = z.object({ port: z.number() });
const config = configSchema.parse({ port: 8080 });
// Fail fast if config is wrong.

safeParseを使う場面

無効な入力が想定され、適切に処理したい場合はsafeParseを使います。たとえば、ユーザーが送信したフォームを検証する場合です。

import { z } from "zod";
const formSchema = z.object({ email: z.string() });
const r = formSchema.safeParse({ email: 123 });
if (!r.success) {
  // Show a friendly validation message
}

ZodErrorのissuesを読み取る

ZodErrorにはissues配列が含まれており、それぞれの問題について、パス、メッセージ、エラーコードが記述されています。

import { z } from "zod";
const schema = z.object({ age: z.number() });
const r = schema.safeParse({ age: "x" });
if (!r.success) {
  for (const issue of r.error.issues) {
    console.log(issue.path, issue.message);
  }
}

どちらも推論された型を返す

成功時には、どちらのメソッドもz.infer<typeof schema>として型付けされた検証済みの値を返すため、その後のコードも完全に型付けされます。

import { z } from "zod";
const userSchema = z.object({ name: z.string() });
type User = z.infer<typeof userSchema>;
const u: User = userSchema.parse({ name: "Ada" });
console.log(u.name);

適切なメソッドを選ぶ

基本的な指針として、失敗時に実行を停止すべき信頼済みの処理や重要な処理にはparseを使い、クラッシュさせずに処理する必要がある信頼できない入力にはsafeParseを使います。

import { z } from "zod";
const schema = z.string();
// Critical: schema.parse(value)
// User-facing: schema.safeParse(value)

両方のスタイルを組み合わせる

よくあるパターンは、safeParseをヘルパーでラップし、型付けされたデータまたは整形済みのエラーを返す方法です。これにより、両方のメソッドの使いやすさを得られます。

import { z } from "zod";
function validate<T extends z.ZodType>(schema: T, value: unknown) {
  const r = schema.safeParse(value);
  return r.success ? { ok: true, data: r.data } : { ok: false, error: r.error };
}
// Reusable, no throwing.

確認問題：parseとsafeParse

parseとsafeParseの違いについて理解度を確認します。

まとめ：parseとsafeParse

無効なデータでparseはエラーをスローし、safeParseはsuccess/errorの結果を返すこと、それぞれを使う場面、そしてZodErrorのissuesを読み取る方法を学びました。

import { z } from "zod";
const schema = z.object({ id: z.number() });
const r = schema.safeParse({ id: 1 });
if (r.success) console.log(r.data.id);

よくある質問

「parseとsafeParse」レッスンは無料ですか？

はい。「parseとsafeParse」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「parseとsafeParse」で何を学びますか？

バリデーションの成功と失敗を適切に処理します。ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「parseとsafeParse」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← TypeScript Academyに戻る