個人的備忘録：Next.js × TypeScriptで作るユーザー登録フォーム【実装メモ】

はじめに

この記事では、React + Next.js を用いた一般ユーザー登録ページを TypeScript で実装した際のポイントと注意点についてまとめます。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

主に useState や useEffect、フォーム送信イベントの型付けなど、基本的な型定義を中心に解説しています。

書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発の一環で、フロントエンドとバックエンド（FastAPI）の連携部分を実装する機会がありました。JavaScriptで書いていたコードをTypeScriptに書き換える中で、型付けの方法や構文上の注意点を整理しておきたいと思い、この記事にまとめました。

内容

以下は、一般ユーザーの登録フォームを TypeScript で書いた実装の一部です。
※内容については正確性に自信があるわけではなく、とりあえず動いたコードを記録しています。

const Register: React.FC = () => {
  const [userName, setUserName] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");

  const handleRegister = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // fetch 処理など
  };

  return (
    <form onSubmit={handleRegister}>
      {/* 入力フォーム */}
    </form>
  );
};

解説ポイント：

• useState<string>("") と明示することで、型補完が効くようになる。
• フォーム送信イベント handleRegister の引数には React.FormEvent<HTMLFormElement> を使う。
• 関数コンポーネントは React.FC で型注釈すると、children や props を扱う際に楽になる。

まとめ

JavaScriptでの実装に慣れていると、TypeScriptでの型付けが最初は面倒に感じることがありますが、エラーの予防や補完機能の強化により、開発体験が格段に良くなると思っています。

小さなフォームでも useState や event の型定義を丁寧に行うことで、保守性が高まり、チーム開発にも強いコードになるのではないかと考えています...。