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

What's inside

Learning objectives

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

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

Syllabus

本講座で学べる事が理解できます

本講座で学べること

本講座の完成品ソースコード

ResendやRHFとzodを組み合わせてメール送信付きのお問い合わせフォームを作成できるようになります。

本セクションの完成品デモ

まずはNext.jsでプロジェクトの雛形を作成しよう

shadcn/uiをプロジェクトに導入してみよう

お問い合わせフォームコンポーネントの作成を開始しよう

shadcn/uiのフォームを使ってフォームのレイアウトを作ろう

react-hook-formをフォームに導入しよう

zodライブラリを使ってフォームスキーマ定義をしよう

zodResolverを導入してスキーマの型定義を適用させよう

送信の確認とバリデーションチェックができているか確認しよう

useMailForm()のカスタムフックスを作ってリファクタリングしよう

useCallbackでカスタムフックス内の関数をメモ化しよう

Resendを利用してメール送信機能の実装を始めよう

Gmailに送られるテンプレートコンポーネントを作成しよう

Gmail送信APIを作ってみよう

Postmanを使ってメール送信APIテストをしてみよう

メールフォームからGmail送信APIを叩いてテストしてみよう

フォーム入力した内容が正常に送信されるかチェックしてみよう

ファイル送信項目をお問い合わせフォームに追加しよう

ファイル型定義やバリデーションチェックをスキーマに追加しよう

画像サイズ・種類を制限するバリデーションチェックも含めよう

ファイルデータを文字列と一緒に送信するにはどうすれば良いのか

ファイルバリデーションエラー状態を修正しよう

formDataを使ってfileを送信できる形にしてみよう

api側でformDataの情報を取り出してアタッチしてみよう

Fileオブジェクトからバッファオブジェクトを取り出して画像ファイル送信してみよう

送信時にローディング状態を実装しよう

送信成功時にトースターを出してみよう

開発したお問い合わせフォームをデプロイしてみよう

ユーザー認証フォームに必要なバリデーションチェック等の知識を学びます

Next.jsでプロジェクトの雛形を作成しよう

認証ページに遷移するためのページを作ろう

１からユーザー新規登録ページをTailwindCSSで作成しよう

Input入力コンポーネントを作成しよう

Propsを付与してコンポーネントを受け取る側で動的に変更させよう

送信ボタン用コンポーネントを作成しよう

react-hook-formを導入してフォームの状態管理をしよう

zodを導入して型定義とバリデーションチェックをしよう

カスタムフックスを呼び出してバリデーションチェックができているか確認しよう

ログインページを作成しよう

新規登録とログインページ間を移動できるリンクを設置しよう

Supabase Authenticationでユーザー管理を始めよう

Supabaseへユーザーを登録・管理してみよう

ユーザーテーブルを作成してユーザー情報を保存できるようにしよう

新規登録時にユーザー情報をテーブルへ保存しよう

RLSポリシーを変更してテーブルにアクセスできるようにしよう

既に同じユーザーが存在した場合はそのバリデーションエラーを出そう

重複エラーをユーザーに分かりやすい形で表示しよう

ユーザーログイン機能を実装しよう

メール未確認やユーザーが存在しない場合のバリデーションチェックをしよう

実際にメール確認をしてサービスにログインしてみよう

getSessionを使って本当にログインできているか確認してみよう

メール確認を促すページを作成しよう

Supabaseから届くメール本文内容を修正しよう

ユーザーログアウト機能を実装しよう

ユーザー状態は状態管理ライブラリやHooksで管理しよう

今後どのようにフォーム開発やwebプログラミングを学べばいいのかが理解できる

最後まで受講してくださった方へ

ボーナスレクチャー

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Teaches job-ready skills and is relevant to frontend development

Appropriate for those with React foundational knowledge

May be ideal for those with basic front-end development experience

Provides practical implementation experience

May require additional learning resources for those without substantial JavaScript background

Covers the implementation of user authentication and contact forms

Save this course

Save 【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座 to your list so you can find it easily later:

Save

Activities

Coming soon We're preparing activities for 【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座. These are activities you can do either before, during, or after a course.

Career center

Learners who complete 【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座 will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

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