TypeScriptで学ぶReact.js：基礎から最新技術まで完璧に

Chapter 01
準備する

リアクトの学習を始める前に必要な環境設定について学びます。
各OSごとにVSCodeをインストールする方法を確認し、
Prettierや拡張機能をインストールして学習の準備を整えます。

Chapter 02
始める

このチャプターでは、リファクトアプリケーションを最新の方式で開始する方法を扱います。Create React App(CRA)に代わるViteベースの開発環境を構築し、リファクト開発に必要な必須設定を習得します。

• CRAの限界とViteの利点の比較

• WebpackとViteの違いとエコシステムの流れの理解

• Viteを活用した高速で直感的なReactプロジェクト設定

• スニペットとユーザースニペットによるコード生産性の向上

• 初期プロジェクト構造の整理とnpm run dev実行フローの把握

また、Reactにおいて最も重要なJSX構文の概念と特徴を紹介します。JSXがどのようにHTMLとJavaScriptを結合するのか、どのような構文的特徴があるのかを理解しながら、その後のコンポーネント学習のための基礎を固めます。

Chapter 03
コンポーネントの基本

Reactにおいてコンポーネントは、UIを構成する最小単位であり、核心となる概念です。このチャプターでは、コンポーネントとは何か、どのように動作し、どのように構成されるのかを、実際のコードとともに段階的に学習します。

• コンポーネントとは何か？そしてなぜ重要なのか？

• 関数型コンポーネントの作成条件と構成方式

• React.Fragmentを利用した不要なDOMの除去

• 新しいコンポーネントの作成方法とフォルダ構造の設計

• ルートコンポーネントとコンポーネントツリー構造の概念の理解

また、実習を通じて直接コンポーネントを作成し、適切な位置に配置しながら、コンポーネントベースの設計に対する感覚を身につけることができます。
この過程を通じて、コンポーネントを見る目が変わり、その後の複雑なReactの構造も自然に理解できる基盤を築くことができます。

Chapter 04
コンポーネントのデータとProps

これからリアクトの核心概念の一つであるProps（プロパティ）を本格的に扱います。このチャプターでは、コンポーネント間でデータをどのように伝達し活用するのかを、さまざまな例題と実習を通じて学んでいきます。

• Reactにおけるコンポーネント間の関係の理解：先祖-親-子の構造

• JSX内で基本型と参照型のデータを出力する方法

• タグの属性に値を渡す基本原理

• Propsを通じてデータを渡す様々な方式とパターン

• 分割代入を活用したpropsの分離と可読性の向上

• TypeScriptをベースにpropsの型を簡単に推論し、明確に定義する方法

• 展開演算子(...)を活用したpropsの渡し方の理解

• childrenという特別なpropを活用したコンポーネントの再利用性の拡張

• propsとchildrenの役割の違いを比較

このチャプターを通じて、Reactコンポーネント間のデータフローを自然に理解し、型安全性と可読性を同時に考慮したprops設計能力を養うことができます。

Chapter 05
コンポーネントとイベント

Reactアプリケーションにおいてイベント処理は、ユーザーとのインタラクションを実装する核心です。このチャプターでは、ボタンのクリックからイベントの伝播まで、Reactでイベントをどのように扱うかを体系的かつ実用的な観点で学習します。

• JSX文法によるイベント接続方式

• イベント属性とイベントハンドラー関数の作成パターン

• ハンドラーに引数を渡す様々な方法と推奨される方式

• ハンドラー内部でpropsを読み取る流れと実践例

• 上位コンポーネントからハンドラーをpropsとして渡す構造

• イベントオブジェクト(SyntheticEvent)の構造および活用法

• target、currentTargetの違いと用途

• イベント伝播の概念：バブリングとキャプチャリングの理解

• イベントの基本動作を抑止する方法 (e.preventDefault())

最後にボタンコンポーネントを自作し、さまざまなイベントを処理する実習を通じて、イベント処理パターンを自然に習得します。

Chapter 06
コンポーネントの状態 - useStateフック

Reactの状態管理は、コンポーネントがユーザーとのインタラクションに応じて反応し、変化するように作る核心的な機能です。このチャプターでは、useStateとuseReducerを中心に、状態管理の概念、活用法、実践的な適用まで幅広く扱います。

• 状態が必要な理由と状態値の基本概念

• useStateフックの基礎的な使い方から実践的な適用まで

• オブジェクトおよび配列の状態を扱う際の注意点と再レンダリングの動作の仕組み

• setStateの更新方式と関数型アップデート

• 状態の独立性の概念と状態の共有（lifting state up）

• カプセル化(encapsulation)による状態管理の責任の分離

• カウンターアプリを直接作ってみながら、状態管理のスキルを段階的に強化

• useReducerを用いた複雑な状態ロジックの構造化

• reducerパターンへの移行および実践ミッションの遂行

このチャプターを終える頃には、単純な状態変更から複雑なデータフローまで安定して管理できるReact開発者へとさらに成長しているはずです。

Chapter 07
繰り返し＆条件付きレンダリング

実際のユーザーインターフェース（UI）は、状況に応じて画面が条件によって変化し、複数のデータを繰り返しレン더링（レンダリング）する構造で成り立っています。このチャプターでは、ReactでこのようなUIをどのように実装するかに焦点を当てて解説します。

🔹 条件付きレンダリング

• if、switch、三項演算子(? :)、論理演算子(&&)など、さまざまな条件表現方式

• 各条件方式の使用時期と長所・短所の比較

• 交通信号、ログイン状態、メッセージ出力など、実際のシナリオに基づいた実習

• 二重の条件、可読性、コンポーネント分離戦略など、実践的なヒントを提供

🔹 反復レンダリング

• 配列データを基にmap()を利用したコンポーネントの繰り返し出力

• 反復レンダリングにおけるkey属性の重要性および有効範囲の理解

• filter()などを活用したデータの選別および条件付きレンダリングの結合

• レシピ一覧のレンダリングなどの実践課題を通じて、反復パターンを習得

このチャプターを終えると、Reactで複雑な条件や反復を自然に実装できるようになり、可読性の高い動的UIを設計できる実力を備えることができます。

Chapter 08
スタイリング

このチャプターでは、Reactでコンポーネントをスタイリングする様々な手法を幅広く学習します。
単純なインラインスタイルからCSS-in-JS、Tailwind、画像スタイリングまで、実際のフロントエンド開発で頻繁に遭遇するすべてのスタイリング手法を実習とともに身につけることができます。

🔹 スタイリングの基本

• インラインスタイルとグローバルCSSの活用法

• CSSモジュールによるコンポーネント単位のスタイルカプセル化

• classnamesユーティリティを活用した動的クラス管理

• 🧩 ミッション：ボタングループUIの実装を通じて、多様なスタイリング手法を比較体験

🔹 CSS-in-JS — styled-components

• styled-componentsの構文と基本的な使用方法

• propsを活用した動的スタイリング

• keyframes、asなどの高度な機能とヘルパー関数およびミックスインの使用方法

• グローバルスタイルの管理とヒント集

• 🧩 ミッション：styled-componentsで信号機UIを作る

🔹 Tailwind CSS — ユーティリティファーストのスタイリング

• Tailwindの核心的な哲学とディレクティブ体系

• 条件付きクラスの適用方法と実践的な適用戦略

• 🧩 ミッション：Tailwindで計算機UIを完成させる

• 🧩 ボーナスミッション：Tailwindの実戦感覚を加えて高級UIに挑戦！

🔹 イメージ & フォントスタイリング

• 画像レンダリング時の考慮事項およびCSS調整方法

• 🧩 ミッション：ランプに明かりが灯るアニメーションUIの実装

• Googleウェブフォントの適用方法までまとめて整理

このチャプターを通じて、どのスタイリングツールがプロジェクトに適しているかを判断できる目を養い、美麗でメンテナンス可能なUIを実装できる実戦感覚を身につけることができます。

Chapter 09
電卓を作る

このチャプターは、これまでに学習した内容をもとに実際に動作する計算機アプリケーションを直接実装する、実習中心のプロジェクトです。コンポーネント設計、状態管理、イベント処理、型の分離、UI構成まで、すべてを直接経験することになります。

🛠 プロジェクトベース学習

• プロジェクト開始前、計算機の動作原理と構造に関する概要

• UI設計およびコンポーネントの構造化

• リファクタリングの過程を通じて、コンポーネントの役割と責任を整理

• 🧩 TypeScriptを活用して状態と演算子の型を明確に分離

• 数字、演算子、ピリオド、クリアなどの主要機能を直接実装

• 実戦でよく遭遇するバグ処理およびデバッグの流れを学習

🧪 開発ツールの活用

• React Developer Toolsのインストールおよび活用法を通じて状態変化のフローを視覚化

• リアルタイムの状態追跡とコンポーネント構造の分析能力の向上

このチャプターを終えると、単なる機能の実装を超えてコンポーネントの分離、状態設計、デバッグ、型管理までを一度に経験することになり、「自分が作った機能が動作する喜び」を通じてReactに対する自信を持つことができます。

Chapter 10
フォームの扱い方

このチャプターでは、Reactでフォームをどのように扱うかについての実践的な悩みを盛り込みました。単なる入力処理を超えて、React 19の新機能（refの転送）、カスタムフックによるフォームロジックの再利用、バリデーションまでを網羅しています。

🔹 制御コンポーネント

• input、checkbox、radio、textareaなど、制御コンポーネント全般の実習

• 状態と連動した入力処理の流れと再レンダリングの理解

• 🧩 ミッション：多様な制御入力を組み合わせたフォームUIの実装

🔹 非制御コンポーネント

• refを通じた入力値へのアクセスとDOMベースの制御方式

• 制御/非制御方式の長短比較および統合戦略

• 🧩 ミッション：非制御方式で複数入力を一括処理する

🔹 React 19 高度なフォーム制御

• refをpropsとして渡す新しいパターン (React 19)

• 複雑な入力処理をカスタムフックに分離し、再利用性を高める

• カスタムフックの深化：内部状態の抽象化、カスタムバリデーションの連動

🔹 バリデーション (Validation)

• 必須項目、長さ、形式などの基本バリデーション実装パターン

• カスタムバリデーション関数の作成およびフックへの統合

• 🧩 ミッション：ログインフォームを完成させる
  → 入力制御 ＋ バリデーション ＋ 状態処理まで 包括的なフォーム実習

このチャプターを終えると、単純な入力処理から一歩進んで、
複雑なフォームフローを構成し、きれいにメンテナンス可能な構造で管理する能力を習得できます。
実務レベルの入力制御の経験と最新のReact技術までを共に体得できる決定的な機会です。

Chapter 11
ToDoアプリ

このチャプターでは、これまで学んだReactの核心概念をもとに、実際に動作するToDo管理（Todo）アプリケーションを実装します。
コンポーネントの分割、状態管理、イベント処理、リストレンダリング、修正・削除など、実践的なReact開発の流れを最初から最後まで体験できるチャプターです。

🛠 実践的な実装内容

• プロジェクトのセッティングから始めて、基本構造を整える

• 入力フォームを通じたTODO登録機能の実装

• リストレンダリングでToDoリストを表示する

• チェックボックスによる完了表示および削除機能の追加

• 🧩 ToDo修正機能の実装を通じて、状態更新とUI制御ロジックを習得

✅ 実習を通じて得られるもの

• 単なるAPIの理解を超えて、複数のコンポーネント間での役割分担とデータフローを設計

• 状態を中心に動作するReactアプリの構造とフローを、最初から最後まで自ら実装

• ミッションに近い完成型プロジェクトで小規模なCRUDアプリを自ら作り上げた経験

このチャプターを終えると、Reactのさまざまな機能を組み合わせて一つのアプリを設計し、完成させる自信に満ちた最初のプロジェクト経験を得ることができます。

Chapter 12
サイドエフェクトとコンポーネント最適化手法

このチャプターでは、リミットコンポーネントが単に「レンダリング」するだけでなく、非同期作業、ブラウザイベント、外部API処理などのサイドエフェクト管理と、不要なレンダリングを減らす最適化戦略までを併せて扱います。

🔹 サイドエフェクトの管理 (useEffect、useId など)

• useIdフックを活用したアクセシビリティの向上および固有識別子の生成

• 🧩 ToDoアプリにuseIdを適用し、実務的なアクセシビリティの感覚を習得

• useEffectの動作タイミング、依存関係配列の原理などの理論 + 実習

• 🧩 TodoアプリにuseEffectを適用し、外部データや状態変化への反応処理を実装

🔹 コンポーネントの最適化 (React.memo, useCallback, useMemo)

• React.memoによる不要な再レンダリングの防止

• メモイゼーションがいつ解除されるのか、そしてその理由の分析

• useCallbackとuseMemoの違いと適用時期

• 🧩 ToDoアプリにReact.memoとuseCallbackを適用して最適化を体感

🔹 高度なレンダリング戦略 (lazy, suspense, error-boundary)

• コンポーネントを遅延ロードするlazy()とSuspenseの基本概念

• ローディング待機中のUI構成とユーザーエクスペリエンス向上戦略

• エラー発生時にアプリがクラッシュしないように保護するErrorBoundaryの処理方式

このチャプターを終えると、複雑なコンポーネント構造の中でもパフォーマンスとメンテナンス性を考慮した設計を自ら実装できるようになり、
実際のサービスで求められるレベルのReactアプリ運用感覚を身につけることができます。

Chapter 13
Context API

コンポーネント間の深いデータ伝達をスマートに処理したいなら？ Context APIがその答えです。
このチャプターでは、グローバル状態管理の基礎としてContext APIの核心的な概念と使い方を学習し、実践プロジェクトに適用しながら構造化されたアプリ開発能力を養います。

🔹 グローバル状態の必要性と Context API の基本

• props drilling問題を解決するためのグローバル状態の必要性

• createContext、useContextを活用した基本的なグローバル状態の設計

• 不要なレンダリングの問題と構造の改善方法 (memo, contextの分離)

• reducerと組み合わせて、複雑なグローバル状態も効率的に管理

• ✅ 2つ以上のContextを併用するパターンの実習を含む

🧩 実践：UserProfile 状態管理プロジェクト

• 初期UserProfileコードの分析 → コンテキストオブジェクトによる状態の分離

• 🧩 文字サイズ、テーマ、通知設定、言語設定(i18n.ts)などのユーザー環境設定をグローバル状態で管理

• useLayoutEffectを併用してレンダリング順序およびレイアウトの反応性を制御

• ✅ Context API + カスタムフック設計による拡張性の高いグローバル状態構造の学習

🧩 ミッション：TodoアプリにContext APIを適用

• 既存のToDoアプリにグローバル状態を導入 → コンポーネント間の状態共有構造を改善

• 複数のコンポーネントが同一の状態を活用できるように構成し、実践的な設計能力を強化

このチャプターを通じて、単純なコンポーネント単位の状態から脱却し、
アプリ全体を見渡すグローバル状態の流れと管理戦略を実際に実装できるようになります。

Chapter 14
Redux ToolKit

Context APIでグローバル状態の概念を掴んだら、次はRedux Toolkit (RTK)でより拡張可能でメンテナンスしやすいグローバル状態管理構造を体験します。
このチャプターでは、複雑な状態を体系的に管理できるよう、Redux Toolkitの核となる機能を実習中心に学習します。

🔹 Redux Toolkit 理論 + 構造作り

• Redux Toolkitの登場背景と従来のReduxとの違い

• ストアの作成およびcreateSliceによるスライスの構造化

• 状態変更の流れ、アクションのディスパッチ、再レンダリングの流れの理解

• ✅ Redux DevTools 連携による状態デバッグ

• 引数の渡しかた、thunkを活用した非同期処理ロジックへの拡張まで

• ✅ スライスを複数に分離・統合して管理する高度な構造の実習

🧩 実践：ReduxによるUserProfileの状態管理

• UserProfileの状態をReduxベースで再構成

• 🧩 文字サイズ、通知設定、テーマの状態などをスライス単位で構造化

• Context APIと比較してより強力な構造的制御力とメンテナンス性を比較体験

🧩 ミッション：ToDoアプリにReduxを適用

• 既存のToDo管理アプリをRedux Toolkitベースに移行

• ✅ Todoの状態、追加/削除/修正ロジックをスライス単位で実装

• 実戦でのコンポーネントとストアの分離戦略、およびコード管理の経験を強化

このチャプターを終えると、単純な状態管理から一歩進んで
「スライス単位の構造化されたグローバル状態管理」を自ら実装できるレベルに到達します。
実務でRedux Toolkitをどのように使うのか気になっていた方にも、強くおすすめする実践的なチャプターです。

Chapter 15
Zustand

複雑な設定なしで素早くグローバル状態を作りたいなら？
このチャプターでは、軽量で直感的なグローバル状態管理ライブラリであるZustandを学習します。
Reduxより軽くContextより強力な構造で、実務でもますます注目を集めている状態管理の代替案です。

🔹 Zustandの基礎から実践まで

• Zustandの概念と哲学：“Global store with minimal boilerplate”

• 基本的な使い方と状態の定義方法

• 状態に引数を渡し、派生状態を簡単に作成できる構造

• ✅ persist機能でローカルストレージなどの永続化保存

• ✅ subscribeWithSelectorを利用した再レンダリングの最適化

• ✅ immerを通じて不変性管理を直感的に

• ✅ devtools連携でデバッグまで簡単に処理

🧩 実践：UserProfile 状態の実装

• UserProfileの状態をZustandベースで再実装

• Redux/Contextと比較した際のコード量、直観性、拡張性の違いを体験

🧩 ミッション：TodoアプリのZustandリファクタリング

• 既存のToDoアプリをZustandベースに転換

• ✅ コンポーネントがグローバル状態を使用する様々な方法を直接実装

• 状態変更 → UIレンダリング → 保存/復元の流れを最小限のコードで実装する経験を提供

このチャプターを終えると、3つの状態管理ツール（Context API、Redux Toolkit、Zustand）をすべて体験した実力者として、
状況に合わせたグローバル状態管理ツールを判断し、選択できる実務的な基準と感覚を身につけることができます。

Chapter 16
データ通信

さあ、Reactアプリを「生きているアプリ」にする時が来ました。
このチャプターでは、実際のサーバーと通信する方法を学習し、これをPostBrowserミニプロジェクトに直接繋いでみることで、Reactアプリの実戦的な通信構造を完成させていきます。

🔹 データフェッチの基礎

• HTTP通信の基本概念と構造

• json-serverでローカルAPIサーバーを構成 → 🛠 実習ベースのAPI環境構築

• Thunder Clientを活用したAPIテスト自動化

• 📝 db.json ファイル構成ノートの提供により、実習ベースの環境を完備

🔹 fetchを活用したCRUD実習

• 基本リクエスト（GET、POST、PUT、DELETE）の構造を習得する

• ✅ ローディング状態、エラーハンドリング、リクエストのキャンセル(AbortController)など、実践的な要素まで反映

• 🧩 実践中心のCRUD作業をfetchですべて実装し、Reactとの連携フローを理解

🔹 axiosを活用した高度なフェッチング

• axiosの基本形からCRUD全体の流れを整理

• ✅ axios.create()による共通インスタンスの構成

• ✅ インターセプター、エラーハンドリング、レスポンス構造の統合など、実務的な戦略を紹介

🧩 実戦プロジェクト：PostBrowserアプリ

• 基本コードの提供 → Reactアプリへのデータ連携の適用

• 投稿のレンダリング → ページングの実装 → 検索機能の追加まで順次完成

• ✅ 実習を通じて、状態管理、フェッチングの流れ、UIアップデートの流れをすべて総合的に経験

このチャプターを終えると、単なるコンポーネントを超えてAPIと通信する実践的なReactアプリケーションを自ら設計し、実装できる能力を身につけることができます。
その後、TanStack Queryや高度な状態管理へと拡張できる確かな基盤を固めるパートです。

Chapter 17
データ通信の深化

このチャプターはReact 19で導入されたフォーム/非同期関連のAPIを中心に、
データ通信をユーザーエクスペリエンスの観点からどのように最適化できるかを、機能別の実習 + TMDBの実践プロジェクトを通じて学びます。

🔹 React 19のフォーム処理と非同期フロー

• useTransitionを利用したスムーズなUI状態遷移の処理

• 🧩 Transition適用前後の比較実習を通じた体感型学習

• useActionState、form action、useFormStatusを通じた
  → フォーム処理の新しい方式とサーバーアクションの流れを学習

🔹 最新のUX機能の活用

• useOptimisticで楽観的UIを実装

• ✅ 非同期処理の完了を待たずにUIを即座に反映させる最新のUX設計

• use()によるPromiseベースのデータ直接処理およびSuspense連携

• ErrorBoundaryとSuspenseの組み合わせでエラー + ローディング対応戦略を構成

🧩 実践：TMDB映画アプリの開発

• 映画リストのレンダリング → ページング → 無限スクロールの実装まで展開

• 🧩 Suspense + use() + ErrorBoundaryの組み合わせで、実践的で完成度の高い映画アプリを構築

• ✅ 会員登録フローまで統合したサーバーとの通信全サイクルの経験

このチャプターを終えると、単なるfetchやaxiosのレベルを超え、
React 19時代のデータUXをリードする機能を実践的なアプリに自然に組み込めるレベルに到達します。
ユーザー中心のUI応答性とリアルタイム性のあるアプリ実装を求める方に、強くおすすめするパートです。

Chapter 18
React Router v7

Reactアプリケーションにおいて、ルーターはページ構造、データフロー、ユーザーの移動体験を担う核心です。
このチャプターでは、React Router v7の最新APIをベースにSPA構造を設計し、
ルーティング + データローディング + エラーハンドリングまで、完全な遷移フローを構築してみます。

🔹 ルーティングの基礎と構造化

• 基本設置およびルーター設定

• 入れ子（ネスト）ルート、インデックスルート、レイアウトルートの構成

• ✅ ルートプレフィックス、動的/オプショナルセグメント、スプラットなど実務的なパスパターンの学習

• NavLink、Linkを活用したUI中心の移動制御

🔹 フォーム & ナビゲーションの動作

• <Form> コンポーネントによる React Router ベースのフォーム処理の理解

• navigate() 関数を活用したプログラムによる遷移処理

• ✅ 伝統的なform送信方式とルーターベースのアプローチの違いを体験

🔹 データフェッチ + ローディング + エラーハンドリング

• loader属性を通じたルート単位のデータフェッチングフローの設計

• loaderで発生する非同期リクエスト → ローディング処理 → エラーハンドリング

• ✅ loader + suspense、loader + errorElementなど、実践的な構造の実装

このチャプターを終えると、Reactアプリのページ設計からデータフロー、ユーザー体験まで
SPAの構造全般を自ら設計し、運用できるフロントエンド設計力を身につけることができます。

Chapter 19
ファイナルプロジェクト - SULOG

これまで学習したコンポーネント設計、状態管理、データ通信、ユーザーエクスペリエンスの最適化、認証処理、デプロイまで
すべての内容を集約したReactベースのフルスタックプロジェクトの完成段階です。
このチャプターでは、実際のサービスのように動作するブログ型ウェブアプリケーションを直接実装し、デプロイまでを経験します。

🛠 バックエンド + 認証の実装

• MongoDBの設定およびバックエンドAPIの連動

• ✅ カカオログインの実装：アプリケーションの登録からOAuthフロー全体の構成まで

• ✅ 独自の会員登録/ログイン実装：フォーム構成 + サーバー連携 + 状態管理

• トークン認証、エラー処理、認証フローのデバッグ実習

🧩 掲示板機能の全実装

• 掲示板投稿登録 → 画像添付プリセット連動

• ✅ 修正、削除、詳細表示機能まで、すべてのCRUDフローを実現

• コメントの作成、削除、レンダリングロジック → 状態連動および再レンダリング処理

• ✅ バックエンドの修正内容は講義ノートとして提供

🔁 ページネーション + リスト最適化

• メインの掲示板リストをページ単位で読み込む

• ✅ ページナビゲーションコンポーネントを直接設計し、実戦感覚を強化

• 無限スクロールではない定型化されたページング処理戦略の理解

🎯 UIのブラッシュアップ + エラー補完 + 実際のデプロイ

• ユーザーフローに合わせたUI/UXの改善と不備の補完

• ✅ フロントエンド＆バックエンドそれぞれVercelを通じた実際のデプロイ実習

• 実際のサービス基準でドメイン構成、画像最適化、最終点検まで

このファイナルチャプターを終えれば、単なる練習を超えて
「自らユーザー認証ベースのWebサービスを構築し、運営できる開発者」になれます。
講義を通じて学んだすべてのことを完成された一つのサービスとして統合し、実力を証明しましょう！

多彩な実習

各チャプターのレベルに合わせて構成された最適化された実習

デザインが適用されていない実習は除いて、デザインが適用されたものだけを紹介します！

信号機(chapter 08)

ランプ(chapter 08)

電卓(chapter 09)

ログイン(chapter 10)

ToDoリストアプリ(chapter 11)

ユーザー設定(chapter 13)

Post Browser(chapter 16)

TMDB(chapter 17)

ファイナル(chapter 19) - 容量の問題でGIF不可..（涙）

デザインが適用されていない例題まで含めると数十個以上

これら密度の高いすべての例題が、皆さんの段階的な学習を

完璧に助けになることを確信しています。

少々お待ちください！

講義にも自分に合う'相性'があることをご存知ですか？

誰からも認められる大作ゲームが自分には面白くないことがあるように、
講義もすべての人に同じように合うわけではありません。

どんなに評判の良い講義でも自分には合わないこともありますし、
逆に誰かにとっては平凡な講義が自分にとっては最高の講義になることもあります。

ですので、私のすべての講義は最低10%以上無料で公開されています。
実際に受講してみて、私とスタイルの「相性」が合うか確認してみてください！

もし私とスタイルが合うようでしたら、
フロントエンド開発者への一番の近道をご案内します。
私を信じてついてきてください！ 🚀