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

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

4.32 (11 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座
85
students
4 hours
content
Feb 2024
last update
$54.99
regular price

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アプリ/サイト開発で必須になるフォーム開発のスキルを一歩前に進めましょう! --- 🔹 **[模様] 本講座で磨いたスキルは:** - Next.jsでのページ遷移と静的サイト生成 - React Hook Formを用いたフォームのバリデーションと状態管理 - Zodを使った型安全なデータ処理 - Supabaseを活用したユーザー認証とセキュアなデータストレージ - UIコンポーネントの豊富な実装 --- 🚀 **[スタート]**この機会に蹴り入れて、あなたのフロントエンドスキルを競い澃めしましょう!サインアップし、学びの旅に出発しませんか?

Screenshots

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

Charts

Price

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

Rating

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

Enrollment distribution

【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座 - Distribution chart
5760128
udemy ID
1/12/2024
course created date
3/2/2024
course indexed date
Bot
course submited by