Course curriculum

    1. はじめに：本講座で学べる事

    2. 完成品デモ

    3. 開発環境構築からはじめよう

    4. 【補足】SNSレイアウトをAIの力で作る方法

    1. Clerkで認証機能から実装しよう

    2. ClerkのUIを使ってサインインページを作ろう

    3. ログイン済みユーザーアイコン画像を表示させよう

    4. Supabaseの初期セットアップをはじめよう

    5. Prismaの初期セットアップをはじめよう

    6. SNSのDB設計をはじめよう(Claudを利用)

    7. modelを作成してマイグレーション操作をしよう

    8. ClerkのWebhooksを利用してみよう

    9. ngrokで一時的に開発者サーバーを公開しよう

    10. prismaインスタンスを作成してORMを利用してみよう

    11. ユーザー更新時の処理の実装とSupabaseへ保存されるかのテスト

    1. ポスト投稿でServerActionsを使ってみよう

    2. ServerActionsとPrismaを使ってSupabaseへデータを保存しよう

    3. zodを使ってバリデーションチェックをしよう

    4. バリデーションエラーを出力してみよう

    5. CSSの修正とポスト時のテキストクリア

    6. ServerActions利用時の注意点

    7. useFormStatus()でペンディング状態管理

    8. useFormState(useActionState)でサーバーサイドで状態管理しよう

    9. ServerComponentでのデータフェッチング

    10. revalidatePath()でキャッシュクリア

    11. 関数のリファクタリング

    1. まずはコンポーネント分割からはじめよう

    2. いいね実装に必要なpropsを渡そう

    3. ServerActionsでいいね機能を実装しよう

    4. いいねを即時反映させるためには

    5. useOptimitiscを使った楽観的UI更新

    6. いいねのCSSを変更・修正してみよう

    1. まずは手動で他ユーザーをフォローしてみよう

    2. フォロー中のユーザーのポスト投稿もタイムラインに表示させよう

    3. タイムラインは縦スクロールで表示させよう

    4. プロフィールページを作成しよう

    5. ユーザー固有のプロフィール情報を取得して表示しよう

    6. ユーザー固有のタイムラインを表示させよう

    7. フォローボタンコンポーネントを作成しよう

    8. ユーザー状態に応じてボタンUIを変更させよう

    9. ※これ以降の動画は準備中です。

    10. ServerActionsでフォロー機能を実装しよう

    11. 複合キーを使ったフォローとアンフォローの実装

    12. 楽観的フォローUI更新を実装しよう

    13. 細かい修正とAPI RoutesとORMデータフェッチについて

    1. ボーナスレクチャー

About this course

  • 59,800円
  • 46回のレッスン
  • 3.5時間の動画コンテンツ

Discover your potential, starting today