「Webエンジニアになりたい。でも、何から始めればいいかわからない」

この記事は、そんな人のために書いた。

ネットで「エンジニア ロードマップ」と検索すると、やたら複雑な図が出てきて逆に混乱するよね。「HTML → CSS → JavaScript → React → Node.js → TypeScript → Docker → AWS → Kubernetes → …」——全部やらなきゃダメなの？って。

答えは「全部やらなくていい」。

2026年の今、未経験からWebエンジニアに転職するために本当に必要なスキルとその学習順序を、現実的なタイムラインと共に紹介する。

この記事の通りに進めれば、6〜12ヶ月でエンジニア転職が現実的に見えてくるはず。

全体像：6ステップのロードマップ

まず全体像を見てほしい。

Phase	期間目安	学ぶこと	ゴール
Phase 1	2〜3週間	HTML / CSS	静的なWebページが作れる
Phase 2	3〜4週間	JavaScript基礎	動きのあるWebページが作れる
Phase 3	4〜6週間	React + TypeScript	SPA（シングルページアプリ）が作れる
Phase 4	3〜4週間	バックエンド基礎	APIサーバーが作れる
Phase 5	4〜6週間	ポートフォリオ制作	転職活動で見せられる成果物がある
Phase 6	4〜8週間	転職活動	内定獲得

合計：約6〜12ヶ月

「もっと早くできない？」と思うかもしれないけど、急いで中途半端なスキルで転職すると、入社後に苦しむ。このペースが最も効率的で、かつ確実。

Phase 1：HTML / CSS（2〜3週間）

何を学ぶか

• HTMLの基本タグ（div, h1-h6, p, a, img, ul/li, form, input等）
• CSSの基本（セレクタ、ボックスモデル、Flexbox、Grid）
• レスポンシブデザイン（メディアクエリ）
• 実際のWebサイトの模写

なぜHTML/CSSから始めるのか

Webエンジニアにとって、HTMLとCSSは文字を読む能力みたいなもの。これなしでは何も始まらない。

ただし、HTMLとCSSは「プログラミング」ではない。マークアップ言語とスタイルシート言語。ロジックを書くわけではないので、比較的取っつきやすい。

具体的な学習ステップ

1. Progateの「HTML & CSS」コース（無料部分だけでOK） — 基本の感覚を掴む
2. MDN Web Docs — 公式ドキュメントでしっかり理解
3. Webサイトの模写を3つやる — これが一番力がつく

模写のやり方

お手本にするサイトを選んで、見た目を真似してHTML/CSSだけで再現する。

おすすめの模写対象：

• Appleの製品紹介ページ
• Airbnbのトップページ
• 自分が好きなサービスのランディングページ

模写が3つ完成したら、Phase 1はクリア。

Phase 2：JavaScript基礎（3〜4週間）

何を学ぶか

• 変数（let, const）、データ型
• 条件分岐（if/else）、ループ（for, while）
• 関数（通常関数、アロー関数）
• 配列操作（map, filter, reduce）
• オブジェクト
• DOM操作（querySelector, addEventListener）
• 非同期処理（Promise, async/await）
• ES6+の構文（分割代入、スプレッド構文、テンプレートリテラル）

これが一番大事なPhase

正直に言うと、JavaScriptの基礎がどれだけしっかりしているかで、その後の成長速度が決まる。

ReactもVueもNode.jsも、全部JavaScript（TypeScript）の上に成り立っている。基礎がグラグラだと、フレームワークを学ぶときに崩壊する。

具体的な学習ステップ

1. Progateの「JavaScript」コース — 基本文法を体験
2. 書籍「JavaScript Primer」 — 無料で読めるWeb書籍。ES2025対応で文法を網羅
3. 小さなアプリを3つ作る

作るべきアプリ

• ToDoリスト — DOM操作の練習。追加・削除・完了切り替え
• 電卓 — イベント処理の練習
• 天気アプリ — API通信（fetch）の練習。OpenWeatherMap API等を利用

この3つが作れたら、JavaScript基礎はOK。

Phase 3：React + TypeScript（4〜6週間）

なぜReactなのか

2026年のフロントエンド求人で最も多いのがReact。求人数でVue.jsの約2倍。転職を考えるなら、Reactを選ぶのが最も合理的。

なぜTypeScriptも一緒に学ぶのか

2026年の現場で、TypeScriptを使わないReact開発はほぼない。最初からTypeScriptで学んだ方が、後から覚え直す手間がない。

何を学ぶか

TypeScript（1〜2週間）：

• 型注釈、型推論
• interface / type
• ジェネリクス（基礎だけ）
• union型、オプショナル

React（3〜4週間）：

• コンポーネントの作り方（関数コンポーネント）
• props / state
• useState / useEffect
• React Router（ページ遷移）
• フォーム処理
• API通信とデータ表示

具体的な学習ステップ

1. TypeScript公式ドキュメント — 基本的な型の使い方
2. React公式チュートリアル — 三目並べゲームを作る
3. Udemyの「React + TypeScript」系講座 — 体系的に学べる
4. 実践アプリを1つ作る

作るべきアプリ

映画検索アプリがおすすめ。

• TMDB APIを使って映画を検索
• 検索結果をカード形式で表示
• 映画の詳細ページ（React Routerで遷移）
• お気に入り機能（ローカルストレージに保存）

これ1つで、React開発に必要なスキルのほとんどを実践できる。

Phase 4：バックエンド基礎（3〜4週間）

フロントエンドだけじゃダメなの？

フロントエンドだけでも転職は可能。でも、バックエンドの基礎を知っているフロントエンドエンジニアの方が圧倒的に市場価値が高い。

APIがどう動いているか、データベースがどう構造化されているかを理解していると、フロントの設計もうまくなる。

何を学ぶか

言語は**Node.js（Express or Hono）**がおすすめ。JavaScriptの延長で学べるから、新しい言語を覚える負荷がない。

• RESTful APIの設計
• Express or Honoでのルーティング
• データベース基礎（PostgreSQL or MySQL）
• ORMの使い方（Prisma）
• 認証の基本（JWTの仕組み）
• 環境変数の管理

具体的な学習ステップ

1. Node.jsとExpressの基本
2. シンプルなAPIを作る（ToDoアプリのバックエンド）
3. データベース接続（Prisma + PostgreSQL）
4. CRUD APIの完成

フロントと繋げてみる

Phase 3で作ったReactアプリのバックエンドを自分で作ってみよう。フロントとバックが繋がった瞬間の「おお！」という感動は、エンジニアリングの醍醐味。

Phase 5：ポートフォリオ制作（4〜6週間）

ポートフォリオは転職の「名刺」

未経験者の転職で最も重要なのはポートフォリオ。職務経歴書よりも、「何を作ったか」が採用判断の決め手になる。

ポートフォリオに必要な要素

要素	詳細
フロントエンド	React + TypeScript
バックエンド	Node.js + Express（またはNext.jsのAPI Routes）
データベース	PostgreSQL or MySQL
認証	ログイン機能
デプロイ	Vercel + Railway or Render等
ソースコード	GitHubにpublic公開
README	プロジェクトの説明、技術スタック、セットアップ方法

おすすめのポートフォリオアイデア

1. タスク管理アプリ（安全牌）

• CRUD機能、ドラッグ&ドロップ、カテゴリ分け
• ログイン機能付き
• 技術: Next.js + Prisma + PostgreSQL

2. 書籍レビューアプリ（差別化しやすい）

• 本の検索（Google Books API連携）、レビュー投稿、評価
• いいね機能、コメント機能
• 技術: React + Express + PostgreSQL

3. 習慣トラッカー（面白い）

• 習慣の登録、毎日の記録、カレンダー表示
• 連続達成日数の表示、統計グラフ
• 技術: Next.js + Prisma + Chart.js

ポートフォリオで差がつくポイント

1. READMEが丁寧 — 「何のアプリか」「なぜ作ったか」「技術選定の理由」を書く
2. コードが読みやすい — 変数名が適切、コンポーネントが整理されている
3. GitHubのコミット履歴がきれい — 「feat: ログイン機能追加」のように意味のあるコミットメッセージ
4. デプロイされている — 実際に動くものをURLで共有できる
5. テストがある — 1つでもテストが書いてあると印象が違う

Phase 6：転職活動（4〜8週間）

転職活動の準備

1. 職務経歴書の作成

• 前職の経験をエンジニアリングの文脈で語る
• 「チームで課題を解決した経験」「論理的に考えて改善した経験」を強調

2. GitHubプロフィールの整備

• プロフィールREADMEを作成
• ピン留めリポジトリにポートフォリオを設定
• 草（Contributions）を生やしておく

3. 技術ブログを数記事書く

• Zenn or Qiitaに学習記録を投稿
• 「○○を実装する際にハマったこと」系の記事が好印象

応募先の選び方

企業タイプ	おすすめ度	理由
Web系自社開発	★★★★★	モダンな技術、成長環境
自社プロダクトのスタートアップ	★★★★☆	裁量が大きい、成長速度が速い
受託開発（モダン技術）	★★★☆☆	多様な案件経験、技術力がつく
SES	★★☆☆☆	配属先次第。技術的に当たり外れが大きい

最初の転職先で「モダンな技術を使えるか」「コードレビューの文化があるか」が、その後のキャリアを大きく左右する。

面接でよく聞かれること

• なぜエンジニアに転職したいのか
• 何を学んできたか、どうやって学んだか
• ポートフォリオの技術的な説明
• チームで何かを成し遂げた経験
• 入社後にどういうエンジニアになりたいか

学習を加速させるコツ

コツ1：毎日の学習時間を確保する

平日2時間、休日4時間が目安。合計で週18時間。これを6ヶ月続ければ、約400〜500時間の学習量になる。

コツ2：アウトプット重視

教材を読む時間とコードを書く時間の比率は、3:7くらいが理想。教材を見ながらでいいから、とにかくコードを書く。

コツ3：GitHubに毎日pushする

学習したコードは必ずGitHubにpushする。コミットの草が続くと、それ自体がモチベーションになる。転職活動でも「毎日学習している証拠」として評価される。

コツ4：ChatGPTやCopilotを活用する

エラーで詰まったときは、ChatGPTに聞く。学習の効率が劇的に上がる。ただし、答えをそのまま使うのではなく、「なぜこのコードで動くのか」を理解すること。

よくある質問

Q. 文系でも大丈夫？

全然大丈夫。エンジニアの半分くらいは文系出身。プログラミングに必要なのは、高度な数学じゃなくて「論理的に考える力」。

Q. 何歳まで転職できる？

20代なら比較的容易。30代前半でも十分可能。30代後半以降は「前職の経験 × プログラミング」の掛け算が重要になる。

Q. 独学とスクール、どっちがいい？

お金があるならスクール。時間があるなら独学。最も現実的なのは「独学で3ヶ月 → 行き詰まったらスクール」のパターン。

Q. 英語力は必要？

あった方が有利だけど、必須ではない。エラーメッセージやドキュメントを英語で読む力があると、学習速度が格段に上がる。

まとめ：今日から始めよう

未経験からWebエンジニアになるロードマップをまとめるとこう。

1. HTML / CSS（2〜3週間）— Webの基礎
2. JavaScript（3〜4週間）— プログラミングの基礎
3. React + TypeScript（4〜6週間）— モダンフロントエンド
4. バックエンド基礎（3〜4週間）— API + データベース
5. ポートフォリオ制作（4〜6週間）— 転職の武器
6. 転職活動（4〜8週間）— 内定獲得

6〜12ヶ月で人生を変えられる。

大変だけど、やる価値は間違いなくある。エンジニアは「スキルが年収に直結する」数少ない職種。今日の1行のコードが、1年後の年収アップに繋がっている。

さあ、まずはPhase 1のHTMLから始めよう。今日、Progateに登録するだけでいい。その一歩が全ての始まりだから。