【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座

Webアプリ/サイト開発で必須になるフォーム開発。モダンな技術である「Next.js」「react-hook-form」「zod」「shadcn/ui」を使って型定義やバリデーションチェック済みの堅牢性の高いフォームの作り方をご紹介します。

4.50 (42 reviews)

Udemy

platform

日本語

language

Web Development

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が理解できる

Why take this course?

🚀 【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座 🌐

はじめに:

本講座では、フロントエンドの専門家として、あなたがユーザー認証機能とお問い合わせフォームの開発を経験する機会を提供します。最新の技術を使用して、高速で堅牢なフォームを実装してみてください。

本講座の内容:

本講座では以下の内容を網羅的に学びます:

Next.js/TailwindCSSを利用したフロントエンドの構築方法
React Hook Form (RHF)とZodを活用して、フォームの状態管理、型定義、バリデーションチェックを行う方法
お問い合わせフォームにおけるResendを用いたメール送信機能の実装
Supabase Authenticationを利用して、ユーザー認証機能を実装する方法
shadcn/uiなどのモダンなUIライブラリの使い方

本コースの対象者:

この講座は以下のような方々に最適です:

モダンなフロントエンド技術(Next.js)を使用して認証機能やフォームの開発に挑戦を求める開発者
Next.js、RHF、Zodの使い方を学び、実際のプロジェクトに応用する開発者
お問い合わせフォームを作りたい、またはメール送信機能を導入したい開発者
ユーザー認証用フォームを作りたい開発者
Supabaseを使ってユーザー認証機能を実装したい開発者
shadcn/uiなどのモダンなUIライブラリを使ってみたい開発者

受講する際の注意点:

この講座に参加する前にご確認ください：

HTML/CSS/JavaScriptに関する基本的な知識があると仮定しています。
Reactの基礎（コンポーネント、JSX記法など）についての理解が必要です。
JavaScriptに関する実務経験があると、よりスムーズに講座を進めることができます。

この講座を通じて、フォーム周りの実装に自信を持って取り組むことができるようになります。また、Next.jsのコンポーネント管理やSupabase Authenticationやファイル送信の実装についても学ぶことができます。専門技術を身につけ、Webアプリ/サイト開発で必須になるフォーム開発のスキルを一歩前に進めましょう！

🔹 [模様] 本講座で磨いたスキルは: