【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座
Webアプリ/サイト開発で必須になるフォーム開発。モダンな技術である「Next.js」「react-hook-form」「zod」「shadcn/ui」を使って型定義やバリデーションチェック済みの堅牢性の高いフォームの作り方をご紹介します。
Ratings 4.16 / 5.00
What You Will Learn!
- Nextjs(React)環境で実践的なフォーム実装ができる
- react-hook-formとzodを利用して型安全なフォームが作成できる
- 間違った入力をした時のバリデーションエラーが出せるようになる
- shadcn/uiを利用して綺麗なフォームUIコンポーネントが作成できる
- zodResolverを利用してRHFにスキーマ型定義を適用できる
- カスタムフックスに切り出してリファクタリングできる
- useCallbackの意味と使い方が理解できる
- Resendを利用してお問い合わせメール送信機能が実装できる
- メールに送るテンプレートコンポーネントが作成できる
- メール送信APIが実装できる
- Postmanを利用してAPIテストができる
- 画像ファイル送信用に型定義とフォーム追加ができる
- zodのcustom()やrefine()の意味と実装方法が分かる
- 画像サイズ・種類を制限するバリデーションチェックができる
- formDataとjsonの使い分けと意味が理解できる
- メール送信中のローディング状態を管理できる
- トースターを導入して送信成功か失敗か判断できるようになる
- Supabase Authenticationでユーザー認証(新規登録/ログイン)管理ができる
- html/tailwindcssで認証フォームをスクラッチで開発できる
- ユーザー状態を管理してバリデーションチェックの出力変更ができる
- パスワード変更フォームと実装ができる
- 共通するコンポーネントは別ファイルで分けて使いまわしができる
- ユーザーテーブルを作成してユーザー管理ができる
- RLSの意味とポリシー変更でアクセス制御ができる
- 既に同じユーザーが存在した場合はバリデーションエラーを出せる
- Supabaseから送られてくるメール確認内容を修正できる
- ユーザーログアウト機能が実装できる
- ユーザー状態を管理するライブラリやHooksが理解できる
Description
本講座ではユーザー認証機能とお問い合わせフォームの開発にチャレンジします。フロントエンドではNext.js/TailwindCSSを利用し、フォーム状態管理と型定義とバリデーションチェックにはReact Hook Form（RHF）とZodというライブラリを利用してフォームを高速に、そして堅牢に開発する実践講座になっています。お問い合わせフォームにはResendを利用してメール送信機能まで行います。ユーザー認証にはSupabase Authenticationを利用してユーザー管理を実装します。
■ 本コースの対象者
モダンなフロントエンド技術(Next.js)を使用して認証機能やフォームの開発に挑戦したい方
Next.js、RHF、Zodの使い方を学び、実際のプロジェクトに応用したい方
お問い合わせフォームを作る必要がある方(メール送信まで)
ユーザー認証用フォームを作る必要がある方
Supabaseを使ってユーザー認証機能を実装してみたい方
shadcn/ui等のモダンなUIライブラリを使ってみたい方
■ 本コースを受講する際の注意点
HTML/CSS/JavaScriptに関する基本的な知識があることを前提としています。
Reactの基礎（コンポーネント、JSX記法など）についての理解が必要です。
JavaScriptに関する実務経験があると、よりスムーズに講座を進めることができます。
この講座を通してフォーム周りの実装に自信を持って取り組むことができるようになります。またフォーム以外のNext.jsのコンポーネント管理やSupabase Authenticationやファイル送信の実装について学ぶことができます。
Who Should Attend!
- 実務でReact/Nextjsを使ってフォーム作成することになった
- フォームにおける型定義とバリデーションチェックをスマートにやりたい方
- 認証フォームの作り方が分からない方
- react-hook-formやzodの扱いが初めて or 曖昧な方
- Supabaseを使った認証とフォームの作り方を知りたい方