React / Next.js学習ロードマップ｜未経験から案件獲得までの最短ルート

「Reactを学びたいけど、情報が多すぎてどこから手をつければいいかわからない」。フリーランスを目指す人からこの相談をもらうことが本当に多い。気持ちはわかる。Reactの公式ドキュメント、YouTube、Udemy、書籍、Qiitaの記事…情報の海に溺れそうになるのは私も経験した。

元々は印刷会社のDTPオペレーターをしていて、Web制作に転向したのが5年前。HTMLとCSSはすぐ覚えたけど、JavaScriptで壁にぶつかり、Reactで二重の壁にぶつかり、Next.jsで三重の壁にぶつかった。その壁を一つずつ超えて、今はフリーランスとしてNext.jsの案件を中心に月60〜80万円で安定的に受注している。

この記事では、私自身の試行錯誤をもとに「最短で実務レベルに到達するロードマップ」をまとめた。回り道を減らせるよう、具体的に書く。

前提：HTML / CSS / JavaScriptの基礎

Reactの学習を始める前に、以下の基礎が必要。

• HTML: セマンティックタグ、フォーム要素
• CSS: Flexbox、Grid、レスポンシブデザイン
• JavaScript: 変数、関数、配列操作（map, filter, reduce）、オブジェクト、非同期処理（Promise, async/await）、ES6記法（アロー関数、分割代入、スプレッド構文）

JavaScript基礎が怪しい状態でReactに入ると、「Reactの問題」と「JavaScriptの問題」の区別がつかなくなって挫折する。まずJavaScriptの基礎を2〜4週間で固めてからReactに進もう。

Phase 1：React基礎（3〜4週間）

JSXとコンポーネント

Reactの核心は「UIをコンポーネントという小さな部品に分割して組み立てる」こと。

function JobCard({ title, company, salary }) {
  return (
    <div className="job-card">
      <h3>{title}</h3>
      <p>{company}</p>
      <span>{salary}</span>
    </div>
  );
}

JSXはHTMLに似た記法だけど、JavaScriptの式を {} で埋め込める。最初は違和感があっても、3日も書けば慣れる。

Props

親コンポーネントから子コンポーネントにデータを渡す仕組み。上の例の title, company, salary がProps。

State（useState）

コンポーネント内で変化するデータを管理する仕組み。

const [count, setCount] = useState(0);

「Stateが変わると、そのコンポーネントが再レンダリング（再描画）される」。これがReactの最も重要な概念。最初はピンとこないが、フォーム入力やカウンターを作ると実感できる。

useEffect

コンポーネントのレンダリング後に副作用（API呼び出し、タイマーの設定等）を実行するフック。

useEffect(() => {
  fetch("/api/jobs")
    .then(res => res.json())
    .then(data => setJobs(data));
}, []); // [] は初回レンダリング時のみ実行

依存配列（第2引数の []）の理解が初学者にとって最大の難関。ここは時間をかけて丁寧に理解しよう。

イベントハンドリング

クリック、入力、送信などのユーザー操作に反応する処理。

const handleClick = () => {
  setCount(count + 1);
};

return <button onClick={handleClick}>クリック</button>;

Phase 1の成果物

ここまで学んだら、ToDoアプリを作る。追加、完了、削除、フィルタの機能を実装すれば、React基礎の理解度を確認できる。

Phase 2：React実践スキル（3〜4週間）

React Hook Form + Zod（フォーム管理）

実務のフォームは、バリデーション、エラー表示、送信処理が必要。React Hook Formとバリデーションライブラリ（Zod）の組み合わせが現在の主流。

TanStack Query（サーバー状態管理）

API通信のデータをキャッシュし、ローディング状態やエラー状態を自動管理するライブラリ。実務では必須。

const { data, isLoading, error } = useQuery({
  queryKey: ["jobs"],
  queryFn: () => fetch("/api/jobs").then(res => res.json()),
});

自前でuseStateとuseEffectを組み合わせてAPI通信を管理するのは、もう過去のやり方。TanStack Queryを使えば、コード量が1/3になる。

スタイリング

Tailwind CSSが現在の主流。className直書きは冗長に見えるけど、「CSSファイルとの行き来がなくなる」「命名に悩まない」というメリットが大きい。

コンポーネント設計

• Presentational Component: 見た目だけを担当。Props受け取ってJSXを返す
• Container Component: ロジックを担当。API通信や状態管理
• Compound Component: 複合的なUIを柔軟に組み立てるパターン

実務では、UIライブラリ（shadcn/ui、Radix UI）をベースにカスタマイズすることが多い。イチから全部作る必要はない。

Phase 3：Next.js（4〜6週間）

ReactでSPAが作れるようになったら、Next.jsに進む。Next.jsはReactの上に乗るフレームワークで、ルーティング、サーバーサイドレンダリング、API Routesなどの機能を提供する。

App Router

Next.js 13以降のルーティングシステム。ファイルシステムベースで、app/ ディレクトリにファイルを置くだけでルートが定義される。

app/
├── page.tsx          # / (トップページ)
├── about/
│   └── page.tsx      # /about
├── jobs/
│   ├── page.tsx      # /jobs (一覧)
│   └── [id]/
│       └── page.tsx  # /jobs/123 (詳細)
└── layout.tsx        # 共通レイアウト

Server Components と Client Components

Next.js（App Router）最大の特徴。コンポーネントがサーバー側で実行されるかクライアント側で実行されるかを明示する。

• Server Component（デフォルト）: サーバーでHTMLを生成。データ取得が高速。バンドルサイズに含まれない
• Client Component（'use client'宣言）: ブラウザで実行。useState、onClickなどのインタラクティブ機能が使える

この使い分けの理解が、Next.js案件で最も重要なスキル。

Server Actions

フォームの送信処理をサーバー側で直接実行する仕組み。API Routesを書かなくても、フォームからデータベースに書き込める。

メタデータとSEO

export const metadata = {
  title: "求人一覧 | @SOHO",
  description: "フリーランス向けの求人情報を掲載",
};

ページごとにメタデータを設定できる。SEOが重要なサイトでは必須の知識。

Phase 4：実務レベルへの仕上げ（2〜4週間）

テスト

• Jest + React Testing Library: コンポーネントのユニットテスト
• Playwright: E2Eテスト（実際のブラウザで一連の操作をテスト）

パフォーマンス最適化

• React.memoによる不要な再レンダリングの防止
• useMemoとuseCallbackの適切な使用
• 画像最適化（next/image）
• コード分割（dynamic import）

アクセシビリティ

• セマンティックHTML
• ARIAラベル
• キーボードナビゲーション
• スクリーンリーダー対応

学習リソース

公式ドキュメント（必読）:

• React公式（react.dev）: 2023年にリニューアルされて、チュートリアルが格段にわかりやすくなった
• Next.js公式（nextjs.org/docs）: Learn Next.jsコースが特に秀逸

動画:

• Udemy「React - The Complete Guide」: 英語だが最も体系的な講座
• YouTube「しまぶーのIT大学」: 日本語でReactの基礎を丁寧に解説

実践練習:

• Frontend Mentor: 実際のデザインからコーディングする課題集。ポートフォリオにも使える

全体の学習期間は、HTML/CSS/JS基礎がある前提で3〜6ヶ月。1日2〜3時間の学習で、フリーランスの案件に応募できるレベルに到達できる。

教育訓練給付金制度を活用すれば、プログラミングスクールの受講費用を最大70%カバーできる。@SOHOの教育訓練ガイドでは、React・Next.jsを含むWebエンジニア向けのカリキュラムが対象となる講座も紹介している。独学と併用して体系的に学びたい方にはおすすめの選択肢だ。

React / Next.js案件の単価

| ポジション | 月単価 | |