フロントエンドエンジニア学習ロードマップ2026〜0から月収80万まで・現役エンジニアの完全マップ〜

「フロントエンドエンジニアになりたいけど、何から始めればいいのか分からない」「学習コストが高すぎて挫折しそう」「30代からでも間に合うのか」——本記事は、現役フロントエンドエンジニア(週5フルリモート/年収900万超)として活動する筆者が、0からフロントエンドエンジニアとして月収80万円(年収約960万円)を目指すための完全ロードマップを体系化したものです。

本記事の特徴は3つです。(1) 全6フェーズ・累計約1,000時間の現実的な学習設計、(2) 各フェーズで実際に書くコードと判断軸の明示、(3) スクール・独学・副業・転職の意思決定フレームの提示。「Reactチュートリアルだけやって終わり」のロードマップ記事ではなく、市場で評価される実装力を身につけるための実践マップとして書きました。

本サイト内の各技術記事(React 20本/TypeScript 15本/JavaScript 14本/Framework 15本/Backend 11本=計72本)を学習フェーズに沿って導線化しています。「次に読むべき1本」が常に見えるよう、各Phaseの該当記事リンクを埋め込みました。ブックマーク推奨です。

  1. 1. なぜ今フロントエンドエンジニアなのか〜市場規模と年収の現実〜
    1. 1.1 国内フロントエンド求人の市場規模
    2. 1.2 年収レンジの実態〜未経験から1,000万まで〜
    3. 1.3 AI時代でもフロントエンド需要が落ちない理由
  2. 2. 学習フェーズの全体像〜基礎→応用→実務〜
    1. 2.1 全6フェーズの俯瞰
    2. 2.2 フェーズ別の到達ゴール
    3. 2.3 「やってはいけない学習法」3選
  3. 3. Phase 1: HTML/CSS/JavaScript(2-3ヶ月・150-200時間)
    1. 3.1 このフェーズで身につけるべきこと
    2. 3.2 セマンティックHTMLの基本
    3. 3.3 Flexbox/Gridでカードレイアウト
    4. 3.4 モダンJavaScript基礎〜押さえるべき5機能〜
    5. 3.5 Phase 1の卒業テスト
  4. 4. Phase 2: React + TypeScript(2-3ヶ月・200-250時間)
    1. 4.1 なぜReact + TypeScriptなのか
    2. 4.2 Reactの最小コンポーネント
    3. 4.3 useEffect でAPI呼び出し
    4. 4.4 カスタムフックでロジック分離
    5. 4.5 TypeScript型定義のコツ
    6. 4.6 Phase 2の卒業テスト
  5. 5. Phase 3: Next.js + Tailwind CSS(1-2ヶ月・100-150時間)
    1. 5.1 なぜNext.jsか
    2. 5.2 App Routerでページを書く
    3. 5.3 Server Actionsでフォーム送信
    4. 5.4 Tailwind CSSのスタイル設計
  6. 6. Phase 4: バックエンド入門(1-2ヶ月・100-150時間)
    1. 6.1 フロントエンドエンジニアにバックエンドは必要か
    2. 6.2 Honoで最速API構築
    3. 6.3 Prisma + PostgreSQLでDB設計
  7. 7. Phase 5: ポートフォリオ作成(1-2ヶ月・150-200時間)
    1. 7.1 「採用される」ポートフォリオの条件
    2. 7.2 ポートフォリオ題材の選び方
    3. 7.3 認証付きアプリの最小コード(Next.js + Auth.js)
    4. 7.4 テスト・CIのセットアップ
  8. 8. Phase 6: 転職活動(1-3ヶ月・100-200時間)
    1. 8.1 媒体ごとの戦略
    2. 8.2 職務経歴書テンプレ(未経験版)
    3. 8.3 コーディングテスト対策
  9. 9. ロードマップ早見表〜全フェーズ・累計時間・推奨教材〜
  10. 10. 推奨教材〜無料・有料・本〜
    1. 10.1 無料(まずここから)
    2. 10.2 有料(時間を金で買うフェーズ)
  11. 11. プログラミングスクール比較〜主要4校の選び方〜
    1. 11.1 主要4校の特徴整理
    2. 11.2 スクール選びの判断軸5つ
    3. 11.3 失敗するスクール選びの典型例
  12. 12. 独学 vs スクール〜どちらを選ぶか〜
    1. 12.1 独学が向いている人
    2. 12.2 スクールが向いている人
    3. 12.3 「スクール+独学」ハイブリッドが最強
  13. 13. 30代以降の学習戦略〜年齢の壁を越える〜
    1. 13.1 30代未経験は本当に難しいか
    2. 13.2 30代以降が取るべき戦略
  14. 14. 副業 vs 転職〜2026年の最適解〜
    1. 14.1 ルート別の比較
    2. 14.2 副業先の見つけ方
  15. 15. 年収アップロードマップ〜月収80万まで〜
    1. 15.1 年収帯別のスキル要件
    2. 15.2 「月収80万」の現実ルート
  16. 16. AI時代のエンジニア〜GitHub Copilot/Cursor活用必須〜
    1. 16.1 2026年エンジニアのAI環境
    2. 16.2 AIを使うエンジニアの新スキル
    3. 16.3 AI時代に「初心者がやりがちな失敗」
  17. 17. よくある質問(FAQ)
    1. Q1. 数学が苦手でもフロントエンドエンジニアになれますか?
    2. Q2. Mac必須ですか?Windowsでも大丈夫?
    3. Q3. 学習が続かないです。挫折対策は?
    4. Q4. 文系/非情報系卒でも採用されますか?
    5. Q5. Vue/Svelteの方が好きですがReactを学ぶべき?
    6. Q6. ポートフォリオを公開するのが怖い。完璧にしてから出すべき?
    7. Q7. 副業案件はいつから取りに行けますか?
    8. Q8. AIが進化しすぎて、これからエンジニアの仕事はなくなりませんか?
  18. 18. まとめ〜今日から動くチェックリスト〜

1. なぜ今フロントエンドエンジニアなのか〜市場規模と年収の現実〜

1.1 国内フロントエンド求人の市場規模

結論から言うと、フロントエンドエンジニアの需要は2026年現在も衰えるどころか拡大しています。理由はシンプルで、SaaS・EC・社内DXの全てにWebUIが必要だからです。AIによってコード生成は加速しましたが、「要件を理解してUIに落とす」「ユーザビリティを設計する」「型安全な実装で事故を防ぐ」という上位スキルの需要は逆に高騰しました。

主要転職媒体の求人数(2026年5月時点・筆者観測)を表にまとめます。

媒体「フロントエンド」求人数「React」指定「Next.js」指定年収レンジ中央値
Findy約4,800約3,200約2,100650-900万
LAPRAS約3,100約2,400約1,600600-850万
転職ドラフト約1,800約1,500約1,100700-1,000万
Wantedly約12,000約7,800約5,400500-800万
Green約8,500約5,600約3,900550-850万

1.2 年収レンジの実態〜未経験から1,000万まで〜

「フロントエンドで年収1,000万は無理」と言われた時代もありましたが、2020年以降の状況は完全に変わりました。実数値ベースで年収レンジを見ていきましょう。

経験年数SES/受託事業会社外資/メガベンチャーフリーランス(月単価)
未経験〜1年300-380万400-500万500-650万40-55万
1-3年380-500万500-700万700-900万60-80万
3-5年500-650万650-900万900-1,300万80-110万
5-10年600-800万800-1,200万1,200-1,800万100-150万
10年+/テックリード700-900万1,000-1,500万1,500-2,500万120-200万

本記事の目標である月収80万円(年収約960万円)は、事業会社で3年経験を積めば射程圏、フリーランス(月単価80万)であれば実務2年で十分到達可能です。後段で具体的な到達ルートを示します。

1.3 AI時代でもフロントエンド需要が落ちない理由

「AIがコードを書く時代にエンジニアは要らない」という言説が定期的に流れますが、現場感覚では逆に上位エンジニアの需要が高騰しています。理由は以下です。

  • 要件定義→UI設計→実装の翻訳工程は依然として人間の領域。AIは要件を聞き出せない。
  • 事故が起きた時の責任ある修正(本番障害、データ整合性)はAIに任せられない。
  • 非機能要件(アクセシビリティ、Core Web Vitals、セキュリティ)を満たす設計判断は経験依存。
  • AIを使いこなす側のエンジニア(プロンプトで100%動くコードを生成できる人)の単価は跳ね上がっている。

2. 学習フェーズの全体像〜基礎→応用→実務〜

2.1 全6フェーズの俯瞰

本ロードマップは6つのフェーズに分かれます。学習時間の合計は約900-1,100時間。1日3時間の学習で約10ヶ月、1日5時間なら約6ヶ月で完走できる設計です。

[Phase 1] HTML/CSS/JavaScript基礎       150-200h ──┐
   │                                                │
   ▼                                                │
[Phase 2] React + TypeScript            200-250h    │ 基礎期間
   │                                                │ 400-500h
   ▼                                                │
[Phase 3] Next.js + Tailwind            100-150h ──┘
   │
   ▼                                              ┐
[Phase 4] バックエンド入門               100-150h  │ 応用期間
   │                                              │ 250-350h
   ▼                                              │
[Phase 5] ポートフォリオ作成            150-200h ─┘
   │
   ▼
[Phase 6] 転職活動                       100-200h
   │
   ▼
[就職/フリーランス開始] → 実務でさらに加速

2.2 フェーズ別の到達ゴール

Phase期間目安到達ゴール判定基準
12-3ヶ月静的サイトを1から作れる5ページサイトを自力で構築できる
22-3ヶ月React+TSでSPAが作れるAPI連携・状態管理・型定義ができる
31-2ヶ月Next.jsでフルスタックUISSR/ISR/Server Actionsを使い分けられる
41-2ヶ月API・DBが理解できるExpress/HonoでREST APIを作れる
51-2ヶ月本気ポートフォリオ完成本番デプロイ済・採用面接で見せられる
61-3ヶ月内定獲得 or 案件獲得年収450万以上 or 月単価50万以上

2.3 「やってはいけない学習法」3選

遠回りパターンの典型を先に潰しておきます。

  1. 動画を見るだけで手を動かさない:写経すらしないと一切残らない。最低でも全コードを自分のエディタで打つ。
  2. 環境構築で1週間溶かす:詰まったらVS Code + Node.js LTSだけ入れて先に進む。Dockerは後回し。
  3. jQueryから入る:2026年に新規でjQueryを書く現場はほぼない。最初からモダンJS+Reactで良い。

3. Phase 1: HTML/CSS/JavaScript(2-3ヶ月・150-200時間)

3.1 このフェーズで身につけるべきこと

「HTML/CSSは1週間でいい」という意見もありますが、セマンティクス・アクセシビリティ・モダンCSSは現場で毎日触る部分です。最低でも以下の項目はコードで書けるようになりましょう。

  • HTML: セマンティック要素、フォーム、aria属性、metaタグ
  • CSS: Flexbox、Grid、カスタムプロパティ、メディアクエリ、CSS関数
  • JavaScript: 変数/関数/配列/オブジェクト/制御構文/非同期処理/モジュール

3.2 セマンティックHTMLの基本

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ポートフォリオ - 山田太郎</title>
</head>
<body>
  <header>
    <nav aria-label="メインナビゲーション">
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/works">作品集</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h1>自己紹介</h1>
      <p>フロントエンドエンジニアです。</p>
    </article>
  </main>
  <footer><small>© 2026 Yamada</small></footer>
</body>
</html>

3.3 Flexbox/Gridでカードレイアウト

/* カードグリッド: 3カラム→2カラム→1カラム */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 24px;
}

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-4px);
}

@media (prefers-color-scheme: dark) {
  .card {
    background: #1f2937;
    color: #e5e7eb;
  }
}

3.4 モダンJavaScript基礎〜押さえるべき5機能〜

// 1. 分割代入
const user = { name: "Taro", age: 28, role: "engineer" };
const { name, age } = user;

// 2. スプレッド構文
const base = { name: "Taro" };
const extended = { ...base, age: 28 };
const list = [1, 2, 3];
const more = [...list, 4, 5];

// 3. テンプレートリテラル
const greeting = `こんにちは、${name}さん(${age}歳)`;

// 4. アロー関数 + 配列メソッド
const users = [{ age: 28 }, { age: 35 }, { age: 22 }];
const adults = users.filter((u) => u.age >= 25).map((u) => u.age);

// 5. async/await + fetch
async function loadUser(id) {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error("読み込み失敗");
  return res.json();
}

JavaScriptの基本をさらに深掘りする場合は、以下の各論記事に進んでください。Phase 1の段階で全てを完璧に理解する必要はありませんが、辞書的に何度も参照することになります。

3.5 Phase 1の卒業テスト

以下を素のHTML/CSS/JS(フレームワーク無し)で自作できればPhase 1合格です。

  • 5ページ構成の自己紹介サイト(レスポンシブ・ダークモード対応)
  • TODOアプリ(localStorageで永続化、追加/編集/削除/フィルタ)
  • 天気予報ビューア(fetchで公開APIから取得・エラー処理あり)

4. Phase 2: React + TypeScript(2-3ヶ月・200-250時間)

4.1 なぜReact + TypeScriptなのか

2026年現在、フロントエンド求人の約65-70%がReactを指定しています。Vue/Svelte/Solidも素晴らしい技術ですが、未経験から最短で就職を狙うならReact + TypeScript一択です。TypeScriptは「実務で使わない現場の方が少数派」というレベルまで普及しました。

4.2 Reactの最小コンポーネント

// Counter.tsx
import { useState } from "react";

type Props = {
  initial?: number;
  step?: number;
};

export function Counter({ initial = 0, step = 1 }: Props) {
  const [count, setCount] = useState(initial);

  return (
    <div>
      <p>現在: {count}</p>
      <button onClick={() => setCount((c) => c + step)}>+{step}</button>
      <button onClick={() => setCount((c) => c - step)}>-{step}</button>
    </div>
  );
}

4.3 useEffect でAPI呼び出し

// UserList.tsx
import { useEffect, useState } from "react";

type User = { id: number; name: string; email: string };

export function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const ctrl = new AbortController();
    (async () => {
      try {
        const res = await fetch("/api/users", { signal: ctrl.signal });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data: User[] = await res.json();
        setUsers(data);
      } catch (e) {
        if (!(e instanceof DOMException && e.name === "AbortError")) {
          setError(e instanceof Error ? e.message : "不明なエラー");
        }
      } finally {
        setLoading(false);
      }
    })();
    return () => ctrl.abort();
  }, []);

  if (loading) return <p>読み込み中…</p>;
  if (error) return <p>エラー: {error}</p>;
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}({u.email})</li>
      ))}
    </ul>
  );
}

4.4 カスタムフックでロジック分離

// useFetch.ts
import { useEffect, useState } from "react";

type State<T> =
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: string };

export function useFetch<T>(url: string): State<T> {
  const [state, setState] = useState<State<T>>({ status: "loading" });

  useEffect(() => {
    const ctrl = new AbortController();
    (async () => {
      try {
        const res = await fetch(url, { signal: ctrl.signal });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data: T = await res.json();
        setState({ status: "success", data });
      } catch (e) {
        if (e instanceof DOMException && e.name === "AbortError") return;
        setState({
          status: "error",
          error: e instanceof Error ? e.message : "unknown",
        });
      }
    })();
    return () => ctrl.abort();
  }, [url]);

  return state;
}

4.5 TypeScript型定義のコツ

// 良いPropsの型定義
type ButtonProps = {
  /** 表示するラベル */
  label: string;
  /** クリック時の挙動 */
  onClick: () => void;
  /** スタイルバリアント */
  variant?: "primary" | "secondary" | "danger";
  /** 無効状態 */
  disabled?: boolean;
  /** アイコン要素(任意) */
  icon?: React.ReactNode;
};

export function Button({
  label,
  onClick,
  variant = "primary",
  disabled = false,
  icon,
}: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {icon}
      <span>{label}</span>
    </button>
  );
}

Phase 2の段階で読むべき本サイトの記事を一覧します。順番通り読み進めると、Reactの基礎→Hooks→状態管理→TypeScript型→実務パターンと地続きで理解できます。

4.6 Phase 2の卒業テスト

  • React + TypeScript + Viteで、ToDoアプリを再実装(localStorageに永続化、ジェネリクスでuseLocalStorageフック自作)
  • 外部APIから取得したデータを表示するSPA(useFetchカスタムフック+ローディング/エラーUI)
  • React Hook Form + Zodでバリデーション付き問い合わせフォーム

5. Phase 3: Next.js + Tailwind CSS(1-2ヶ月・100-150時間)

5.1 なぜNext.jsか

2026年のフロント案件では、ほぼ全ての本番アプリがNext.js(App Router)・Remix・SvelteKit・Astroのいずれかで構築されています。中でもNext.js App RouterはReactエコシステムのデファクトです。Phase 2のReactが書けるなら、Next.jsの追加学習コストは思ったより小さいです。

5.2 App Routerでページを書く

// app/users/page.tsx (Server Component)
type User = { id: number; name: string };

async function fetchUsers(): Promise<User[]> {
  const res = await fetch("https://api.example.com/users", {
    next: { revalidate: 60 }, // ISR: 60秒キャッシュ
  });
  if (!res.ok) throw new Error("Failed to load");
  return res.json();
}

export default async function UsersPage() {
  const users = await fetchUsers();
  return (
    <main className="mx-auto max-w-2xl p-6">
      <h1 className="text-2xl font-bold mb-4">ユーザー一覧</h1>
      <ul className="space-y-2">
        {users.map((u) => (
          <li key={u.id} className="rounded border p-3">
            {u.name}
          </li>
        ))}
      </ul>
    </main>
  );
}

5.3 Server Actionsでフォーム送信

// app/contact/actions.ts
"use server";
import { z } from "zod";
import { redirect } from "next/navigation";

const Schema = z.object({
  name: z.string().min(1, "名前は必須"),
  email: z.string().email("メール形式が不正"),
  body: z.string().min(10, "10文字以上で入力"),
});

export async function sendContact(_prev: unknown, formData: FormData) {
  const parsed = Schema.safeParse(Object.fromEntries(formData));
  if (!parsed.success) {
    return { errors: parsed.error.flatten().fieldErrors };
  }
  // DB保存・メール送信などの副作用
  await fetch("https://api.example.com/contact", {
    method: "POST",
    body: JSON.stringify(parsed.data),
  });
  redirect("/contact/thanks");
}

5.4 Tailwind CSSのスタイル設計

// components/Card.tsx
import { cn } from "@/lib/utils"; // clsx + twMerge

type Props = {
  title: string;
  description: string;
  variant?: "default" | "highlight";
  className?: string;
};

export function Card({ title, description, variant = "default", className }: Props) {
  return (
    <article
      className={cn(
        "rounded-xl border p-6 transition hover:shadow-lg",
        variant === "default" && "bg-white dark:bg-gray-800",
        variant === "highlight" && "bg-amber-50 dark:bg-amber-900/30 border-amber-300",
        className,
      )}
    >
      <h2 className="text-lg font-bold">{title}</h2>
      <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">{description}</p>
    </article>
  );
}

Phase 3で参照すべき本サイトのフレームワーク記事です。

6. Phase 4: バックエンド入門(1-2ヶ月・100-150時間)

6.1 フロントエンドエンジニアにバックエンドは必要か

結論、必要です。2026年現在、求人票で「フロントエンド」と書かれていても、Server Actions・API Routes・BFF(Backend For Frontend)を書ける人材が圧倒的に評価されます。月単価80万以上を狙うなら、Express/Honoで簡易APIが書ける・PrismaでDB設計ができる・REST/GraphQLが理解できる、ここまでがミニマム要件です。

6.2 Honoで最速API構築

// server.ts (Hono)
import { Hono } from "hono";
import { logger } from "hono/logger";
import { z } from "zod";
import { zValidator } from "@hono/zod-validator";

const app = new Hono();
app.use("*", logger());

const Todo = z.object({
  title: z.string().min(1),
  done: z.boolean().default(false),
});

let todos: Array<z.infer<typeof Todo> & { id: number }> = [];
let seq = 1;

app.get("/todos", (c) => c.json(todos));

app.post("/todos", zValidator("json", Todo), (c) => {
  const body = c.req.valid("json");
  const item = { id: seq++, ...body };
  todos.push(item);
  return c.json(item, 201);
});

app.delete("/todos/:id", (c) => {
  const id = Number(c.req.param("id"));
  todos = todos.filter((t) => t.id !== id);
  return c.body(null, 204);
});

export default app;

6.3 Prisma + PostgreSQLでDB設計

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String
  posts     Post[]
  createdAt DateTime @default(now())
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  body      String
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
  published Boolean  @default(false)
  createdAt DateTime @default(now())
}

// lib/posts.ts
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();

export async function listPublishedPosts() {
  return prisma.post.findMany({
    where: { published: true },
    include: { author: { select: { name: true } } },
    orderBy: { createdAt: "desc" },
    take: 20,
  });
}

export async function createPost(input: {
  title: string;
  body: string;
  authorId: number;
}) {
  return prisma.post.create({ data: input });
}

Phase 4で参照すべきBackend記事です。フロントエンドエンジニアでも全て読んでおくと、APIチームとの会話が楽になります。

7. Phase 5: ポートフォリオ作成(1-2ヶ月・150-200時間)

7.1 「採用される」ポートフォリオの条件

ポートフォリオは「チュートリアル写経の寄せ集め」では絶対に評価されません。採用担当が見ているのは以下4点です。

評価軸合格ラインNGパターン
本番デプロイVercel/Cloudflareで動いているlocalhost 動画だけ
独自課題自分の困りごとを解決しているTODOアプリのコピー
技術選定の説明READMEに採用理由を明記「とりあえずReact」
運用観点テスト・CI・型・Linterありmasterに直push

7.2 ポートフォリオ題材の選び方

  • 家計簿アプリ:CRUD・グラフ表示・PWA化。Recharts/Chart.js触れる。
  • 読書記録アプリ:Google Books APIと連携。検索UX・無限スクロール・お気に入り機能。
  • シフト管理SaaS:複数ユーザー・認証・ロール・カレンダーUI(react-big-calendar)。
  • 個人ブログ + CMS:Next.js App Router + microCMS or Sanity。SEO・OGP生成。
  • ペット飼育記録:写真アップロード・地図表示(MapLibre)・タイムライン。

7.3 認証付きアプリの最小コード(Next.js + Auth.js)

// auth.ts
import NextAuth from "next-auth";
import Google from "next-auth/providers/google";

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      if (session.user && token.sub) session.user.id = token.sub;
      return session;
    },
  },
});

// app/dashboard/page.tsx
import { auth, signOut } from "@/auth";
import { redirect } from "next/navigation";

export default async function Dashboard() {
  const session = await auth();
  if (!session?.user) redirect("/login");
  return (
    <main className="p-6">
      <h1>ようこそ、{session.user.name}さん</h1>
      <form action={async () => { "use server"; await signOut(); }}>
        <button>ログアウト</button>
      </form>
    </main>
  );
}

7.4 テスト・CIのセットアップ

// .github/workflows/ci.yml
name: CI
on:
  push:
    branches: [main]
  pull_request:
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
      - uses: pnpm/action-setup@v3
        with:
          version: 9
      - run: pnpm install --frozen-lockfile
      - run: pnpm typecheck
      - run: pnpm lint
      - run: pnpm test --run
      - run: pnpm build

Phase 5で参照すべき品質関連記事です。

8. Phase 6: 転職活動(1-3ヶ月・100-200時間)

8.1 媒体ごとの戦略

媒体向いている人勝ちパターン
FindyGitHub成果ある人偏差値70+でスカウト待ち
LAPRAS技術記事/OSS活動ある人スコア4.0+で待ちの姿勢
転職ドラフト経験1年以上・年収UP狙いレジュメ精度命/指名制
Wantedly未経験〜2年目カジュアル面談で接点拡大
Green20-30代全般気になる連打で母数勝負
ビズリーチ/転職エージェント30代以上・ハイクラス非公開求人の質に期待

8.2 職務経歴書テンプレ(未経験版)

■ 自己PR
営業職5年でユーザーヒアリングと課題定義に強みがあります。
社内の手書きシフト管理を効率化するため、Next.js + Prisma + Supabase で
シフト管理SaaSを個人開発・実運用に乗せました(店舗3拠点で稼働中)。

■ 個人開発
1. shift-manager (https://shift-manager.example.com)
   - Next.js 15 (App Router) / TypeScript / Tailwind / Prisma / PostgreSQL
   - Auth.js (Google OAuth) / Vercel デプロイ
   - Vitest + React Testing Library でユニットテスト 80件
   - GitHub Actions で typecheck / lint / test / build をCI実行
   - 工夫: シフト被りをServer Actionsで検知してリアルタイムバリデーション

■ 業務経験(営業)
- 法人営業: 新規開拓100社/年・年間目標達成3年連続
- チームリーダー: 部下5名のKPI管理・採用面接30名以上対応

8.3 コーディングテスト対策

// 「配列をN個ずつグループ化する」典型問題
function chunk<T>(arr: T[], size: number): T[][] {
  if (size <= 0) throw new RangeError("size must be positive");
  const result: T[][] = [];
  for (let i = 0; i < arr.length; i += size) {
    result.push(arr.slice(i, i + size));
  }
  return result;
}

// 「配列のオブジェクトをキーでグループ化」
function groupBy<T, K extends string | number>(
  arr: T[],
  fn: (item: T) => K,
): Record<K, T[]> {
  return arr.reduce(
    (acc, item) => {
      const key = fn(item);
      (acc[key] ||= []).push(item);
      return acc;
    },
    {} as Record<K, T[]>,
  );
}

9. ロードマップ早見表〜全フェーズ・累計時間・推奨教材〜

Phase項目時間累計推奨教材判定
1HTML/CSS基礎40h40hProgate→MDN5ページ自作
1JS基礎60h100hJavaScript PrimerTODOアプリ
1JS応用50h150h本サイトC01-C14fetch+API
2React基礎60h210h本サイトA01-A08SPA1本
2TypeScript70h280h本サイトB01-B15型付きSPA
2状態管理/Form50h330h本サイトA09-A15大規模SPA
3Next.js60h390h本サイトD02-D03SSR/ISR
3Tailwind30h420h本サイトD08UI完成
3Vite/環境30h450h本サイトD07/D11環境構築
4Node/Express50h500h本サイトE01-E02REST API
4Hono/Prisma60h560h本サイトE03/E05DB連携
5本気ポートフォリオ150h710h個人課題本番デプロイ
5テスト/CI40h750h本サイトA14緑CI
6媒体登録/書類40h790hFindy/転職ドラフト書類通過
6コーディングテスト50h840hAtCoder灰下位合格
6面接対策60h900hOBOG/エージェント内定

10. 推奨教材〜無料・有料・本〜

10.1 無料(まずここから)

  • MDN Web Docs:Web標準の一次情報。CSS関数・新API確認は常に第一選択。
  • JavaScript Primer:azu氏のJS入門書。日本語の最高品質。
  • サバイバルTypeScript:TS入門のスタンダード。
  • React公式チュートリアル(react.dev):Hooks時代の決定版。
  • Next.js Learn:App Router対応の公式インタラクティブ教材。
  • 本サイトの全72記事:体系化された日本語の実践情報。

10.2 有料(時間を金で買うフェーズ)

  • Udemy「フロントエンドエンジニアを目指す方のためのReact講座」シリーズ:時々セール1,500円程度。動画派の入門に最適。
  • Frontend Masters(英語):中級以上の決定版。月額40ドル程度。
  • 技術書典/同人:特定領域の深い知見が日本語で読める。
  • Reactハンズオンラーニング 第2版(オライリー)、プログラミングTypeScript(オライリー)。

11. プログラミングスクール比較〜主要4校の選び方〜

11.1 主要4校の特徴整理

スクール料金目安期間学習形式強みこんな人向け
テックアカデミー17万〜40万4-16週オンライン/マンツーマン現役エンジニアメンター/コース豊富/副業案件保証コースあり働きながら学ぶ社会人
侍エンジニア16万〜80万4-48週オンライン/マンツーマン完全オーダーメイドカリキュラム/転職保証/フリーランスコース独自課題で学びたい人
DMM WEBCAMP17万〜90万4-12週オンライン/教室併用転職保証/給付金対象/未経験特化のメソッド20代の本気転職組
レバテックカレッジ33万円(税込)3ヶ月通学/オンライン大学生限定/レバテックの就活ノウハウ直結大学生・院生

11.2 スクール選びの判断軸5つ

  1. 学習形式:マンツーマン or 集合 or 動画のみ。自走力で選ぶ。
  2. カリキュラム:HTML/CSS止まりは×。React/TypeScript/Next.js/Gitまで含むこと。
  3. メンター品質:現役エンジニア・実務年数3年以上・コードレビューあり。
  4. 転職支援の中身:エージェント紹介 or 自社求人 or 紹介状。出口を確認。
  5. 給付金対応:教育訓練給付金・リスキリング補助金対象なら実質負担が半額以下に。

11.3 失敗するスクール選びの典型例

  • 「3ヶ月で年収600万保証」を鵜呑みにする:実態は条件付き(年齢・経歴・地域)。
  • HTML/CSS/WordPressで終わるカリキュラム:2026年市場では戦力にならない。
  • メンターが学生バイト:現役エンジニアか必ず確認。
  • 独学で十分な人が高額コースを契約:学習計画と動機が明確なら無料教材で十分。

12. 独学 vs スクール〜どちらを選ぶか〜

12.1 独学が向いている人

  • 過去に他のスキル(楽器・受験・資格)を独学で習得した経験がある
  • 1日3時間以上、半年以上継続して学習時間を確保できる
  • Google検索・公式ドキュメント読解に抵抗がない
  • 分からないことをそのまま放置せず、最低30分は自分で調べる粘り強さがある

12.2 スクールが向いている人

  • 独学を3週間以上試したが、環境構築や用語の壁で挫折した
  • 仕事や家庭で学習時間が断片的で、伴走者がいないと進捗が止まる
  • 給付金対象で実質負担が10万円程度に収まる
  • 転職保証コースがあり、退路を断つ意思決定をしたい

12.3 「スクール+独学」ハイブリッドが最強

個人的に推奨するのは、独学で2-3ヶ月走った後、Phase 2-3のReact/TS/Next.js期にだけスクールやメンタリングサービスを使うパターンです。基礎ができている状態でメンターに質問できるので、コスパが圧倒的に高い。MENTAなどでReact現役エンジニアに月3万円で週1コードレビューしてもらうのも非常に有効です。

13. 30代以降の学習戦略〜年齢の壁を越える〜

13.1 30代未経験は本当に難しいか

正直に言うと、20代より難易度は高いです。一部の自社開発・大手企業は20代しか採らない方針があります。しかし「30代未経験でフロントエンドエンジニアに転職して、3年で年収800万」という事例はSESや受託、地方の事業会社、フリーランスを含めれば珍しくありません。

13.2 30代以降が取るべき戦略

  • 前職スキルとの掛け合わせ:営業×フロント、医療×フロント、製造×フロントは強い。業界知識ある人材は希少。
  • SES経由で1年実務を作る:正社員/年収400万でも1年実務を積めば、次の転職で大幅にレンジが上がる。
  • 地方リモート求人を狙う:首都圏争奪戦を避ける。Wantedly/Greenで「フルリモート可」フィルタ。
  • 40代以降は副業→独立ルート:転職よりも、現職継続+副業で実績を作り、最終的にフリーランス化する方が現実的。

14. 副業 vs 転職〜2026年の最適解〜

14.1 ルート別の比較

ルート到達収入時間軸難易度リスク
転職(事業会社)500-900万10-18ヶ月★★★低
転職(SES→事業会社)400→800万24-36ヶ月★★低
副業のみ継続+10-30万/月8-12ヶ月★★★低
副業→フリーランス独立月60-100万18-30ヶ月★★★★中
自社プロダクト(SaaS)0〜青天井24ヶ月+★★★★★高

14.2 副業先の見つけ方

  • ITプロパートナーズ、Workship、クラウドリンクスなどの副業特化媒体
  • Findy副業/レバテックフリーランスの「週1-2日OK」案件
  • X(Twitter)で技術発信→DM相談→稼働
  • 知人経由・前職の同僚経由は単価が高い(直案件)

15. 年収アップロードマップ〜月収80万まで〜

15.1 年収帯別のスキル要件

年収帯必須スキル差別化スキル
400万円React基礎・HTML/CSS・Git—
500万円+TypeScript・Next.js・状態管理テスト経験
600万円+REST/GraphQL消費・Tailwind・Vercel/AWS基礎個人開発の本番運用経験
700万円+設計判断ができる・パフォーマンス改善実績・コードレビュー経験OSSへのコミット
800万円+チームリード経験・テックブログ・登壇採用面接官経験
1,000万円超+技術戦略立案・組織設計・アーキテクトマネジメントorプリンシパル

15.2 「月収80万」の現実ルート

ルートA: 転職(事業会社) → 月収80万(年収960万)
[Phase 1-6] 学習10ヶ月 → 内定(年収450万)
   ↓ 1.5年で評価UP、Next.js+Server Componentsで設計担当
1.5年後: 年収600万(月収50万)
   ↓ 1年で別事業会社に転職(技術面接で設計力アピール)
さらに1年後: 年収820万(月収68万)
   ↓ ストックオプション・賞与・副業10万/月
最終: 月収80万円超(2.5-3年で到達)

ルートB: フリーランス → 月単価80万
[Phase 1-6] 学習10ヶ月 → SES正社員(年収380万)
   ↓ 実務1年・Next.js本番運用経験
1年後: フリーランス化(週5・月単価65万)
   ↓ 単価交渉・複数案件並走
さらに10ヶ月後: 月単価80万(年商960万)

16. AI時代のエンジニア〜GitHub Copilot/Cursor活用必須〜

16.1 2026年エンジニアのAI環境

2026年現在、現役エンジニアの9割以上がAIコード生成ツールを業務利用しています。利用しないと生産性で2-3倍の差がつく時代です。学習段階からAIツールを併用することを強く推奨します。

  • GitHub Copilot:VS Code/JetBrains統合。月10ドル。コード補完の決定版。
  • Cursor:VS Code派生のAIエディタ。チャット型編集が強力。月20ドル。
  • Claude Code/Codex CLI:ターミナルでエージェント的にコード生成。複雑タスクに強い。
  • ChatGPT/Claude.ai(無料/有料):設計相談・エラー解析・ペアプロ相手。

16.2 AIを使うエンジニアの新スキル

  • プロンプトに要件・制約・期待出力を構造化して伝える力
  • 生成コードをレビューして妥当性を判断する力(=本記事のPhase 1-5の基礎)
  • AIが書けない領域(要件定義、UX設計、レガシー解析)で価値を出す力
  • AI支援前提でアーキテクチャを設計する力(関数を小さく・型を強く)

16.3 AI時代に「初心者がやりがちな失敗」

  • AIが書いたコードの意味を理解しないままコピペする(面接で詰む)
  • 「AIに聞けばいい」と基礎学習を省く(プロンプト精度が出ない)
  • AIが提案した古いライブラリ(jQuery、Enzyme等)を盲信する
  • AIに任せきりで、自分の判断力・設計力が育たない

17. よくある質問(FAQ)

Q1. 数学が苦手でもフロントエンドエンジニアになれますか?

なれます。フロントエンドで日常使う数学は中学生レベル(四則・座標・割合)が中心。機械学習やゲームを除けば、線形代数や微積分はほぼ不要です。論理的思考(if/elseの組み立て)の方が重要です。

Q2. Mac必須ですか?Windowsでも大丈夫?

Windowsで全く問題ありません。WSL2 + Ubuntu + VS Codeの組み合わせで本番運用も可能。実際、Microsoftが旗を振っているのでWindowsエコシステムは年々改善しています。資金に余裕があればMacもアリですが必須ではないです。

Q3. 学習が続かないです。挫折対策は?

(1) 「何分やる」ではなく「ファイルを1つ開く」レベルまで起動コストを下げる、(2) GitHubに毎日草を生やす(=Issueコメントでも可)、(3) X(Twitter)で学習ログを発信して同期を見つける、(4) スクールやメンターで強制力を導入する、の4つが有効です。

Q4. 文系/非情報系卒でも採用されますか?

採用されます。現役エンジニアのうち体感3-4割は文系出身です。情報系の知識(アルゴリズム・低レイヤ)はあれば有利ですが、フロントエンドでは「ユーザーが使うUIをきちんと作れる」ことの方が圧倒的に評価されます。

Q5. Vue/Svelteの方が好きですがReactを学ぶべき?

就職を最短で狙うならReact一択ですが、Vue/Svelteの求人もゼロではないです。「自分が継続できる技術」が最重要なので、好きな技術で1本完走→その後Reactで2本目を作るのが現実的です。本サイトでもフレームワーク比較記事で各論を解説しています。

Q6. ポートフォリオを公開するのが怖い。完璧にしてから出すべき?

完璧主義は致命傷です。「動くもの・本番にデプロイされたもの・READMEがあるもの」の3点さえ満たせば、不細工でも先に公開してください。あとから何度でも改善できます。「完成してから出す」マインドの人は永遠に出せません。

Q7. 副業案件はいつから取りに行けますか?

Phase 5(ポートフォリオ完成)後すぐ取れます。週末稼働で月3-10万円から始まり、半年後には月20-30万円が現実的。実務未経験OKのコーポレートサイト改修・LP制作・既存案件のサポート(コードレビュー)などから入るのが王道です。

Q8. AIが進化しすぎて、これからエンジニアの仕事はなくなりませんか?

「単純な実装だけ」のエンジニアの仕事は減ります。一方で「要件定義・設計・運用判断・障害対応・ステークホルダー調整」を含む上位レイヤーの仕事は増えています。本記事のロードマップはまさにその上位レイヤーに到達するための地図です。心配せず、まず手を動かしましょう。

18. まとめ〜今日から動くチェックリスト〜

本記事で示した6フェーズ・累計約900-1,100時間のロードマップは、現実的なペース配分の一例です。重要なのは「完璧な計画より、今日コードを書き始めること」。最後に、今日から始められるチェックリストを置いておきます。

  • ☐ VS Codeをインストールする
  • ☐ Node.js LTS(v22以降)を入れる
  • ☐ GitHubアカウントを作って空リポジトリを1つ作る
  • ☐ JavaScript ベストプラクティス10選を読みながら写経する
  • ☐ 本記事をブックマークし、各Phaseの該当記事へ進む
  • ☐ X(Twitter)で「#今日の学習ログ」を投稿する
  • ☐ 1週間後にもう一度本記事を読み返して進捗を確認する

エンジニア転職は、能力ではなく「動き続けた人」が勝つ世界です。本記事と本サイトの72本の記事が、あなたの現役エンジニアまでの道のりを少しでも短くできれば幸いです。健闘を祈ります。

関連記事の入口として、React Hooks完全実践ガイド、TypeScript完全実践ガイド、Next.js App Router完全ガイドの3本を最初に読むことを推奨します。基礎が固まってきたらReactアンチパターン25選とJavaScript ベストプラクティス10選で実務感覚を磨きましょう。

コメント

タイトルとURLをコピーしました