フロントエンドエンジニアとは？
フロントエンドエンジニアとは、Webサイトやアプリケーションの「ユーザーが直接触れる部分」を設計・実装するエンジニアです。
具体的には、HTML・CSS・JavaScriptなどを使って、デザインやテキスト、インタラクション（動き）などをコーディングします。
中でも、HTMLを正しく構造化して実装する役割は「マークアップエンジニア」とも呼ばれることがあり、これはフロントエンドエンジニアの一部として位置づけられる職種です。
HTML/CSSは学んだけれど、次に何をすればいいかわからない…と考えている方にはぜひフロントエンドエンジニアロードマップを参考にしていただきたいです。
フロントエンドエンジニアの需要
近年では、ECサイトや予約システム、SaaSなどのWebサービスをはじめ、スマートフォンやタブレット向けのPWA（Progressive Web Apps）、さらには業務システムや社内ツールのWebアプリ化が急速に進んでいます。
これらのサービスはすべて、ユーザーが操作する「フロントエンド」と呼ばれる画面が必要であり、それを設計・構築するフロントエンドエンジニアの存在は欠かせません。
実際に、日本国内の求人データを見ても「フロントエンドエンジニア」の募集は増加傾向にあり、経験者の年収は600万〜800万円以上と高水準な案件も多く見られます。
特にJavaScriptやReactといったモダンな技術に対応できる人材は不足しており、これから本格的にスキルを身につける初級者にとっても非常にチャンスの多い分野となっています。
フロントエンドエンジニアになるための学習ロードマップ
「HTMLとCSSまでは一通り学んだけど、次に何を学べばいいのか分からない…」
そんな方に向けて、世界中のエンジニアが参考にしている「roadmap.sh」の2025年版フロントエンドロードマップの見方と学習の進め方を整理しました。
この記事では、ロードマップに登場する、学習ポイントを解説していきます。
ロードマップ全体
公式のroadmap.sh自体は英語のみですが、ブラウザの翻訳機能を使うことで全てではないですが翻訳を確認することができます。
学習進捗の記録
サイト右上、ログイン/サインインをすると自分の学習進捗を記録できます。
学習ロードマップの重要度
| （紫） Personal Recommendation / Opinion | 推奨 / 重要スキル |
| （緑） Alternative Option / Pick this or purple | 代替可 / 他のツールやスキルで代替可能 |
| （灰） Order not strict / Learn anytime | 優先度(低) / いつ学んでもOK |
学習ロードマップの理解度
| （灰）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がある程度できてフロントエンドエンジニアという印象を受けます。
毎年、技術は移り変わりますし全てを網羅することは難しいですが自分のスキルを増やしてWeb業界を生き抜けるよう頑張りましょう。