ReactとTypeScriptで動画ファイルアップロードフォームのバリデーションを実装する方法

はじめに
- この記事の概要
- 対象読者
1. 必要なパッケージのインストール
2. インプットタグの設置
3. エラー文が表示されるように設定
4. zodを使ってバリデーションスキーマを定義
5. 生成した型をuseFormに渡す
まとめ

はじめに

この記事の概要

この記事では、ReactとTypeScriptを使用した動画ファイルアップロードフォームのバリデーション実装について詳しく解説します。

特に、react-hook-formとzodを組み合わせた型安全なバリデーションの方法に焦点を当てています。

最初に、必要なパッケージのインストール方法から始め、その後具体的なコードの実装について説明します。

読者には基本的なReactとTypeScriptの知識があることを前提としていますが、初心者から中級者まで、幅広いレベルの開発者にとって有益な内容となっています。

対象読者

ReactとTypeScriptの初中級者： この記事は基本的なReactとTypeScriptの知識を前提としています。したがって、これらの技術についてある程度理解している方が対象です。
フォームバリデーションの実装方法を探している方： バリデーションはフォームの重要な要素です。react-hook-formとzodを使った効率的で型安全なバリデーションの実装方法に興味がある方々にとって、この記事は役立つ情報を提供します。

1. 必要なパッケージのインストール

まずは必要なパッケージ「react-hook-form」「zod」をインストールします。以下のコマンドを実行してください。

npm install react-hook-form zod

もしくは、yarnを使っている場合は次のコマンドを実行します。

yarn add react-hook-form zod

2. インプットタグの設置

HTML部分にinputタグを記述します。

accept部分は必要に応じて変更してください。

<input
  {...register("movie")}
  type="file"
  accept="video/*"
  id="movie"
/>

3. エラー文が表示されるように設定

inputタグ配下にエラー文が表示されるように{errors}を記述します。

classを当てたい場合はspanタグで囲ってください。

<input
  {...register("movie")}
  type="file"
  accept="video/*"
  id="movie"
/>
{errors.movie && (
  <span className="">{errors.movie.message}</span>
)}

4. zodを使ってバリデーションスキーマを定義

zodを使ってバリデーションスキーマを定義します。

「testSchema」の部分は自由に名前を変更してください。

refineの箇所で添付ファイルがない場合のバリデーションを設定できます。

「ファイルが必須です」の部分がエラー内容として出力されます。

const testSchema = z.object({
  movie: z
    .custom<FileList>()
    .transform((file) => file[0])
    .refine((file) => {
      if (file) {
        return true
      }
      return false
    }, "ファイルが必須です"),
})

type testSchemaType = z.infer<typeof testSchema>

以上の記述によりフォームにバリデーションを設定できます。