「HTMLとCSSまでは一通り学んだけど、次に何を学べばいいのか分からない…」
Web制作を学び始めた方から、いちばんよく聞く悩みです。この記事では、世界中のエンジニアが参考にしているroadmap.shのフロントエンドロードマップを使って、何をどの順番で学べばいいのかを整理します。
フロントエンドエンジニアとは
フロントエンドエンジニアとは、Webサイトやアプリケーションの「ユーザーが直接触れる部分」を設計・実装するエンジニアです。
具体的には、HTML・CSS・JavaScriptなどを使って、デザインやテキスト、インタラクション（動き）などをコーディングします。
中でも、HTMLを正しく構造化して実装する役割は「マークアップエンジニア」とも呼ばれることがあり、これはフロントエンドエンジニアの一部として位置づけられる職種です。
フロントエンドエンジニアの需要
近年では、ECサイトや予約システム、SaaSなどのWebサービスをはじめ、スマートフォンやタブレット向けのPWA（Progressive Web Apps）、さらには業務システムや社内ツールのWebアプリ化が急速に進んでいます。
これらのサービスはすべて、ユーザーが操作する「フロントエンド」と呼ばれる画面が必要であり、それを設計・構築するフロントエンドエンジニアの存在は欠かせません。
実際に、日本国内の求人データを見ても「フロントエンドエンジニア」の募集は増加傾向にあり、経験者の年収は600万〜800万円以上と高水準な案件も多く見られます。
特にJavaScriptやReactといったモダンな技術に対応できる人材は不足しており、これから本格的にスキルを身につける初級者にとっても、チャンスの多い分野となっています。
roadmap.shの見方
まずはロードマップそのものの読み方からです。公式のroadmap.shは英語のみですが、ブラウザの翻訳機能を使えば、すべてではないものの日本語で確認できます。
フロントエンドロードマップの全体図（画像をクリックすると公式サイトが開きます）
この記事の画面と解説は2025年版のロードマップをもとにしています。roadmap.shは毎年更新されており、2026年8月時点では2026年版が公開されています。項目の増減はありますが、学ぶ順番の考え方は大きく変わっていません。最新の内容は公式サイトでご確認ください。
学習進捗を記録する
サイト右上のログイン / サインインからアカウントを作ると、自分の学習進捗を記録できます。
長い道のりになるので、どこまで進んだかが残るのは思っている以上に効きます。
アイコンの色は「重要度」
各項目の左に付いている丸アイコンの色が、その項目の重要度を表しています。
| 色 | 原文 | 意味 |
|---|---|---|
| 紫 | Personal Recommendation / Opinion | 推奨・重要スキル |
| 緑 | Alternative Option / Pick this or purple | 代替可。他のツールやスキルで代用できる |
| 灰 | Order not strict / Learn anytime | 優先度は低め。いつ学んでもよい |
緑が並んでいる箇所は、そのうちのどれかひとつを選べば大丈夫という意味です。全部やろうとして手が止まりやすいところなので、覚えておくと迷いません。
理解度を記録する
項目をクリックすると解説パネルが開き、右上から自分の理解度を設定できます。
| 表示 | 状態 |
|---|---|
| Pending（灰） | 未着手 |
| Done（緑） | 完了 |
| In Progress（オレンジ） | 進行中 |
| Skip（黒） | スキップ |
パネルには学習用の参考リンクもまとまっているので、次に何を読むか探す手間も省けます。
学習の手順
基本的には、全体図の青い太線の流れどおりに進めるのが一番進めやすいです。学習をすべてログとして残していきたい方は、1のInternetの後に5のバージョン管理システムを先に学習するのも良いかと思います。
緑アイコンの代替が可能なスキルに関しては、一部短縮して記載しています。
| 順番 | 内容 | 詳細 |
|---|---|---|
| 1 | Internet | インターネットの機能 / HTTP / ドメイン名 / Webホスティング / DNS / ブラウザ |
| 2 | HTML | HTMLの基礎 / セマンティックHTML / フォームと検証 / アクセシビリティ / SEOの基礎 |
| 3 | CSS | CSSの基礎 / レイアウトの作成 / レスポンシブウェブデザイン |
| 4 | JavaScript | DOM操作 / Fetch API |
| 5 | バージョン管理システム | Git / GitHub |
| 6 | パッケージマネージャー | npm / yarn / pnpm |
| 7 | フレームワーク | React / Vue.js など |
| 8 | モダンCSS、構築保守や設計手法 | Tailwind CSS / OOCSS、BEM、SMACSS / SCSS・SASS、PostCSS |
| 9 | ビルドツール | ESLint・Prettier / Vite / esbuild / Webpack |
| 10 | テスト環境の構築 | Vitest / Basic認証 / Webセキュリティの知識 |
| 11 | TypeChecker | JavaScript：TypeScriptとFlow / Python：mypy |
| 12 | サーバーサイドレンダリング（SSR） | React / Vue.js |
| 13 | Webアプリケーション | GraphQL / プログレッシブウェブアプリ（PWA） |
| 14 | 静的サイトジェネレータ（SSG） | Next.js / Astro |
| 15 | モバイルアプリケーション | React Native / Flutter / Ionic |
| 16 | デスクトップアプリケーション | Electron / Tauri |
どこまでできれば何を名乗れるか
あくまで著者の印象ですが、目安としてはこのくらいです。
| 到達度 | 目安 |
|---|---|
| 1〜5 | マークアップエンジニア |
| 1〜14がある程度 | フロントエンドエンジニア |
15と16はモバイルアプリ・デスクトップアプリの領域なので、Web制作の仕事に就くという意味では必須ではありません。
16項目を上から順に完璧にしてから次へ、と考えると確実に息切れします。7のフレームワークまで進んだら、あとは実際に何か作りながら必要になった項目を埋めていくほうが早いです。ロードマップは踏破するチェックリストではなく、迷ったときに現在地を確認する地図として使うのが向いています。
よくある質問
ロードマップの項目は全部やらないとダメですか？
必要ありません。緑アイコンの項目は「どれかひとつを選べばよい」という意味ですし、灰色は優先度が低めです。まずは紫のアイコンが付いた項目を中心に進めて、残りは仕事で必要になったときに足していけば十分です。
HTMLとCSSの次は何を学ぶべきですか？
ロードマップの順番どおりならJavaScriptです。特にDOM操作とFetch APIは、この先のフレームワーク学習の土台になります。ただし作業ログを残していきたい方は、先にGitとGitHub（5番）に触れておくのもおすすめです。
ReactとVue.jsはどちらを選べばいいですか？
求人数や情報量で選ぶならReactです。ロードマップ上でもフレームワークは代替可能な項目として扱われているので、どちらかひとつをしっかり使えるようにするほうが、両方を浅く触るより実務では役立ちます。
ロードマップを全部終えるのにどれくらいかかりますか？
学習にかけられる時間によって大きく変わるので、期間を区切って考えないほうがよいと思います。それよりも、7のフレームワークあたりまで進んだ時点で何か作ってみて、足りない部分を埋めていくほうが結果的に早く形になります。
最後に
毎年、技術は移り変わりますし、全てを網羅することは難しいですが、自分のスキルを増やしてWeb業界を生き抜けるよう頑張りましょう。
ロードマップは年ごとに更新されるので、たまに公式サイトを見に行って、今の自分の位置を確認してみてください。
