学習ロードマップ
フロントエンドエンジニア入門
JavaScript の基礎から TypeScript、React、Next.js へ。モダン Web フロントエンド開発に必要な層を順に積み上げる。
SCROLL TO BEGIN
学習ロードマップ
JavaScript の基礎から TypeScript、React、Next.js へ。モダン Web フロントエンド開発に必要な層を順に積み上げる。
このロードマップが扱うもの
モダンなフロントエンド開発を、HTML / CSS / JavaScript の土台から始めて、コンポーネント設計・状態管理・パフォーマンス・アクセシビリティまで体系的に身につけるためのロードマップです。対象は、これからフロントエンドを本職にしたい初中級エンジニア、あるいはサーバーサイドからフロントへ越境したい開発者。学び終える頃には、要件から UI を設計・実装し、品質と保守性を意識して改善まで回せる状態を目指します。
このロードマップの全体像
モダンなフロントエンド開発を、HTML / CSS / JavaScript の土台から始めて、コンポーネント設計・状態管理・パフォーマンス・アクセシビリティまで体系的に身につけるためのロードマップです。対象は、これからフロントエンドを本職にしたい初中級エンジニア、あるいはサーバーサイドからフロントへ越境したい開発者。学び終える頃には、要件から UI を設計・実装し、品質と保守性を意識して改善まで回せる状態を目指します。
1. Web 標準の再入門: セマンティック HTML、CSS レイアウト(Flexbox / Grid)、レスポンシブ、ブラウザの仕組み。 2. モダン JavaScript / TypeScript: ES の主要機能、非同期処理、型設計、モジュールとビルドツール。 3. コンポーネント指向フレームワーク: React を中心に、コンポーネント設計、ルーティング、フォーム、テスト。 4. 状態管理とデータ取得: クライアント状態とサーバー状態の分離、キャッシュ戦略、SWR / React Query 的な考え方。 5. スタイリングと UI 設計: デザインシステム、CSS-in-JS / ユーティリティ CSS、アクセシビリティ(WAI-ARIA)。 6. パフォーマンスと運用: レンダリング戦略(CSR / SSR / SSG)、Core Web Vitals、エラーログとフロント監視。
フレームワークから入るとブラックボックスが増え、デバッグで詰まりやすくなります。ブラウザと Web 標準の基礎に時間をかけると、バージョンが変わっても持つ知識が積み上がります。UX / UI デザインの基本用語、アクセシビリティ、Web セキュリティ(XSS / CSP / CORS)、ネットワーク(HTTP / TLS)はフロント開発の質を大きく左右するので、並行して少しずつ触れておくと長期的な伸びにつながります。
ロードマップ
第 1 章
Web 制作〜アプリの両方で使える JavaScript の文法・DOM 操作・非同期処理を広く浅く通しで。ここで「何が書けるか」を知ってから型の話に入る。
JavaScript の書き方を型でどう強化するか。基本文法だけでなく「なぜ any を避けるか / どこまで型で表現するか」の感覚を獲得する 1 冊。
Facebook 製の公式リファレンス本。コンポーネント単位で UI を組み立てる思想と、props/state/hooks の最低限を整理して受け止める。
Web アプリを一気通貫で組み上げる具体例。ここまでで学んだ JS/TS/React が、実際にどう組み合わさって「動くサービス」になるかを体感する。
基礎を復習したくなった / もっと小さなアプリを自分で作って手を慣らしたい人向け。アウトプット量を増やすための副読本として置いておく。