TypeScriptでフォームのデフォルト値と型を連動させる方法を解説！React Hook Formの活用術

1. フォーム管理における型定義とは

1. フォーム管理における型定義とは

ウェブサイト上でよく見るお問い合わせフォームやログイン画面には、名前、メールアドレス、年齢といった入力欄があります。プログラミングの世界では、これらの入力データが「どんな形をしているか」をあらかじめ決めておくことを型定義と呼びます。例えば、名前は文字の集まりである「文字列（string）」、年齢は数字である「数値（number）」というように、データの種類をルールとして定めます。

TypeScriptを使う最大のメリットは、このルールをプログラムに覚えさせることで、間違ったデータが入力されたり、存在しないデータを扱おうとしたりした時に、すぐに警告を出してくれる点にあります。パソコンが初めての方でも、家の中の引き出しにラベルを貼って「ここには靴下を入れる」「ここには文房具を入れる」と決めておくことで、あとで探し物に困らないのと似ています。このラベル貼りの作業が、TypeScriptにおける型定義なのです。

2. React Hook FormとTypeScriptの連携

2. React Hook FormとTypeScriptの連携

React Hook Formは、ウェブアプリの入力フォームを簡単に管理するための強力な道具です。通常、フォームは複雑で、入力した内容が正しいか確認したり、送信ボタンを押した時の動きを作ったりするのが大変ですが、React Hook Formを使えばコードを短くシンプルにできます。

TypeScriptと組み合わせて使う時は、フォームに入力されるすべてのデータ（これをフォーム値と呼びます）の型を最初に決めておきます。こうすることで、例えばメールアドレスを入力する欄に、間違って数字を入力した時にパソコンが「それはメールアドレスとして正しくないよ」と教えてくれるようになります。この仕組みを型安全といい、プログラムの失敗を未然に防ぐ非常に重要な技術です。

3. インターフェースを使ってフォームの型を作る

3. インターフェースを使ってフォームの型を作る

実際にコードを書く際は、インターフェース（interface）という仕組みを使います。インターフェースは、データの設計図のようなものです。例えば、ユーザー登録フォームに必要な情報をまとめて定義してみましょう。以下の例では、名前、メール、年齢という三つのデータ項目を定義しています。

interface UserFormData {
    name: string;
    email: string;
    age: number;
}

このコードは、「UserFormDataというルールには、文字列型のname、文字列型のemail、数値型のageが含まれているべきだ」という命令をコンピュータに伝えています。このように設計図を作っておくことで、この先コードをいくら増やしても、このルールに従っているかどうかが自動的にチェックされます。

4. デフォルト値を設定する重要性

4. デフォルト値を設定する重要性

フォームを表示した瞬間、何も入力されていない状態だとユーザーは困ってしまいますよね。そこで、あらかじめ初期状態としてデフォルト値（初期値）を設定しておくのが親切です。React Hook Formでは、このデフォルト値が先ほど作ったインターフェースのルールと一致している必要があります。

例えば、名前は「未入力」、メールは「空欄」、年齢は「二十歳」を最初から入れておきたい場合は以下のように書きます。

const defaultValues: UserFormData = {
    name: "",
    email: "",
    age: 20
};

このように、定義した型名（UserFormData）を後ろにつけることで、デフォルト値の書き間違いをTypeScriptが即座にチェックしてくれます。もし、ageの値を文字の「二十歳」と書いてしまうと、TypeScriptはエラーを表示して「ここは数字じゃないとダメですよ」と教えてくれるため、とても安心です。

5. useFormフックに型を適用する

5. useFormフックに型を適用する

さて、準備ができたら実際にReact Hook Formの「useForm」という機能を使ってみましょう。フック（Hook）とは、Reactという仕組みの中で、特定の機能を手軽に呼び出すための部品のようなものです。useFormを使うとき、先ほど作ったインターフェースを渡すことで、フォーム全体がその型に従うようになります。

import { useForm } from "react-hook-form";

const { register, handleSubmit } = useForm<UserFormData>({
    defaultValues: {
        name: "名無し",
        email: "test@example.com",
        age: 18
    }
});

ここで使っている「<UserFormData>」という記述が、TypeScript特有のジェネリクスという機能です。これは、「このuseFormは、UserFormDataという設計図に従って動きますよ」と指定するものです。これにより、registerなどの機能が、自動的に正しい型を認識して動いてくれるようになります。

6. フォーム入力時の型安全性を保つ工夫

6. フォーム入力時の型安全性を保つ工夫

さらに高度な設定として、特定の入力欄が「空でも良い」のか「必須」なのかを型で表現することもできます。例えば、電話番号は入力しなくても良い場合は「?（クエスチョンマーク）」を型名の後ろにつけます。

interface UserFormData {
    name: string;
    phoneNumber?: string; // ?をつけると空でも良いことになる
}

このように、「必須の項目」と「任意の項目」を明確に分けて型を定義することで、プログラムがより正確に動作します。これは、料理のレシピで「塩は必ず入れるが、胡椒は好みで入れる」と書かれているのと一緒で、コンピュータにもどちらが大事な情報かを伝えることができるのです。日々の開発でこの型を丁寧に定義する癖をつけるだけで、バグ（プログラムの誤作動）の発生率は劇的に減らすことができます。初心者の方は、まずインターフェースを作ることに慣れていきましょう。