授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
前期に学習したJavaScriptの基本項目を用いて基本的なプログラミングが出来る。 |
・前期で学んだJavaScript基本概念（変数、関数、オブジェクト、配列など）の復習
・本コースの目的・全体像、今後の進め方・使用ツール（VS Code、Gitなど）の紹介
|
| 【理解度確認】課題 |
| 2 |
Reactの基本概念を理解し、JSXを使ってコンポーネントを構築できる。 |
・Viteを用いたReactプロジェクトのセットアップ
・Reactの基礎（コンポーネント、JSX、仮想DOM）の概要説明
|
| 【理解度確認】課題 |
| 3 |
JSXの詳細とコンポーネント設計、関数型プログラミングの理解 |
・JSXの記述方法、propsによるデータ受け渡しの詳細解説
・関数コンポーネントを用いたコンポーネント分割と再利用の実践
・純関数の考え方、関数型プログラミングの基本（副作用の排除、イミュータブルなデータ管理）の解説
|
| 【理解度確認】課題 |
| 4 |
useState、useEffectを用いて簡易的なtodoリストを作成することができる。 |
・useStateとuseEffectの使い方
・コンポーネントライフサイクルの基本概念 |
| 【理解度確認】課題 |
| 5 |
複数コンポーネント間での状態共有とTodoリストの実装ができる |
・Todoリストアプリの設計と実装（タスクの追加、削除、完了マーク）
・親子コンポーネント間のデータ連携とイベント伝播の実践
|
| 【理解度確認】課題 |
| 6 |
最新AI支援ツールを用いて効率的な開発ができる |
・GitHub Copilot、ChatGPTなどのAIツールの導入方法と基本的な使い方の解説
・AIツールを用いたコード生成、デバッグ、リファクタリングのハンズオン演習
|
| 【理解度確認】 |
| 7 |
モジュール化とプロジェクト構造の整理 |
・ES Modules（default export、named export）の基本と活用法
・Viteプロジェクト内でのファイル・フォルダ構成の最適化
・既存コードのリファクタリング演習
|
| 【理解度確認】課題 |
| 8 |
SPAの基本ルーティング（静的ルーティング）の実装 |
・React Routerを用いた基本的なルート定義とページ間ナビゲーションの解説
・シンプルな複数ページから成るアプリの作成
|
| 【理解度確認】課題 |
| 9 |
外部APIとの連携と非同期データ取得の実践 |
・fetch APIを利用した外部API（例：天気情報）のデータ取得と表示の実装
・APIキー、エラーハンドリング、非同期処理の基本解説
|
| 【理解度確認】課題 |
| 10 |
ブラウザでのデータ永続化技術の習得（localStorageとSQLiteなど) |
・localStorageの基本利用法とその制約の説明
・最新のWASM版SQLiteの導入と基本的なCRUD操作
|
| 【理解度確認】課題 |
| 11 |
Next.js入門：基本概念と静的（ファイルベース）ルーティングの理解 |
・Next.jsの概要、SSR・SSGの基本概念の説明
・Next.jsプロジェクトのセットアップと静的ページの作成（ファイルベースルーティング）
・React Routerとの違いの紹介
|
| 【理解度確認】課題 |
| 12 |
Next.jsの高度なルーティング（動的ルーティング）とデータフェッチの基礎 |
・Next.jsにおける動的ルーティングの仕組みと設定方法の解説
・データフェッチの基本演習
・簡単な動的ルートの実装
|
| 【理解度確認】課題 |
| 13 |
統合実践演習：ルーティング、API連携、永続化の要素を統合したミニプロジェクトの制作
|
・これまでの内容（コンポーネント設計、状態管理、ルーティング、API連携、データ永続化、AIツール活用）を統合した小規模アプリの実装演習 |
| 【理解度確認】課題 |
| 14 |
統合実践演習：ルーティング、API連携、永続化の要素を統合したミニプロジェクトの制作 |
・これまでの全トピック（関数コンポーネント、純関数、状態管理、ルーティング、API連携、永続化、Next.js）の復習
・ハンズオンでのデバッグ演習、ペアプログラミングによる相互レビュー
|
| 【理解度確認】課題 |
| 15 |
応用実践とフォローアップ演習（総合演習） |
・アプリの実装(それぞれ自分のレベルに合わせてアプリを作成する)
・localStorageやルーティングなど、これまでの内容の応用問題に取り組む実践演習 |
| 【理解度確認】課題 |
