01. 自己紹介- ShinCodeの自己紹介 - 本講座で学べる事 - 本講座の完成品のデモ① - 本講座の完成品のデモ②

02. React開発環境構築- Node.jsのインストール - VSCodeのインストール - Linuxの基礎コマンドの習得 - オススメプラグインの導入

03. React入門①- Reactとは何か - Reactの開発環境をviteで作ろう - プロジェクトディレクトリの解説 - JSXの意味と記法 - コンポーネントの概念と実装 - Webサイト制作に必要な知識

04. TailwindCSS入門①- TailwindCSSの環境を作ろう - text/bg/font ユーティリティ - padding/margin/border ユーティリティ - padding/marginを使ったレイアウトの修正

05. TailwindCSS入門②- flexユーティリティ - gridユーティリティ - ブレイクポイント - sm/md/lgユーティリティ

06. 企業のWebサイトを作ってみよう①- 完成品のデモと学べる事 - プロジェクト開発環境の構築 - コンポーネント構成の確認と画面幅指定 - ヘッダーの作成 - ヒーローセクションの作成

07. 企業のWebサイトを作ってみよう②- svgアニメーション画像の取得 - Lottieを使ったsvg画像の配置 - framer-motionの導入 - framer-motionでアニメーションの実装 - レスポンシブに対応させよう

08. 企業のWebサイトを作ってみよう③- Aboutセクションの作成① - Aboutセクションの作成② - アニメーション実装 - スクロール時のアニメーション発火 - レスポンシブ対応

09. 企業のWebサイトを作ってみよう④- Serviceセクションの作成① - Serviceセクションの作成② - Svg Logo Animationの導入 - データを別のファイルで管理しよう - レスポンシブ対応

10. 企業のWebサイトを作ってみよう⑤- 共通レイアウトの実装① - 共通レイアウトの実装② - 共通レイアウトの実装③

11. 企業のWebサイトを作ってみよう⑥- Our Peopleセクションの作成① - Our Peopleセクションの作成② - Our Peopleセクションの作成③ - レスポンシブ対応

12. 企業のWebサイトを作ってみよう⑦- お問い合わせセクションの作成① - お問い合わせセクションの作成② - useState()を使ってみよう① - useState()を使ってみよう②

13. 企業のWebサイトを作ってみよう⑧- EmailJsの導入 - メール送信機能の実装 - 環境変数設定と送信の確認 - バリデーションエラーの実装 - フォーム実装の改善点

14. 企業のWebサイトを作ってみよう⑨- Footerセクションの作成① - Footerセクションの作成② - Footerセクションの作成③ - レスポンシブ対応

15. 企業のWebサイトを作ってみよう⑩- ホスティングサービスの紹介とGithub - リモートリポジトリへのpush - Vercelへデプロイしてみよう - コードリーディングでハンバーガーメニューの実装 - 実際の実務環境を覗いてみよう

16. React入門②- React公式ドキュメントとHooks - useState - 再レンダリングの注意点と最適化 - useEffect - useEffectの注意点と最適なデータフェッチ - useRef - その他Hooksの紹介

17. ChatGPTクローンを作ってみよう①- 完成品のデモと学べる事 - プロジェクト開発環境の構築 - ChatGPTレイアウトの作成① - ChatGPTレイアウトの作成② - ChatGPTレイアウトの作成③ - ChatGPTレイアウトの作成④ - ChatGPTレイアウトの作成⑤

18. ChatGPTクローンを作ってみよう②- Supabaseのセットアップを始めよう - DB設計をER図を見ながら理解しよう - テーブルとスキーマの作成 - 疑似データを追加してみよう

19. ChatGPTクローンを作ってみよう③- チャットルームデータの取得 - useEffectを使ったデータフェッチ - サイドバーでのルーム表示 - メッセージデータの取得 - メッセージデータの表示 - ルーム選択機能の実装① - ルーム選択機能の実装②

20. ChatGPTクローンを作ってみよう④- Supabase AuthenticationとGoogle Provider設定 - ログイン画面を実装しよう - AuthContextProviderの作成 - ユーザーセッションの取得と共有 - useContextでセッション状態の利用 - アイコン画像の追加とログアウト実装 - onAuthStateChangeでセッション状態を管理しよう

21. ChatGPTクローンを作ってみよう⑤- Supabase Functionの作成 - Supabase Triggerの作成 - チャットルームを作成してみよう - チャットルーム名の入力と関数実行 - 再レンダリングのタイミングとエラーの解消 - チャットルームの楽観的UI更新

22. ChatGPTクローンを作ってみよう⑥- メッセージ送信機能を実装してみよう - メッセージをSupabaseへ保存してみよう - GPTのAPIの利用を始めてみよう - GPTモデルを指定してAIを使ってみよう - 実際にAIを呼び出して会話してみよう - メッセージを即時反映させよう

23. ChatGPTクローンを作ってみよう⑦- CSSレイアウトの修正 - ローディングUIの実装と表示 - レスポンシブサイズの対応 - CloudFlare Workerを使ったAPIキーの管理 - openai-proxyをクライアントでフェッチしよう

24. ChatGPTクローンを作ってみよう⑧- Githubリポジトリの作成 - Cloudflare Pagesへデプロイしてみよう - プロダクション環境への適用