メタロードマップ
「インターネットの基礎」 から「AI 支援開発」 まで、 モダンなフロントエンド開発者になるための 22 ステップ。 各ステップに既存の学習ロードマップへの導線つき。
現実
フロントエンド開発はゴールが動き続ける領域です。 1 冊だけ読んで完結することはなく、 「読む → 作る → 読む → 作る」 のサイクルが学習の核になります。 このロードマップは 22 ステップ × 既存 105 ロードマップを束ねた航海図です。
ロードマップ
第 1 章
コードを書く前に、 まず Web そのものの仕組みを学びます。 「インターネットはどう動いているか」「HTTP とは何か」「ドメイン名」「ホスティング」「DNS」「ブラウザの動作原理」 の 6 点です。
これらはフロントエンド開発の前提知識であり、 後で API 通信やデプロイの理解が必要になったときに効いてきます。 → フロントエンド入門ロードマップ の冒頭で扱われる領域です。
Web ページの構造を作る言語。 セマンティックなタグの使い方、 フォーム、 アクセシビリティを意識したマークアップを学びます。
roadmap.sh は「HTML・CSS・JavaScript は Web 開発の背骨であり、 たくさんプロジェクトを作って練習せよ」 と強調します。 → アクセシビリティを意識した HTML は Web Accessibility ロードマップ で深掘りできます。
見た目とレイアウトを担当する言語。 Flexbox、 Grid、 レスポンシブデザイン、 メディアクエリ、 アニメーションなどを学びます。
後段で Tailwind などの CSS フレームワークを使う前に、 素の CSS をしっかり理解しておくことが重要です。 → そのあと Modern CSS + Tailwind ロードマップ でユーティリティ系へ。
フロントエンドで唯一動く本格的なプログラミング言語。 文法、 DOM 操作、 Fetch API、 非同期処理 (Promise / async・await)、 ES Modules などを段階的に押さえます。
「最初はバニラ JS でアプリを作れるレベル」 を目指します。 → 中級以上は JavaScript ディープダイブ で言語仕様まで踏み込めます。
Git の基本操作 (commit、 branch、 merge、 rebase) と、 GitHub または GitLab でのリポジトリホスティングを学びます。
チーム開発に入る前に必須のスキル。 → 周辺の開発技能は エンジニアのキャリア・スキルアップ で広く扱っています。
npm、 yarn、 pnpm のいずれかで外部ライブラリを管理する方法を学びます。 package.json の読み方、 依存関係の解決、 スクリプト実行など、 現代の開発フローに必須の知識です。
Node.js エコシステム全体は Node.js バックエンドロードマップ でも詳しく扱います (フロント側でも npm 周りは同じ)。
roadmap.sh はここで一度立ち止まり、 「ここまでの知識で実際にプロジェクトを作れ」 と促します。 ToDo リスト、 電卓、 天気アプリなど、 学んだ HTML・CSS・JavaScript・Git を組み合わせた小さなアプリを作ります。
成果物を増やすこと自体がポートフォリオになります。 → 転職を視野に入れるなら エンジニア転職ロードマップ でアウトプット戦略を整理しておきましょう。
候補は React、 Vue.js、 Angular、 Svelte、 Solid JS。 roadmap.sh では React が「Personal Recommendation (推奨)」、 他は「Alternative Option」 として色分けされています。
React 派: React Hooks マスタリー。 Vue.js 派: Vue.js 入門ロードマップ。 1 つに集中してコンポーネント設計、 状態管理、 ルーティング、 ライフサイクルを習得します。
Tailwind CSS などのユーティリティ系フレームワークを学び、 Prettier (整形)・ESLint (静的解析)・Biome といったコード品質ツールも導入します。
チーム開発で必要な「一貫したコード」 を書くための基礎。 → Modern CSS + Tailwind ロードマップ で Tailwind は単独で深掘りできます。
Vite、 esbuild、 Parcel、 Rollup、 Rolldown などのビルドツールを理解します。 現代の開発では Vite が主流。
ホットリロードやコード分割といった機能の仕組みを知ることが重要。 → Vite を実戦で使う Astro は Astro 静的サイト構築ロードマップ で扱っています。
Vitest、 Jest (ユニットテスト)、 Playwright、 Cypress (E2E テスト) を学びます。 テストを書く習慣は中級以上に進むための分岐点です。
→ ユニットは ユニットテスト入門、 E2E は E2E テスト (Playwright)、 設計思想は TDD 実践ロードマップ で広げられます。
ここで再びプロジェクト制作です。 フレームワーク + テスト + ビルドツールを組み合わせた、 より実践的なアプリを作ります。
この段階で「モダンなバニラ JS / フレームワークでフロントエンドアプリを構築できる」 状態を目指します。 → 設計の引き出しを増やすには デザインパターン入門 や クリーンアーキテクチャ入門 が効きます。
認証戦略 (JWT、 Cookie ベース認証、 OAuth など) を理解し、 Web セキュリティの基礎として CORS、 HTTPS、 CSP (Content Security Policy)、 OWASP Top 10 のリスクを学びます。
→ Web セキュリティ実践ロードマップ と セキュアコーディング で集中的に身につけられます。
roadmap.sh では TypeScript が強く推奨されています。 型注釈、 ジェネリクス、 ユーティリティ型などを学ぶことで、 大規模アプリの保守性が大きく向上します。
→ TypeScript マスタリー で型システムを体系的に学べます。
Custom Elements、 HTML Templates、 Shadow DOM を使った再利用可能なコンポーネントの作り方を学びます。
フレームワークに依存しない標準技術。 → フロントエンド入門ロードマップ でブラウザ標準 API の扱いを補強できます。
サーバーサイドレンダリング (SSR) と静的サイト生成 (SSG) の概念を学び、 Next.js (React)、 Nuxt.js (Vue)、 SvelteKit、 Astro、 Eleventy などのメタフレームワークに進みます。
→ React 系は Next.js App Router ロードマップ、 Vue 系は Nuxt.js 入門、 islands は Astro 静的サイト構築。 SEO やパフォーマンスを意識した実装ができるようになります。
REST に加えて GraphQL (Apollo、 Relay Modern) を学ぶことで、 より柔軟な API 連携が可能になります。
→ GraphQL API ロードマップ で実戦設計まで踏み込めます。 REST 設計と比較したいなら API デザインパターン。
Progressive Web Apps の知識に加え、 React Native・Flutter・Ionic でモバイルへ、 Electron・Tauri でデスクトップへと展開する選択肢を学びます。
→ クロスプラットフォームは Flutter クロスプラットフォーム、 React Native 入門、 iOS は SwiftUI で iOS 開発、 Android は Android × Kotlin。
Lighthouse によるパフォーマンス計測、 DevTools の活用、 Service Worker、 ストリーミングレスポンス、 Cache-Control などを学び、 Vercel、 Netlify、 Cloudflare Pages、 GitHub Pages、 Railway、 Render などにデプロイします。
→ デプロイ自動化は CI/CD パイプライン、 運用観点は オブザーバビリティ・モニタリング で補強できます。
再利用可能な UI コンポーネント群 (Design Systems) の構築、 ブラウザが提供する各種 Web API、 そしてアクセシビリティ (WAI-ARIA、 キーボード操作、 スクリーンリーダー対応) を学びます。
「上級フロントエンドエンジニア」 の証となる領域。 → Web Accessibility ロードマップ と UX リサーチ、 デザイン思考 で立体的に学べます。
ここまでの総合力を試す本格的なプロジェクトを作ります。 roadmap.sh は「この時点で中級フロントエンドエンジニアの専門性があるはずだ」 と述べ、 継続的な実践でスキルを磨くよう促します。
→ 技術選定や設計議論の引き出しを増やすには テックリード ロードマップ や エンジニアリングマネージャー も視野に入れていきます。
近年追加されたセクションで、 Claude Code、 Copilot、 Cursor、 Antigravity などの AI 支援ツールの活用、 LLM の仕組み、 プロンプトエンジニアリング、 コードレビューやドキュメント生成への応用、 さらには AI エージェント・MCP (Model Context Protocol) といった最新トピックが含まれます。
→ LLM 一般は LLM・生成 AI ロードマップ、 プロンプト + RAG は LLM プロンプト + RAG、 エージェント設計は AI エージェント開発。 ここを学び続けることで開発生産性が継続的に伸びます。