TypeScriptでReactのフォームに型を定義する！初心者向け完全解説ガイド

TypeScriptでReactフォームに型を定義する方法（React Hook Formなど）

先生と生徒の会話形式で理解しよう

生徒

「Reactで入力フォームを作っているのですが、TypeScriptで型を付けるのが難しくて困っています。React Hook Formというライブラリもよく聞くのですが、どう使えばいいですか？」

先生

「フォームはユーザーからデータを受け取る大切な場所ですから、型をしっかり定義してエラーを防ぐことが重要ですね。React Hook Formを使うと、型定義もスムーズに行えますよ。」

生徒

「具体的に、どのように型を指定してプログラムを書けばいいのでしょうか？」

先生

「まずは、フォームに入力されるデータの形を決めるところから始めましょう。順番に解説していきますね！」

1. フォームにおける型定義の役割とは？

ウェブサイトには、お名前やメールアドレスを入力する「フォーム」が欠かせません。プログラミングにおいて、このフォームから送られてくるデータが「文字なのか」「数字なのか」をはっきりさせることを「型を定義する」と言います。

TypeScriptを使う最大のメリットは、この型を事前に決めておくことで、間違ったデータが入るのを防げる点にあります。例えば、年齢を入れる場所に名前が入力されてしまったら困りますよね。型を定義しておけば、プログラムを書いている途中でコンピュータが「ここはおかしいですよ」と教えてくれるようになります。

特にReactという道具を使って画面を作る場合、フォームの管理は少し複雑になりがちです。そこで、データの設計図となる「インターフェース」や「タイプ」を準備して、安全にデータを扱えるようにします。

2. フォームデータの設計図を作ろう

まずは、どのような入力項目があるかを考えます。今回は「お名前」と「メールアドレス」を持つ簡単な問い合わせフォームを例にしましょう。TypeScriptでは、interface（インターフェース）というものを使って、データの型をまとめます。

インターフェースとは、いわば「注文票のテンプレート」のようなものです。「お名前は文字で書いてください」「メールアドレスも文字です」というルールを事前に決めることができます。これにより、後からデータを扱うときに「この中には必ず名前が入っている」と確信を持ってプログラムを書くことができます。


interface ContactFormData {
    userName: string;
    email: string;
}

このコードでは、userName（ユーザー名）とemail（メールアドレス）がどちらもstring（文字列）であることを指定しています。これが全ての基本となる設計図です。

3. React Hook Formの導入と基本的な型付け

Reactで効率よくフォームを作るための有名な道具に「React Hook Form」があります。これを使うと、コードが短くなり、動作も軽快になります。このライブラリをTypeScriptで使うときは、先ほど作った設計図（型）を渡してあげます。

useFormという機能を使うときに、<ContactFormData>という形で型を教えます。これを「ジェネリクス」と呼びますが、今は「どの設計図を使うか指定している」と思えば大丈夫です。こうすることで、フォームの中身が設計図通りであることを保証してくれます。


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

export const MyForm = () => {
    const { register, handleSubmit } = useForm<ContactFormData>();

    const onSubmit = (data: ContactFormData) => {
        console.log("送信されたデータ:", data);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            {/* ここに入力欄を書いていきます */}
        </form>
    );
};

ここで出てくるregisterは、入力欄を登録するための魔法の言葉です。handleSubmitは、送信ボタンが押されたときに、データを安全にまとめてくれる機能です。

4. 入力項目と型の紐付け方法

次に、実際のHTML部分に入力欄を作っていきます。registerの中に、設計図で決めた名前（userNameなど）を正確に書く必要があります。もし名前を打ち間違えると、TypeScriptがすぐにエラーとして教えてくれます。

パソコンを触ったことがない方にとって、HTMLは記号の羅列に見えるかもしれませんが、inputというのが「入力の箱」のことです。そこに、TypeScriptの型システムを組み合わせることで、非常に頑丈な入力欄が完成します。


<div>
    <label>お名前</label>
    <input {...register("userName")} />
</div>

<div>
    <label>メールアドレス</label>
    <input {...register("email")} />
</div>

<button type="submit">送信する</button>

この{...register("userName")}という書き方は、React Hook Formが提供する便利な仕組みで、入力された内容を自動的に管理してくれるようになります。

5. バリデーション（入力チェック）に型を活かす

フォームでは「必須項目が空欄ではないか」「文字数が短すぎないか」といったチェックが必要です。これを「バリデーション」と呼びます。React Hook Formでは、このチェックルールも簡単に書くことができます。

型定義と組み合わせることで、どのようなエラーが発生する可能性があるのかを予測しやすくなります。例えば「お名前は必須です」というルールを追加してみましょう。エラーメッセージを表示する際も、型が決まっていることでスムーズに表示処理が行えます。


const { register, handleSubmit, formState: { errors } } = useForm<ContactFormData>();

// 実際の表示部分
<input {...register("userName", { required: "名前を入力してください" })} />
{errors.userName && <p>{errors.userName.message}</p>}

errorsという変数の中に、エラーの情報が入ってきます。errors.userNameと書くことで、「名前に関するエラーがあれば表示する」という命令になります。これも型が定義されているからこそ、迷わずに書けるのです。

6. セレクトボックスやラジオボタンの型定義

文字を入力するだけでなく、選択肢から選ぶ「セレクトボックス」や「ラジオボタン」もよく使います。これらも基本は同じで、設計図に項目を追加するだけです。例えば「お問い合わせの種類」を選んでもらう場合を考えてみましょう。

選択肢が決まっている場合は、単なるstringではなく、「"質問" か "要望" か "その他" のどれか」という限定的な型を作ることもできます。これを「ユニオン型」と言います。これにより、想定外の選択肢が送られてくることを防げます。


interface AdvancedFormData {
    category: "question" | "request" | "other";
    message: string;
}

// 実行結果のイメージ
// categoryには "question" は入れられるが、 "apple" は入れられない

このように型を細かく指定していくことで、プログラムの信頼性はどんどん高まっていきます。初心者のうちは難しく感じるかもしれませんが、パズルのピースを合わせるような感覚で楽しんでみてください。

7. 複雑なデータ構造を扱うテクニック

時には、ひとつの項目に複数のデータが入ることもあります。例えば「趣味」という項目で複数のチェックボックスにチェックを入れる場合です。この場合、型は「文字列の集まり（配列）」として定義します。TypeScriptではstring[]と書きます。

プログラミング未経験の方は「配列」という言葉に馴染みがないかもしれませんが、これは「仕切りのある箱が繋がったもの」を想像してください。それぞれの仕切りの中に、趣味の名前が入っていくイメージです。これも型定義をしっかり行うことで、中身がバラバラにならずに済みます。

フォームが大きくなればなるほど、この型定義の恩恵を強く感じるようになります。最初から完璧を目指す必要はありませんが、「この箱には何を入れるのか」を常に意識して、ひとつずつ型を付けていきましょう。これが、プログラミングが上達する一番の近道です。

8. TypeScriptで安全なフロントエンド開発を

ここまで、フォームに型を付ける方法を学んできました。ReactやNext.jsを使った開発では、フォームは非常に重要な要素です。TypeScriptを導入することで、開発中のミスが減り、結果として作業時間が短縮されます。

特にReact Hook Formのような強力なライブラリとTypeScriptを組み合わせることで、まるでプロのような安定したアプリケーションを作ることができます。入力ミスを未然に防ぎ、ユーザーにとっても開発者にとっても優しいシステムを目指しましょう。

最初はエラーがたくさん出て、難しく感じることもあるでしょう。しかし、そのエラーはコンピュータがあなたを助けようとしている合図です。ひとつひとつの型を丁寧に定義していく習慣をつければ、いつの間にか複雑なシステムも自由自在に作れるようになります。まずは小さなフォームから、型を付ける練習を始めてみてくださいね。

現役テックリードが直接指導【TypeScript設計実践セミナー】

TypeScript型安全設計・実践セミナー｜React/Next.js時代の堅牢なコード構築術

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

「型」を味方にする。TypeScript基礎とモダン開発の第一歩。

本講座では、モダンフロントエンドの標準であるTypeScriptの真価を体験し、初心者が陥りがちな「型の迷子」を卒業して、堅牢なコードを書くための土台を築きます。単なる文法の解説ではなく、React等のフレームワークで必須となる型推論の活用や非同期処理（Async/Await）の本質を60分で濃縮体験します。