TypeScriptとReact Hook Formの導入方法＆型の基本設定を徹底解説！初心者のためのフォーム管理入門

1. フォーム管理とReact Hook Formとは？

1. フォーム管理とReact Hook Formとは？

インターネットで買い物をするときや、ウェブサイトに会員登録をするときに、名前やメールアドレス、パスワードを入力する画面を見たことがありますよね。あの入力欄が集まった部品のことを、プログラミングの世界ではフォームと呼びます。

ユーザーが文字を入力したときに、その文字が正しいかどうか、例えば「メールアドレスの形式になっているか」「パスワードの文字数は足りているか」を監視して、裏側で正しく処理することをフォーム管理と言います。

通常、このフォーム管理を最初から作ろうとすると、非常に多くのプログラムを書かなければならず、初心者にとっては複雑で迷子になりやすい原因になります。そこで登場するのが、React Hook Form（リアクトフックフォーム）というライブラリです。ライブラリとは、便利な機能があらかじめ詰め込まれた「道具箱」のようなものです。

React Hook Formを使うと、画面が不必要に何度も書き換わるのを防ぎながら、短いプログラムで入力された文字を楽に管理できるようになります。パソコンの動作が重くならず、快適に動くウェブサイトを作ることができるため、世界中の多くの開発者に使われています。

2. なぜTypeScriptと一緒に使うのか？

2. なぜTypeScriptと一緒に使うのか？

次に、この道具箱をTypeScript（タイプスクリプト）と一緒に使う理由について解説します。パソコンを触ったことがない方にとって、「型（かた）」という言葉は聞き馴染みがないかもしれません。プログラミングにおける「型」とは、データの種類のことを指します。例えば、文字を入れるための箱、数字を入れるための箱、といった具合に、あらかじめ箱の用途を決めておくルールです。

もし、名前を入れるはずの箱に間違えて数字が紛れ込んでしまったら、プログラムは混乱して動きを止めてしまいます。TypeScriptは、このような「入れ間違い」を、プログラムを実行する前の段階でパソコンが自動的に見つけて、人間に教えてくれる親切な仕組みを持っています。この仕組みを型安全（かたあんぜん）と呼びます。

React Hook FormとTypeScriptを合体させることで、「この入力欄には文字だけが入ります」「この入力欄は必ず数字になります」という約束事をしっかりと決めることができます。その結果、入力ミスのない、壊れにくい頑丈なフォーム画面を初心者でも作ることができるようになります。

3. 導入のための事前準備とインストール方法

3. 導入のための事前準備とインストール方法

それでは、実際にあなたのパソコンでこの便利な道具を使えるように準備をしていきましょう。プログラミングを始めるには、まず必要な部品をインターネットからダウンロードして、自分のプロジェクトに組み込む必要があります。この作業をインストールと呼びます。

コマンドプロンプトやターミナルと呼ばれる、パソコンに文字で命令を出す黒い画面を開いて、下記の命令を実行します。これにより、React Hook Formという道具箱が自動的にダウンロードされて、使える状態になります。

// このコマンドを実行して、React Hook Formをインストールします
npm install react-hook-form

この命令を打ち込んで少し待つと、パソコンの中に必要なファイルが全て綺麗に並べられます。これで準備は完了です。専門的な設定を自分で行う必要はなく、文字を入力するだけで魔法のように導入ができるのが、現代のプログラミングの便利なところです。

4. 最もシンプルな基本の型設定の手順

4. 最もシンプルな基本の型設定の手順

準備ができたら、まずは一番簡単なお問い合わせフォームを例にして、型を設定してみましょう。ここでは「お名前」だけを入力するシンプルな画面を想像してください。

最初に行うのは、フォームの中にどのようなデータが存在するのかという「設計図」を作ることです。TypeScriptでは、この設計図のことをinterface（インターフェース）またはtype（タイプ）という言葉を使って表現します。これは、データの名前と種類をあらかじめ登録しておく作業です。

以下のプログラムを見てみましょう。初心者の方でも分かりやすいように、コメントを入れて解説しています。

// 1. フォームの設計図（型）を作ります
interface SimpleFormInput {
    name: string; // nameという項目は、文字列（string）のデータが入るという意味です
}

このように設定することで、パソコンは「このフォームにはnameという文字のデータしか入らないんだな」と理解してくれます。これで、間違えて数字や別のデータを入れようとしたときに、パソコンが事前に「それは違いますよ」と止めてくれるようになります。

5. useFormを使った初期設定と部品の結びつけ

5. useFormを使った初期設定と部品の結びつけ

設計図ができたら、次はReact Hook Formの本体を呼び出して、実際の画面の部品と結びつける作業を行います。ここで重要になるのが、useForm（ユースフォーム）という特別な機能です。これは、フォームを管理するための監督オブジェクトを生成する役割を持っています。

この監督オブジェクトに対して、先ほど作った設計図を渡してあげることで、専用の管理体制がスタートします。具体的な書き方は以下のようになります。

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

// 先ほど作った設計図（SimpleFormInput）を指定して、管理を開始します
const { register, handleSubmit } = useForm<SimpleFormInput>();

ここで出てきたregisterという言葉は、画面にある入力欄を監視対象として登録するためのスタンプのようなものです。そしてhandleSubmitは、ユーザーが送信ボタンを押したときに、中身をチェックして安全にデータを送信するための仕組みです。この二つの道具を使うことで、驚くほど簡単に入力欄の動きを制御できるようになります。

6. 実際の入力フォーム画面を作成する

6. 実際の入力フォーム画面を作成する

それでは、これまでに学んだ要素を全て組み合わせて、一つの動く画面のプログラムを組み立ててみましょう。HTMLという画面の骨組みを作る言葉と組み合わせて記述します。

プログラムの中で、入力欄を意味するタグに対して、先ほどの監視用スタンプをペタッと貼り付けるようなイメージで記述していきます。以下のコードをじっくり見てみてください。

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";

// データの設計図を用意します
interface ContactFormInput {
    userName: string;
}

export function ContactForm() {
    // 監督オブジェクトを生成します
    const { register, handleSubmit } = useForm<ContactFormInput>();

    // 送信ボタンが押されたときに実行される処理です
    const onSubmit: SubmitHandler<ContactFormInput> = (data) => {
        console.log("入力された名前は次の通りです：", data.userName);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <label>お名前：</label>
            <input {...register("userName")} type="text" />
            <button type="submit">送信する</button>
        </form>
    );
}

このプログラムの中に書いてある{...register("userName")}という部分が、TypeScriptと画面の入力欄を強力に結びつけている魔法のコードです。これにより、入力欄に文字が打ち込まれるたびに、自動的にデータが安全に保管されていきます。

7. 複数パターンのデータ型を扱う応用設定

7. 複数パターンのデータ型を扱う応用設定

ここまでは名前だけを扱ってきましたが、実際のウェブサイトでは、年齢を数字で入力してもらったり、チェックボックスをクリックしてもらったりと、様々な種類のデータを同時に扱うことがほとんどです。

TypeScriptの本領が発揮されるのは、このように複数の異なるデータ型が混ざり合う場面です。例えば、文字を表すstring（ストリング）と、数字を表すnumber（ナンバー）、はい・いいえの二択を表すboolean（ブーリアン）を組み合わせた設計図を作ってみましょう。

// 複数の異なるデータ型を組み合わせた高度な設計図です
interface UserProfileInput {
    title: string;       // 役職などの文字列
    age: number;         // 年齢などの数値
    isSubscribed: boolean; // メルマガを購読するかどうかのフラグ
}

このように細かく指定をしておけば、年齢の欄に文字が入力されそうになった場合に、プログラム全体がエラーになる前に開発段階でバグを検知できます。パソコン操作に慣れていない初心者の方こそ、この型設定をしっかり行うことで、ケアレスミスを劇的に減らすことができます。

8. エラーを画面に表示するための型と仕組み

8. エラーを画面に表示するための型と仕組み

最後に、ユーザーが間違った入力をしたときに、「名前を入力してください」といった注意書きを画面に出す方法について学びましょう。これをバリデーションエラーと呼びます。

React Hook Formでは、エラーの情報も全て自動的に型で守られた状態で管理されています。監督オブジェクトからformState: { errors }という値を取り出すだけで、どこの入力欄でどのようなエラーが起きているかを瞬時に把握することができます。

万が一、設計図にない入力欄のエラーを読み出そうとすると、パソコンが「その項目は設計図に存在しません」と警告を出してくれます。これにより、文字の打ち間違いによる動作不良を未然に防ぐことが可能となります。安全で親切な案内画面を作るためにも、型とエラー表示の連携は欠かせない知識です。