TypeScriptで目指すフルスタックWebエンジニア学習ロードマップ

TypeScriptで目指すフルスタックWebエンジニア学習ロードマップ

〜フロントエンドの基礎から、BFF・クリーンアーキテクチャ・AWSまで〜

1. はじめに

本学習計画の目的は、Webアプリケーションのフロントエンドからバックエンド、データベース、クラウドインフラまでを体系的に理解し、設計・実装・テスト・デプロイまで一貫して行えるエンジニアになることである。

学習の出発点として、フロントエンドエンジニアのまめ太郎氏が紹介する2026年版の学習ロードマップを参考にする。

動画では、次の順序で技術を習得することが推奨されている。

HTML/CSS → JavaScript → TypeScript → React → Next.js

この順序を基本としながら、フルスタック開発に必要な技術を追加する。

特に重視するのは、単にフレームワークを使えるようになることではなく、各技術の役割、採用理由、依存関係を理解することである。

1. 学習の基本方針

2.1 基礎から応用へ段階的に進む

ReactやNext.jsなどのフレームワークを学ぶ前に、HTML・CSS・JavaScriptの仕組みを理解する。

JavaScriptについては、特に次の項目を重視する。

• DOM操作とイベント処理
• 関数、オブジェクト、配列
• Promise、async/await
• Fetch APIとHTTP通信
• モジュールと例外処理
• Node.jsの基本的な仕組み

2.2 技術の役割を区別する

本計画では、次の概念を混同せずに理解する。

技術・概念 主な役割
React UIの構築
Next.js ReactベースのWebアプリケーション開発
RTK Query API通信・キャッシュ管理
BFF フロントエンド向けのAPI層
OpenAPI HTTP APIの仕様・契約の定義
クリーンアーキテクチャ 責務とソースコードの依存関係の整理
PostgreSQL リレーショナルデータベース
Prisma DBアクセスとスキーマ管理
AWS アプリケーションの実行・運用基盤

2.3 アウトプット中心で学習する

各技術を学習した後は、必ず小さな制作課題に取り組む。

また、既存のアプリケーションを新しい技術で作り直すことで、その技術が解決する問題を体感する。

例えば、JavaScriptでTodoアプリを実装した後、TypeScriptへ移行し、Reactで再構築する。

2.4 AIを活用しながら理解を深める

ChatGPTなどのAIは、以下の用途で活用する。

• 技術概念の解説と比較
• 理解度確認テスト
• コードレビュー
• 設計レビュー
• エラーの原因分析
• 学習進捗と弱点の分析

ただし、AIが生成したコードをそのまま採用するのではなく、動作原理と設計意図を説明できることを重視する。

⸻

1. 学習ロードマップ全体像

本計画では、7つのフェーズに分けて学習を進める。

Phase 学習分野 期間目安
1 HTML/CSS・Web基礎 1〜2週間
2 JavaScript 2〜3週間
3 TypeScript 1〜2週間
4 React・API通信 2〜3週間
5 Next.js・BFF・OpenAPI 3〜4週間
6 クリーンアーキテクチャ・DB 3〜4週間
7 AWS・テスト・CI/CD・運用 3〜4週間

合計：約15〜22週間（4〜5か月程度）

週10〜15時間の学習を想定した暫定的な計画である。学習経験や制作物の規模によって期間は変動する。

なお、HTTP、Git、テスト、セキュリティなどは特定のフェーズだけで学ぶのではなく、複数のフェーズにわたって継続的に学習する。

⸻

1. Phase 1：HTML/CSS・Web基礎

学習目的

Webページの構造と見た目を制御する仕組みを理解する。

学習項目

HTML

• HTML文書の構造
• セマンティックHTML
• フォームと入力要素
• アクセシビリティの基礎

CSS

• セレクタと詳細度
• ボックスモデル
• Flexbox・Grid
• レスポンシブデザイン

Web基礎

• クライアントとサーバー
• HTTP/HTTPS
• DNSとURL
• ブラウザの開発者ツール

制作課題

レスポンシブ対応の自己紹介Webサイトを制作する。

完了基準

• HTMLとCSSの役割を説明できる
• FlexboxやGridでレイアウトを構築できる
• スマートフォンとPCの表示に対応できる
• ブラウザがWebページを取得する流れを説明できる

⸻

1. Phase 2：JavaScript

学習目的

ブラウザ上で動作するプログラムの仕組みを理解し、外部APIと連携するアプリケーションを実装できるようになる。

学習項目

言語基礎

• 変数とデータ型
• 関数とスコープ
• 配列とオブジェクト
• 分割代入・スプレッド構文
• モジュール

ブラウザ

• DOM操作
• イベント処理
• フォーム処理

非同期処理

• イベントループの基礎
• Promise
• async/await
• Fetch API
• エラーハンドリング

開発環境

• Node.js
• npm
• ESLint・Prettier
• Git・GitHub

制作課題

JavaScriptのみでTodoアプリを制作する。

追加課題として、外部APIからデータを取得して表示する機能を実装する。

完了基準

• DOMを操作して画面を更新できる
• Promiseとasync/awaitの動作を説明できる
• Fetch APIでデータを取得できる
• 通信エラーやHTTPエラーを処理できる
• フレームワークを使用せずに小規模なアプリを作れる

⸻

1. Phase 3：TypeScript

学習目的

型システムを活用して、安全性と保守性の高いコードを実装できるようになる。

学習項目

• 基本型と型推論
• interfaceとtype
• Union型・Intersection型
• Generics
• 型の絞り込み
• タグ付きユニオン
• Utility Types
• tsconfig.json
• 外部データの実行時検証

特に、TypeScriptの型はコンパイル時の仕組みであり、外部APIから取得したデータの正しさを実行時に保証するものではない点を理解する。

制作課題

JavaScriptで制作したTodoアプリをTypeScriptへ移行する。

完了基準

• 適切な型定義ができる
• Genericsを使った関数を実装できる
• 型エラーの原因を説明できる
• 外部APIのレスポンスを安全に扱う方法を理解している

⸻

1. Phase 4：React・API通信

学習目的

コンポーネント指向のUI開発と、フロントエンドにおける状態管理・API通信を習得する。

学習項目

React

• JSX
• コンポーネント
• Props・State
• イベント処理
• useState・useEffect
• カスタムHooks
• コンポーネント設計

API通信

• REST APIの基本
• HTTPメソッドとステータスコード
• Fetch API
• ローディング・エラー状態
• キャッシュと再取得
• RTK Queryの基本

RTK QueryはAPIの実装技術ではなく、APIを利用するクライアント側のデータ取得・キャッシュ管理技術として理解する。

制作課題

TodoアプリをReactで再構築し、API通信を組み込む。

完了基準

• コンポーネントを適切に分割できる
• PropsとStateの役割を説明できる
• API通信の状態をUIに反映できる
• RTK Queryを採用する利点と不要な場面を説明できる

⸻

1. Phase 5：Next.js・BFF・OpenAPI

学習目的

フロントエンドとバックエンドの境界を理解し、API契約に基づいたWebアプリケーションを設計する。

学習項目

Next.js

• App Router
• Server Components
• Client Components
• Route Handlers
• Server Actions
• データ取得とキャッシュ
• レンダリング方式

BFF

• Backend for Frontendの役割
• フロントエンド専用API
• APIの集約
• レスポンス変換
• 認証情報の取り扱い
• バックエンドAPIとの通信

OpenAPI

• OpenAPI Specification
• YAML/JSON形式
• エンドポイント定義
• リクエスト・レスポンスのスキーマ
• APIドキュメント生成
• TypeScript型生成
• APIクライアント生成

想定する構成

React / Next.js
|
v
Next.js BFF
|
v
Backend API
|
v
Database

BFFとバックエンドAPIは、論理的に役割を分離する。

実際に別プロセス・別サービスとしてデプロイするかどうかは、システムの要件に応じて判断する。

制作課題

Next.jsのBFFを介してバックエンドAPIを呼び出す機能を実装する。

OpenAPI仕様を作成し、TypeScriptの型やAPIクライアントを生成する。

完了基準

• Server ComponentsとClient Componentsを使い分けられる
• BFFの役割を説明できる
• OpenAPI仕様を記述できる
• API仕様から型やクライアントコードを生成できる
• APIの変更がフロントエンドへ与える影響を理解している

⸻

1. Phase 6：クリーンアーキテクチャ・データベース

学習目的

ビジネスロジックをフレームワークやデータベースから分離し、変更・テストが容易なシステムを設計する。

学習項目

クリーンアーキテクチャ

• 関心の分離
• 単一責任の原則
• 依存性逆転の原則
• Domain
• Application / Use Case
• Presentation
• Infrastructure
• Repositoryパターン
• Dependency Injection

データベース

• SQL
• テーブル設計
• 主キー・外部キー
• JOIN
• インデックス
• トランザクション
• 正規化
• PostgreSQL

ORM

• Prisma Schema
• Prisma Client
• マイグレーション
• Repository実装

制作課題

Todoアプリのバックエンドにクリーンアーキテクチャを適用する。

PostgreSQLを導入し、データを永続化する。

完了基準

• 各層の責務を説明できる
• 依存関係を内側へ向けた設計ができる
• Use CaseをDBから独立してテストできる
• SQLで基本的なCRUD操作を実行できる
• PrismaによるDB操作を実装できる
• DBの実装を変更してもDomainへの影響を抑えられる

⸻

1. Phase 7：AWS・テスト・CI/CD・運用

学習目的

開発したWebアプリケーションをクラウド上に配置し、安全かつ継続的に運用できるようになる。

学習項目

AWS

• IAM
• VPC
• EC2の基礎
• ECS / Fargate
• RDS
• S3
• CloudFront
• CloudWatch
• Secrets Manager

開発・運用

• Docker
• Docker Compose
• GitHub Actions
• CI/CD
• 環境変数・シークレット管理
• ログ・メトリクス
• 障害調査
• バックアップ
• コスト管理

テスト

• 単体テスト
• 結合テスト
• APIテスト
• E2Eテスト

制作課題

これまでに開発したアプリケーションをAWSへデプロイする。

GitHub Actionsを使って、テストとデプロイの自動化に取り組む。

完了基準

• AWSの主要サービスの役割を説明できる
• Dockerで開発環境を構築できる
• CI/CDパイプラインを構築できる
• ログから障害の原因を調査できる
• 基本的なセキュリティ対策を実施できる
• AWSの利用料金を把握・管理できる

⸻

1. 最終制作課題：学習管理Webアプリケーション

学習した技術を統合するため、最終制作物として個人用の学習管理システムを開発する。

主な機能

1. 学習分野・学習項目の一覧表示
2. 各項目の習熟度管理
3. 学習履歴の登録
4. 学習進捗の可視化
5. 理解度テスト
6. 復習対象の抽出
7. 学習目標と達成状況の管理

技術構成

領域 採用候補
フロントエンド React / Next.js / TypeScript
API通信 Fetch API / RTK Query
BFF Next.js Route Handlers
バックエンド Node.js / TypeScript
API仕様 OpenAPI
アーキテクチャ クリーンアーキテクチャ
DB PostgreSQL
ORM Prisma
インフラ AWS
CI/CD GitHub Actions
学習ノート Obsidian

すべての技術を最初から導入するのではなく、必要になった段階で追加する。

⸻

1. 学習管理と振り返り

日次の学習サイクル

1. 学習する項目と到達目標を決める
2. 公式ドキュメントや教材で学ぶ
3. 小さなコードを書いて検証する
4. 学習内容を自分の言葉で説明する
5. ChatGPTで理解度を確認する
6. Obsidianに知識と疑問点を記録する

週次レビュー

週末には、次の項目を振り返る。

• 計画した学習項目の達成状況
• 制作課題の完成状況
• 理解できなかった概念
• 理解度テストの結果
• 次週に復習する内容
• 学習時間と計画の見直し

習熟度の評価基準

レベル 状態
0 未学習
1 用語や概要を知っている
2 説明を見ながら実装できる
3 自力で実装・説明できる
4 設計上の選択理由やトレードオフを説明できる
5 応用・改善・他者への説明ができる

学習時間だけではなく、実装能力と説明能力を重視して進捗を評価する。

⸻

1. 参考教材・ドキュメント

フロントエンド

• Progate：HTML/CSS入門
• JavaScript Primer
• 『プロを目指す人のためのTypeScript入門』
• React公式ドキュメント
• Learn Next.js

API・アーキテクチャ

• MDN Web Docs
• Redux Toolkit / RTK Query公式ドキュメント
• OpenAPI Specification
• Next.js公式ドキュメント
• クリーンアーキテクチャ関連書籍・資料

データベース・インフラ

• PostgreSQL公式ドキュメント
• Prisma公式ドキュメント
• AWS Skill Builder
• AWS Well-Architected Framework
• Docker公式ドキュメント

⸻

1. おわりに

本学習計画の最終目標は、単に多くの技術を習得することではない。

技術の仕組みを理解し、要件に応じて適切な技術・設計を選択し、Webアプリケーションを自力で構築・運用できるようになることである。

そのために、次の3つを継続する。

理解する → 実装する → 振り返る

基礎から段階的に学習し、制作物を改善しながら、実務でも活用できる技術力を身につけていく。