本講座ではユーザー認証機能とお問い合わせフォームの開発にチャレンジします。フロントエンドではNext.js/TailwindCSSを利用し、フォーム状態管理と型定義とバリデーションチェックにはReact Hook Form（RHF）とZodというライブラリを利用してフォームを高速に、そして堅牢に開発する実践講座になっています。お問い合わせフォームにはResendを利用してメール送信機能まで行います。ユーザー認証にはSupabase Authenticationを利用してユーザー管理を実装します。
■ 本コースの対象者
モダンなフロントエンド技術(Next.js)を使用して認証機能やフォームの開発に挑戦したい方
Next.js、RHF、Zodの使い方を学び、実際のプロジェクトに応用したい方
お問い合わせフォームを作る必要がある方(メール送信まで)
ユーザー認証用フォームを作る必要がある方
Supabaseを使ってユーザー認証機能を実装してみたい方
shadcn/ui等のモダンなUIライブラリを使ってみたい方
■ 本コースを受講する際の注意点
Read more
本講座ではユーザー認証機能とお問い合わせフォームの開発にチャレンジします。フロントエンドではNext.js/TailwindCSSを利用し、フォーム状態管理と型定義とバリデーションチェックにはReact Hook Form（RHF）とZodというライブラリを利用してフォームを高速に、そして堅牢に開発する実践講座になっています。お問い合わせフォームにはResendを利用してメール送信機能まで行います。ユーザー認証にはSupabase Authenticationを利用してユーザー管理を実装します。
■ 本コースの対象者
モダンなフロントエンド技術(Next.js)を使用して認証機能やフォームの開発に挑戦したい方
Next.js、RHF、Zodの使い方を学び、実際のプロジェクトに応用したい方
お問い合わせフォームを作る必要がある方(メール送信まで)
ユーザー認証用フォームを作る必要がある方
Supabaseを使ってユーザー認証機能を実装してみたい方
shadcn/ui等のモダンなUIライブラリを使ってみたい方
■ 本コースを受講する際の注意点
本講座ではユーザー認証機能とお問い合わせフォームの開発にチャレンジします。フロントエンドでは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やファイル送信の実装について学ぶことができます。
Here's a deal for you
UDEAFNULP2024
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を組み合わせてメール送信付きのお問い合わせフォームを作成できるようになります。
Read more
Syllabus
Good to know
Save this course
Save
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
-
ライブラリを選択する
-
問題を特定する
-
プルリクエストを作成する
-
コードをレビューする
-
プルリクエストをマージする
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アプリを作成する
- フォームと入力検証を実装する
- メール送信機能を実装する
- アプリをデプロイする
フォーム開発ハッカソンに参加する
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
Reading list
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
