フロントエンドエンジニアとは？
フロントエンドエンジニアとは、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業界を生き抜けるよう頑張りましょう。
