Course curriculum

    1. 本講座で学べること

      無料プレビュー

    2. 本講座の完成品デモの紹介

      無料プレビュー

    3. 完成品のソースコード

    1. Next.js13を使ってプロジェクトの雛形を作ってみよう

    2. Firebaseのセットアップと初期化をしてみよう

    3. 新規登録ページを作ってみよう

    4. Firebase Authenticationを利用してユーザー登録の準備をしてみよう

    5. react-hook-formを導入してバリデーションチェックを簡単にしてみよう

    6. 正規表現を導入してメールアドレスとパスワードのバリデーションチェックをしてみよう

    7. 実際にFirebaseでユーザー新規登録の実装をしてみよう

    8. ログインページを作ってみよう

    1. サイドバーのレイアウトをTailwindCSSで整えよう

    2. サイドバーのレイアウトをTailwindCSSで整えよう

    3. チャットのレイアウトをTailwindCSSで整えよう

    4. react-iconsで送信・ログアウトアイコンを挿入してみよう

    5. Could Firestoreに部屋とメッセージのデータを保存してみよう

    6. 各部屋データをクライアント側から呼び出して表示してみよう

    7. onSnapshotで取得したデータをサイドバーに表示してみよう

    8. 複合クエリを利用する際にFirestoreでindexを登録してみよう

    9. Context APIを使ってユーザーやルーム選択の状態をグローバルに管理してみよう

    10. AppContextに型を当てて、ユーザーのログイン状態を監視してグローバルに管理してみよう

    11. グローバルコンテクストを呼び出してユーザーIDの切り替えを確認しよう

    12. input欄に入力したメッセージをFirestoreに保存してみよう

    13. FireStoreに保存したメッセージをUIに出力してみよう

    14. ルームを選択したらそのルーム情報を取得できるロジックを作ろう

    15. チャットのUIを修正しよう

    16. Open AIのAPIの準備をしてみよう

    17. GPT3.5からの返答をFirestoreに保存してみよう

    18. AIからのレスポンシブ待機時間のためのローディングを実装してみよう

    19. メッセージルームの追加とログアウトを実装しよう

    20. ユーザー情報がない場合はログインページにリダイレクトさせよう

    21. メッセージを送信した時に自動的に下スクロールされるように修正しよう

    22. ルームを選択したらチャット欄のルーム名も変更させてみよう

    1. 作ったチャットアプリをビルドとoutディレクトリにexportしてみよう

    2. Firebase Hostingでアプリをデプロイしてみよう

    1. ボーナスレクチャー

About this course

  • 29,800円
  • 36回のレッスン
  • 3時間の動画コンテンツ

Discover your potential, starting today