フロントエンド学習ロードマップ
このページで分かること
-
学習の正しい順番
フロントエンド学習ロードマップとして、何をどの順番で学べばいいかを5ステップで整理する。順番を間違えると遠回りになる。
-
各ステップの期間目安
独学・スクールそれぞれの場合で、各ステップにかかる時間の目安を解説する。全体像が見えると学習が続きやすくなる。
-
詰まりやすいポイントと対処法
職業訓練校3ヶ月の経験から、多くの人が詰まるポイントとその乗り越え方を実体験ベースでまとめた。
フロントエンド学習ロードマップ：全体の期間目安
独学とスクールでは学習ペースが大きく異なる。以下はあくまで目安で、1日の学習時間や事前知識によって変わる。重要なのは「完璧に理解してから次に進む」ではなく「動くものを作りながら理解を深める」姿勢だ。
| ステップ | 内容 | 独学（1日2〜3時間） | スクール |
|---|---|---|---|
| STEP 1 | HTML / CSS 基礎 | 2〜4週間 | 1〜2週間 |
| STEP 2 | レスポンシブデザイン | 2〜3週間 | 1〜2週間 |
| STEP 3 | JavaScript 基礎 | 4〜8週間 | 2〜4週間 |
| STEP 4 | Gitと開発環境 | 1〜2週間 | 3〜5日 |
| STEP 5 | ポートフォリオ制作 | 4〜8週間 | 2〜4週間 |
| 合計目安 | 3〜6ヶ月 | 2〜3ヶ月 | |
各ステップの詳細解説
-
STEP 1｜HTML / CSS の基礎
フロントエンド学習ロードマップの起点となるステップ。HTMLはページの構造を作る言語で、CSSは見た目を整えるための言語だ。この2つはセットで学ぶ。
最初に理解すべきなのはボックスモデルだ。すべての要素が「枠（border）・余白内側（padding）・余白外側（margin）」で構成されているという概念を掴めると、レイアウト崩れの原因が分かるようになる。
学習リソースとしては「Progate」や「ドットインストール」がスタート地点として使いやすい。写経するだけでなく、自分で何か小さいページを作ってみることが定着への近道になる。
詰まりやすいポイント：CSSのセレクタ優先度と`position`プロパティ。最初は動作を確認しながら手を動かすのが最も早い。
-
STEP 2｜レスポンシブデザイン
レスポンシブデザインは、画面サイズに応じてレイアウトを変えるための技術だ。現場ではスマートフォン対応は当然の前提として求められる。できない状態で就職活動に入ると、ポートフォリオの評価が下がる。
習得すべきのは3つ。フレックスボックス・グリッドレイアウト・メディアクエリだ。この3つが使いこなせれば、大半のレイアウトは再現できるようになる。
フレックスボックスは横並びのレイアウト、グリッドレイアウトは縦横の格子状レイアウトに向いている。どちらを使うかは「1方向か2方向か」で判断するのが基本だ。
詰まりやすいポイント：フレックスボックスの`justify-content`と`align-items`の使い分け。実際にブラウザで動かしながら変化を確認するのが理解への近道だ。
-
STEP 3｜JavaScript の基礎
JavaScriptはページに動きをつける言語だ。このステップからHTML/CSSとは難易度が大きく上がる。焦らず時間をかけるべきステップで、ここで詰まって挫折する人が最も多い。
まずjQueryではなく素のJavaScriptから入ることを推奨する。jQueryは便利だが、JavaScriptの基礎が理解できていないと何をやっているか分からなくなる。DOM操作・イベント処理・非同期処理の3つを素のJavaScriptで理解してから、jQueryに移行するのが正しい順番だ。
非同期処理（Promise・async/await）は難しいが、現場では避けられない。完全に理解しなくてもいいが、「なぜこういう書き方をするのか」という背景だけは掴んでおく必要がある。
詰まりやすいポイント：スコープとthisの概念。最初は「動けばOK」くらいの気持ちで進め、使いながら理解を深める方がいい。
-
STEP 4｜Gitと開発環境
GitはコードのバージョンをGitHubというクラウドで管理するためのツールだ。現場では全員がGitを使ってコードを管理するため、使えないと即戦力にならない。
訓練校やスクールのカリキュラムには含まれていないことも多いが、就職後に最初の壁になりやすい。意識的に学んでおく必要がある。
習得すべき操作は限られている。`git init` `git add` `git commit` `git push` `git pull` `git branch` `git merge`の7つが使えれば、最初の現場では対応できる。GitHubでリモートリポジトリを作り、実際にコードを管理しながら覚えるのが最短の習得方法だ。
開発環境はVSCodeを推奨する。拡張機能が豊富で、実際の現場でも使われている頻度が高い。
詰まりやすいポイント：コンフリクト（競合）の解消。複数人でコードを編集するときに発生するが、最初は一人で練習するため実際に経験するのは就職後になることが多い。
-
STEP 5｜ポートフォリオの制作
ポートフォリオは転職活動における最重要の武器だ。「どんなものが作れるか」を採用担当者に見せる場になる。
完璧なものを1つ作るより、完成させた作品を3点以上持つ方が評価される。未完成のコードより、シンプルでも動くものの方が説得力が高い。
作品のテーマは「自分が実際に使いたいもの」を選ぶと完成まで続けやすい。レストランのホームページ・タスク管理ツール・天気予報アプリなど、用途が明確なものが面接でも説明しやすい。
GitHubにコードを公開することも重要だ。採用担当者がコードを見ることがある。コメントを書く習慣・コミット履歴を積み上げる習慣を意識しておく。
詰まりやすいポイント：「何を作ればいいか分からない」という状態。迷ったら既存のサービスのコピーサイトを作るのが最も早い。オリジナリティより完成度と技術の見せ方を優先する。
独学とスクールの使い分け
フロントエンド学習ロードマップは独学でも進められるが、スクールを使うことで詰まる時間を大幅に短縮できる。どちらが向いているかは、学習スタイルと使える時間による。
-
独学が向いている人
自分でエラーを調べて解決するのが苦にならない人。時間を自由に使えて、自己管理ができる人。費用を最小限に抑えたい人。STEP 1〜2はProgate・ドットインストール・MDNドキュメントで十分進められる。STEP 3以降は難易度が上がるため、詰まったときのサポートがないと学習が止まりやすい。
-
スクールが向いている人
独学で何度か挫折した経験がある人。転職までの期間を短くしたい人。現役エンジニアのフィードバックをもらいながら進めたい人。スクールはカリキュラムと締め切りがあるため、学習の継続率が高くなる。費用は高いが、詰まる時間を短縮できる分、結果的にコスパが良くなるケースもある。
スクール選びの基準と4校の比較はフロントエンドスクール比較で詳しく解説している。