【フォーム開発実践】認証やお問い合わせフォームを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

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in 【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座 with these activities:

Next.js公式ドキュメントを読む

Show steps

Next.js公式ドキュメントを読み、フォーム開発におけるNext.jsの使用方法を学びましょう。

Browse courses on Next.js

Show steps

Next.jsのドキュメントにアクセスする
フォーム開発に関するセクションを読む
例やコードスニペットを調べる

フォームを作成する

Show steps

フォームを作成するハンズオン練習により、フォーム開発に関する理解を深めましょう。

Browse courses on Next.js

Show steps

Next.jsプロジェクトを作成する
フォームレイアウトを作成する
入力検証ロジックを実装する
送信機能を実装する
フォームをデプロイする

問い合わせフォームアプリを作成する

Show steps

問い合わせフォームアプリを作成する実践的なプロジェクトにより、フォーム開発のスキルを強化しましょう。

Browse courses on Next.js

Show steps

プロジェクトの仕様を定義する
Next.jsアプリを作成する
フォームと入力検証を実装する
メール送信機能を実装する
アプリをデプロイする

Four other activities

Expand to see all activities and additional details

Show all seven activities

フォーム開発ハッカソンに参加する

Show steps

フォーム開発ハッカソンに参加して、他の開発者と協力し、革新的なフォームソリューションを構築しましょう。

Browse courses on Next.js

Show steps

ハッカソンを探す
チームを組む
アイディアをブレインストーミングする
フォームを作成する
フォームをデモンストレーションする

フォーム開発に関するブログ記事を書く

Show steps

フォーム開発に関するブログ記事を作成して、知識を共有し、他の人を助けましょう。

Browse courses on Next.js

Show steps

記事のテーマを決定する
アウトラインを作成する
記事を書く
校正する
記事を公開する

フォーム開発のメンターになる

Show steps

フォーム開発の初心者を指導して、彼らのスキルを向上させましょう。

Browse courses on Next.js

Show steps

学習者の見つける
目標を設定する
学習を提供する
フィードバックを与える

フォーム開発ライブラリに貢献する

Show steps

フォーム開発ライブラリに貢献して、コミュニティに還元しましょう。

Browse courses on Next.js

Show steps

ライブラリを選択する
問題を特定する
プルリクエストを作成する
コードをレビューする
プルリクエストをマージする

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等のモダン技術を使って開発する実践講座

14 deals to help you save

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses