Frontend Developer 学習チェックリスト

1. ステップ 01

   インターネットの基礎

   0 / 4

   コードを書く前に Web そのものの仕組みを学ぶ。 後で API 通信やデプロイの理解に効いてくる。

   • HTTP / HTTPS の仕組み
   • ドメイン名と DNS の解決
   • ホスティングとデプロイの概念
   • ブラウザの動作原理 (レンダリング・JavaScript エンジン)
   この領域に役立つ書籍 / ロードマップを見る

   特化ロードマップ

   • フロントエンドエンジニア入門

2. ステップ 02

   HTML を習得する

   0 / 4

   Web ページの構造を作る言語。 セマンティックなタグ、 フォーム、 アクセシビリティを意識したマークアップを学ぶ。

   • セマンティック HTML (article / section / nav / aside)
   • フォーム (input / label / validation 属性)
   • アクセシビリティ基礎 (aria-* / 見出し階層)
   • meta タグと OGP / 構造化データの基礎
   この領域に役立つ書籍 / ロードマップを見る

   特化ロードマップ

   • Web アクセシビリティ(WCAG)
   • フロントエンドエンジニア入門

3. ステップ 03

   CSS を習得する

   0 / 6

   見た目とレイアウト。 Flexbox / Grid / レスポンシブ / アニメーションを素の CSS でしっかり理解してから Tailwind 等へ。

   • セレクタ・カスケード・詳細度
   • Flexbox レイアウト
   • CSS Grid レイアウト
   • レスポンシブ・メディアクエリ
   • transition / animation / @keyframes
   • CSS カスタムプロパティ (変数)
   この領域に役立つ書籍 / ロードマップを見る

   特化ロードマップ

   • モダン CSS と Tailwind

4. ステップ 04

   JavaScript を習得する

   0 / 6

   フロントで唯一動く本格的なプログラミング言語。 「最初はバニラ JS でアプリを作れるレベル」 を目指す。

   • 文法 (var/let/const、 関数、 スコープ、 クロージャ)
   • DOM 操作 (querySelector、 addEventListener、 createElement)
   • Fetch API と JSON
   • 非同期処理 (Promise、 async/await、 try/catch)
   • ES Modules (import/export、 動的 import)
   • 配列メソッド (map/filter/reduce、 イテレータ)
   この領域に役立つ書籍 / ロードマップを見る

   特化ロードマップ

   • JavaScript 深掘り(中級)

5. ステップ 05

   バージョン管理 (Git / GitHub)

   0 / 4

   チーム開発に入る前に必須のスキル。 個人開発でも履歴管理として早めに身につけたい。

   • commit / branch / merge / rebase
   • remote / push / pull / fetch
   • GitHub Pull Request と code review
   • コンフリクト解消
   この領域に役立つ書籍 / ロードマップを見る

   特化ロードマップ

   • エンジニアのキャリアアップ

6. ステップ 06

   パッケージマネージャー

   0 / 3

   npm / yarn / pnpm のいずれかで外部ライブラリを管理する。 package.json の読み方が現代開発の基礎。

   • npm install / scripts / lockfile
   • セマンティックバージョニング (^ ~ exact)
   • workspace と monorepo の基礎 (pnpm workspace 等)
   この領域に役立つ書籍 / ロードマップを見る

   特化ロードマップ

   • Node.js でサーバサイド開発

7. ステップ 07

   初級プロジェクトを作る

   0 / 4

   学んだ HTML・CSS・JavaScript・Git を組み合わせた小さなアプリ。 完成品をポートフォリオに積み上げる。

   • ToDo リストアプリ (localStorage 永続)
   • 電卓アプリ
   • 天気アプリ (公開 API 連携)
   • 自分のポートフォリオサイトを公開
   この領域に役立つ書籍 / ロードマップを見る

   特化ロードマップ

   • エンジニア転職準備

8. ステップ 08

   フレームワークを 1 つ選んで学ぶ

   0 / 4

   React / Vue / Angular / Svelte / Solid のうち 1 つに集中。 roadmap.sh では React が推奨。

   • コンポーネント設計 (props / children / 合成)
   • 状態管理 (hooks / store)
   • ルーティング
   • ライフサイクル / Effect
   この領域に役立つ書籍 / ロードマップを見る

   特化ロードマップ

   • React Hooks 習熟
   • Vue.js 入門

9. ステップ 09

   CSS フレームワーク・Linter・Formatter

   0 / 4

   Tailwind 等のユーティリティ系と、 Prettier / ESLint / Biome 等のコード品質ツールを導入。

   • Tailwind CSS のユーティリティ思考
   • Prettier で整形ルールを共有
   • ESLint で静的解析
   • デザイントークン (色・フォント・spacing)
   この領域に役立つ書籍 / ロードマップを見る

   特化ロードマップ

   • モダン CSS と Tailwind

10. ステップ 10

    モジュールバンドラー

    0 / 3

    Vite / esbuild / Parcel / Rollup。 現代は Vite が主流、 ホットリロード + コード分割の仕組みを理解する。

    • Vite の HMR と build
    • コード分割と動的 import
    • Tree shaking の仕組み
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • Astro で高速な静的サイト構築

11. ステップ 11

    テスト

    0 / 4

    Vitest / Jest (ユニット) と Playwright / Cypress (E2E)。 中級以上に進む分岐点。

    • ユニットテスト (Vitest / Jest)
    • コンポーネントテスト (Testing Library)
    • E2E テスト (Playwright / Cypress)
    • TDD のサイクル (Red → Green → Refactor)
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • ユニットテスト入門
    • E2E テスト(Playwright / Cypress)
    • TDD 実践

12. ステップ 12

    中級プロジェクトを作る

    0 / 3

    フレームワーク + テスト + ビルドツールを組み合わせた実践的アプリ。 「モダン環境で完結できる」 状態を目指す。

    • API 連携 SPA (認証なし)
    • 認証つき個人ダッシュボード
    • Vercel / Netlify / Cloudflare Pages にデプロイ
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • デザインパターン 23 選
    • クリーンアーキテクチャ

13. ステップ 13

    認証とセキュリティ

    0 / 4

    認証戦略 (JWT / Cookie / OAuth) と Web セキュリティ基礎 (CORS / CSP / OWASP Top 10)。

    • 認証フロー (Cookie / JWT / OAuth)
    • CORS と Same-Origin Policy
    • Content Security Policy (CSP)
    • OWASP Top 10 の脅威分類
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • Web セキュリティ実践
    • セキュアコーディング — 脆弱性を作らない開発

14. ステップ 14

    型システム (TypeScript)

    0 / 5

    roadmap.sh では TypeScript が強く推奨。 大規模アプリの保守性が大きく向上する。

    • 型注釈の基礎 (string/number/object/array)
    • interface と type alias
    • ジェネリクス
    • ユーティリティ型 (Partial / Pick / Omit / Record)
    • 型の絞り込み (type guard / discriminated union)
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • TypeScript 習熟

15. ステップ 15

    Web Components

    0 / 3

    Custom Elements / HTML Templates / Shadow DOM。 フレームワークに依存しない標準技術。

    • Custom Elements の定義
    • Shadow DOM とスタイル隔離
    • HTML Templates と Slot
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • フロントエンドエンジニア入門

16. ステップ 16

    SSR・SSG・メタフレームワーク

    0 / 4

    サーバーサイドレンダリングと静的サイト生成。 Next.js / Nuxt.js / SvelteKit / Astro / Eleventy へ。

    • SSR / SSG / ISR の概念と使い分け
    • Next.js App Router
    • Nuxt.js 3 (Vue 系)
    • Astro (islands architecture)
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • Next.js App Router 実践
    • Nuxt.js 入門
    • Astro で高速な静的サイト構築

17. ステップ 17

    GraphQL

    0 / 3

    REST に加えて GraphQL (Apollo / Relay)。 より柔軟な API 連携が可能になる。

    • GraphQL スキーマ定義
    • Query / Mutation / Subscription
    • クライアント (Apollo / Relay / urql)
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • GraphQL API 設計
    • API 設計のベストプラクティス

18. ステップ 18

    PWA・モバイル・デスクトップ展開

    0 / 5

    PWA + React Native / Flutter / Ionic でモバイル、 Electron / Tauri でデスクトップへ。

    • PWA (Service Worker + Manifest)
    • React Native でモバイル
    • Flutter でクロスプラットフォーム
    • iOS ネイティブ (SwiftUI) も視野に
    • Android ネイティブ (Kotlin) も視野に
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • React Native 入門 — React からモバイルアプリへ
    • Flutter でクロスプラットフォーム開発
    • iOS を SwiftUI で開発
    • Android を Kotlin で開発

19. ステップ 19

    パフォーマンスとデプロイ

    0 / 4

    Lighthouse 計測、 DevTools、 Service Worker、 Cache-Control。 Vercel / Netlify / Cloudflare Pages 等へデプロイ。

    • Lighthouse でパフォーマンス計測
    • Core Web Vitals (LCP / FID / CLS)
    • Service Worker と Cache-Control
    • CI/CD で自動デプロイ
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • CI/CD パイプライン構築
    • オブザーバビリティと監視

20. ステップ 20

    デザインシステム・Web API・アクセシビリティ

    0 / 5

    再利用可能 UI コンポーネント群、 ブラウザ Web API、 アクセシビリティ (WAI-ARIA / キーボード / SR)。 上級の証。

    • デザイントークンとコンポーネントカタログ
    • Storybook で UI を文書化
    • WAI-ARIA と適切な role/state
    • キーボード操作とフォーカス管理
    • スクリーンリーダー検証
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • Web アクセシビリティ(WCAG)
    • UX リサーチ・情報設計
    • デザイン思考入門

21. ステップ 21

    上級プロジェクト

    0 / 3

    ここまでの総合力を試す本格プロジェクト。 中級フロントエンドエンジニアの専門性を証明する成果物を作る。

    • 認証 + DB + デプロイまで自走できる SPA
    • Lighthouse 90+ を全項目で達成
    • ユニット + E2E のテストカバレッジ 70%+
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • テックリード
    • エンジニアリングマネージャー

22. ステップ 22

    AI 支援開発 (2026 年版の新領域)

    0 / 5

    Claude Code / Copilot / Cursor 等の AI 支援、 LLM の仕組み、 プロンプトエンジニアリング、 AI エージェント・MCP。

    • Claude Code / Copilot / Cursor を試す
    • プロンプトエンジニアリングの型
    • LLM の仕組み (tokens / context window)
    • RAG (Retrieval-Augmented Generation)
    • AI エージェント・MCP (Model Context Protocol)
    この領域に役立つ書籍 / ロードマップを見る

    特化ロードマップ

    • LLM / 生成 AI 時代の機械学習
    • LLM プロンプト・RAG 実装
    • AI エージェント開発

全ロードマップを検索する →