TypeScript勉強ロードマップ｜JS基礎からNext.jsまで段階的に習得する方法

「JavaScriptはなんとなく書けるけど、TypeScriptに移行できていない」「型エラーが出るたびに any で握りつぶしている」

TypeScriptを独学で学ぼうとして、途中で止まっているエンジニアは多い。エラーの意味がわからない、Genericsが難しすぎる、ReactとTypeScriptを同時に学ぼうとして混乱する——こうした詰まりポイントには、共通した原因がある。学ぶ順番が間違っている。

このロードマップでは、JavaScript基礎から始めて、型システム、Generics、React+TypeScript、Next.jsまでを段階的に積み上げる学習パスを整理する。各ステップで「何を理解すれば次に進んでいいか」の基準も明確にするので、ゴールの見えない学習からは卒業できる。

TypeScriptはフロントエンドのデファクトスタンダードだ。求人サイトを見ればわかる通り、React案件のほぼ全てでTypeScriptが要件に入っている。習得するかどうかの問題ではなく、いつ・どう習得するかの問題だ。

ステップ0: JavaScriptの基礎を固める（2〜4週間）

TypeScriptを学ぶ前に、JavaScriptの土台が必要だ。TypeScriptはJavaScriptに型を追加した言語なので、JSがわからないままTSを学ぶと「型エラーなのかJSの問題なのか」が判断できなくなる。

最低限押さえるべきJS知識

以下の項目が自分でコードを書いて説明できる状態になれば、TypeScriptに進んでいい。

変数・型・制御構文

• let / const の使い分けと理由
• プリミティブ値（string, number, boolean, null, undefined）
• 配列とオブジェクトの操作（map, filter, reduce, spread構文）
• 条件分岐とループ

関数

• 通常の関数とアロー関数
• デフォルト引数と残余引数
• クロージャの概念（スコープの仕組み）

非同期処理（重要）

• コールバック → Promise → async/await の流れ
• fetch を使ったAPI呼び出し
• エラーハンドリング（try/catch）

クラスとモジュール

• ES6クラスの基本（constructor, this）
• import / export の書き方

確認テスト

次の2つができれば次ステップへ進んでいい。

1. JSONPlaceholderなどの無料APIから fetch でデータを取得し、ブラウザのコンソールに表示できる
2. 配列データを map で加工し、HTMLに表示できる

ステップ1: TypeScriptの型システムを理解する（2〜4週間）

JavaScriptの基礎が固まったら、TypeScript固有の概念を学ぶ。最初の壁はここにある。「型をつける意味がわからない」と感じる人は、**型は「コードの意図を明文化するもの」**と捉えると理解が早い。

基本的な型アノテーション

// 変数への型アノテーション
const name: string = "山田太郎";
const age: number = 28;
const isActive: boolean = true;

// 型推論（アノテーション不要なケース）
const message = "hello"; // TypeScriptが string と推論する

// 関数の引数と戻り値
function greet(name: string): string {
  return `こんにちは、${name}さん`;
}

型推論が効いている場所に無理やり型を書く必要はない。型を書くべき場所は「TypeScriptが推論できない場所」だ。

オブジェクト型とインターフェース

// オブジェクト型の定義
type User = {
  id: number;
  name: string;
  email: string;
  age?: number; // ?をつけるとオプショナル（あってもなくてもいい）
};

// interfaceでも同じことができる
interface Product {
  productId: string;
  price: number;
  inStock: boolean;
}

// 型を使う
const user: User = {
  id: 1,
  name: "山田太郎",
  email: "yamada@example.com",
};

type と interface はほぼ同じことができる。チームのルールに従って使い分ければいい。迷ったら type を使う。

Union型とLiteral型

// Union型: どちらかの型を受け付ける
type StringOrNumber = string | number;

// Literal型: 特定の値だけを許容する
type Status = "pending" | "active" | "inactive";
type Direction = "north" | "south" | "east" | "west";

// 組み合わせ
function handleStatus(status: Status): string {
  if (status === "active") return "稼働中";
  if (status === "pending") return "処理中";
  return "停止";
}

配列型とReadonly

// 配列型
const numbers: number[] = [1, 2, 3];
const users: User[] = [];

// 読み取り専用（変更不可）
const ids: readonly number[] = [1, 2, 3];
// ids.push(4); // エラー: readonlyなので変更不可

この段階で意識すること

• any を使ったらその箇所は型チェックを諦めていると思うこと
• エラーメッセージを読む練習をする（TypeScriptのエラーは長いが情報量が多い）
• 公式の TypeScript Playground で小さいコードを試す習慣をつける

2025年フロントエンド技術トレンド7選

TypeScriptを含めたフロントエンドの最新動向。習得後のキャリアアップ先を把握しておこう

ステップ2: Genericsと高度な型を使いこなす（3〜6週間）

型の基礎ができたら、次は**Generics（ジェネリクス）**だ。ここで止まる人が多いが、Genericsの本質は「型を引数として受け取る」仕組みだと理解すると、急に見え方が変わる。

Genericsの基本

// 普通の関数: 型が固定
function getFirstElement(arr: number[]): number {
  return arr[0];
}

// Genericsを使うと: どんな型でも使える
function getFirst<T>(arr: T[]): T {
  return arr[0];
}

// 使い方
const firstNumber = getFirst<number>([1, 2, 3]); // number型
const firstName = getFirst<string>(["a", "b", "c"]); // string型
const firstUser = getFirst<User>(users); // User型

<T> は「型パラメータ」と呼ぶ。どんな名前でもいいが、慣習として T, K, V などが使われる。

実用的なGenericsパターン

// APIレスポンスの型
type ApiResponse<T> = {
  data: T;
  status: number;
  message: string;
};

// 使い方
type UserResponse = ApiResponse<User>;
type ProductListResponse = ApiResponse<Product[]>;

// Genericsに制約をつける
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { id: 1, name: "山田", email: "yamada@example.com" };
const name = getProperty(user, "name"); // "山田" (string型)
// const wrong = getProperty(user, "age"); // エラー: "age"はuserのkeyではない

ユーティリティ型

TypeScriptには便利な組み込み型が用意されている。

// 実際の使用例
type UserInput = Omit<User, "id">; // id以外のプロパティ
type UserUpdate = Partial<User>; // 全プロパティがオプショナル

// Recordの例
const statusLabel: Record<Status, string> = {
  pending: "処理中",
  active: "稼働中",
  inactive: "停止",
};

型ガードとnull安全

// 型ガード
function isString(value: unknown): value is string {
  return typeof value === "string";
}

function processValue(value: string | number) {
  if (isString(value)) {
    // このブロック内では value は string として扱われる
    console.log(value.toUpperCase());
  } else {
    // このブロック内では value は number として扱われる
    console.log(value.toFixed(2));
  }
}

// オプショナルチェーン（?.)とNullish合体演算子(??)
const userEmail = user?.email ?? "未設定";

ステップ3: React + TypeScriptの実践（4〜6週間）

型の基礎とGenericsが使えるようになったら、Reactと組み合わせる段階だ。React単体の学習をしていない場合は、ReactとTypeScriptを並行で学ぶより、先にReactの基礎（JSX, useState, useEffect, Props）を押さえてから組み合わせる方がいい。

Propsの型定義

// コンポーネントのProps型
type ButtonProps = {
  label: string;
  onClick: () => void;
  variant?: "primary" | "secondary";
  disabled?: boolean;
};

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

// 子コンポーネントを受け取る場合
type CardProps = {
  title: string;
  children: React.ReactNode;
};

useStateとuseRefの型

// useState: 初期値から推論されるが、明示することもできる
const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);

// useRef
const inputRef = useRef<HTMLInputElement>(null);

// useReducer
type Action =
  | { type: "increment" }
  | { type: "decrement" }
  | { type: "reset"; payload: number };

function reducer(state: number, action: Action): number {
  switch (action.type) {
    case "increment": return state + 1;
    case "decrement": return state - 1;
    case "reset": return action.payload;
  }
}

カスタムHooksの型定義

// データフェッチのカスタムHook
function useUser(userId: string) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data: User) => setUser(data))
      .catch((err: Error) => setError(err))
      .finally(() => setLoading(false));
  }, [userId]);

  return { user, loading, error };
}

イベントハンドラーの型

// よく使うイベント型
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  // フォーム処理
};

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  // クリック処理
};

Docker勉強法初心者向けロードマップ

フロントエンドのみならずインフラ周りも固めたい人へ。TypeScript習得後の次のステップ

ステップ4: Next.js + TypeScriptで実践的なアプリを作る（4〜8週間）

React + TypeScriptが一通り書けるようになったら、Next.jsと組み合わせて実践的なアプリ開発に取り組む。Next.jsはReactのフレームワークで、現在の求人市場ではNext.js + TypeScriptの組み合わせが最もニーズが高い。

Next.jsのTypeScript固有の型

// ページコンポーネント
import { NextPage } from "next";

const HomePage: NextPage = () => {
  return <div>ホームページ</div>;
};

// APIルート
import { NextApiRequest, NextApiResponse } from "next";

type Data = {
  message: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ message: "ok" });
}

App RouterとServer Components

// Server Component（デフォルト）
type Post = {
  id: number;
  title: string;
  body: string;
};

// サーバーで実行されるコンポーネント
async function PostList() {
  const posts: Post[] = await fetch("https://jsonplaceholder.typicode.com/posts")
    .then((res) => res.json());

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// Client Component（インタラクティブな場合）
"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

環境変数の型安全

// env.d.ts を作成して環境変数に型をつける
declare namespace NodeJS {
  interface ProcessEnv {
    DATABASE_URL: string;
    NEXT_PUBLIC_API_URL: string;
    NEXTAUTH_SECRET: string;
  }
}

ポートフォリオに使えるNext.js+TSプロジェクト例

学習後のアウトプットとして、以下のようなプロジェクトを作ると転職で話せる材料になる。

ポイントは「動くものを作って本番デプロイ（Vercel）まで済ませること」。Vercelへのデプロイは無料で5分でできるので、GitHub連携だけ先に覚えておくと便利だ。

TypeScript習得を加速する実践テクニック

ロードマップを進めながら、同時に取り入れると学習が加速するテクニックを5つ紹介する。

1. 既存のJSプロジェクトをTSに移行する

「新しくTSプロジェクトを始める」より「既存のJSをTSに移行する」方が学習になる。移行の過程でエラーが大量に出るが、その1つ1つを直す作業が最も型の理解を深める。

# tsconfig.jsonの設定: 段階的移行向け
{
  "compilerOptions": {
    "strict": false,   // まず false で始めて、徐々に true へ
    "allowJs": true,   // JSファイルも許容
    ...
  }
}

2. 型エラーを as や any で逃げない練習

TypeScriptを書いていると、エラーを as unknown as T や any で握りつぶしたくなる瞬間がある。そこを踏ん張って「なぜこのエラーが出ているのか」を調べる習慣が、型への理解を深める。

3. @typesパッケージの仕組みを理解する

外部ライブラリを使う際に @types/node などをインストールすることがある。これは「型定義ファイル（.d.ts）」を追加しているもので、本体とは別にTypeScriptの型情報を提供している。

npm install --save-dev @types/node @types/react

4. strict モードを早めに有効にする

{
  "compilerOptions": {
    "strict": true
  }
}

strict: true を有効にすると厳しいチェックが入り、より安全なコードが書けるようになる。最初は難しく感じるが、早い段階で有効にして慣れた方が長期的に見てメリットが大きい。

5. TypeScriptのリリースノートを追う習慣

TypeScriptは定期的に新機能が追加される。MicrosoftのTypeScriptブログやWhat's new in TypeScriptを定期的に確認する習慣をつけると、最新の型機能をいち早く使えるようになる。

2025年フロントエンド技術トレンド7選

TypeScript習得後に学ぶべき技術の全体マップ。React Server ComponentsやBunの動向も把握しておこう

TypeScript習得後のキャリアパス

TypeScriptを実務レベルで使えるようになると、転職・フリーランス・副業の選択肢が大幅に広がる。

求人市場での評価

求人サイトでTypeScript必須・優遇の案件数を調べると、フロントエンド求人全体の80%以上でTypeScriptが言及されている（2025年時点）。React単体の案件はほぼ存在せず、React + TypeScriptがセットで求められる。

習得後に目指せるポジション

• フロントエンドエンジニア: React/Next.js + TS が主戦場
• フルスタックエンジニア: フロントTSとバックエンドNode.js(TS)
• テックリード: 型設計でコードベースの品質を管理する役割
• フリーランス: TypeScript案件は単価が高く、月60〜80万円も現実的

Docker勉強法初心者向けロードマップ

TypeScript習得後にインフラ知識も加えると市場価値がさらに上がる。Dockerの学習順序を把握しよう

まとめ: TypeScript習得の5ステップ

TypeScriptのロードマップを再確認する。

ステップ0: JavaScriptの基礎（2〜4週間） 変数・関数・配列・非同期処理を自分でコードを書いて説明できる状態まで

ステップ1: 型システムの理解（2〜4週間） プリミティブ型・オブジェクト型・Union型・Literal型・型推論

ステップ2: Genericsと高度な型（3〜6週間） Generics・ユーティリティ型・型ガード・null安全

ステップ3: React + TypeScript（4〜6週間） Propsの型定義・useState/useRef・カスタムHooks・イベントハンドラー

ステップ4: Next.js + TypeScript（4〜8週間） App Router・Server Components・環境変数の型安全・ポートフォリオ化

各ステップに「次に進んでいい基準」がある。「全部理解してから次へ」ではなく、「基準を満たしたら次に進んで実践しながら補完する」サイクルで進むと詰まりにくい。

TypeScriptは書いた量に比例してわかる言語だ。読むより書く。エラーを怖がらず、エラーを読む。その繰り返しが最短の習得ルートになる。