授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
前期に学習したJavaScriptの基本項目を用いて基本的なプログラミングが出来る。 |
前期JavaScript実習の授業で学んだ基本項目についておさらいする。 |
| 【理解度確認】課題 |
| 2 |
Reactの基本を理解し、簡単なUIをReactを用いてブラウザ上に表示できる。 |
Reactの仕組みを学習する。 |
| 【理解度確認】課題 |
| 3 |
JSXを使ってHTMLを生成することができる。 |
JSXの基本的な書き方を学習する。関数コンポーネント、Reactフラグメントの使い方を学ぶ。 |
| 【理解度確認】課題 |
| 4 |
Reactを用いて簡単なUIを作成することができる。 |
Reactの基礎(単方向データフロー、props、コンポーネント)を学ぶ。 |
| 【理解度確認】課題 |
| 5 |
useState、useEffectを用いて簡易的なtodoリストを作成することができる。 |
いくつかの基本的なビルトインフックを学習する。 |
| 【理解度確認】課題 |
| 6 |
useState、useEffectを用いて簡易的なtodoリストを作成することができる。 |
JSの知識の復習をする。デストラクチャリング、アロー関数、関数コンポーネント等 |
| 【理解度確認】課題 |
| 7 |
Viteによりアプリの雛形を作成することができる。 |
モジュールの使い方、デフォルトエクスポート、名前付きエクスポートのやり方を学習し、Reactでのモジュールの読み込み方法を学習する。 |
| 【理解度確認】課題 |
| 8 |
react-router-domにより簡単なSPAを作成することができる。 |
ルーターの役割と利用の仕方を学ぶ。またページをコンポーネント単位に分割しimportで読み込む方法を学習する。 |
| 【理解度確認】課題 |
| 9 |
ReactとWeb APIを使って簡単なアプリケーションを作成することが出来る。 |
外部APIの利用。APIのトークン、エンドポイント、JSONをJavaScriptで利用する方法を学習する。 またReactのコンポーネントライフサイクルを学び、ビルトインフックの利用や全体のデータフローについても学習する。 |
| 【理解度確認】課題 |
| 10 |
Reactを用いて簡単なアプリを作成する事ができる。 |
Reactを利用して複数画面から成るデスクトップアプリを作成する方法を学習する。 |
| 【理解度確認】 課題 |
| 11 |
Reactを用いて簡単なアプリを作成する事ができる。 |
ReactとNodeモジュールを用いてアプリを作成する方法を学習する。 |
| 【理解度確認】課題 |
| 12 |
TypeScriptの利用方法を学ぶ。基礎的なTypeScriptの書き方を理解し、VS Code上の環境設定を自ら行い開発をスタートすることができる。 |
TypeScriptの基礎、型定義、環境構築の方法を学習する。 |
| 【理解度確認】課題 |
| 13 |
自分でアプリケーションの開発環境を構築することができる。外部のWeb APIを利用することができる。 |
①Reactと外部APIを使ったオリジナルのアプリケーションの作成 |
| 【理解度確認】課題 |
| 14 |
作るアプリによって適切な技術選定を行いアプリケーションを開発することが出来る。 |
②Reactと外部APIを使ったオリジナルのアプリケーションの作成 |
| 【理解度確認】課題 |
| 15 |
gitとGitHubを使ってコードを管理し、適切にコミットおよびプッシュが出来る。
Vercelと連携しアプリをデプロイ出来る。 |
③Reactと外部APIを使ったオリジナルのアプリケーションの作成 |
| 【理解度確認】課題 |
