← 語彙帳トップに戻る
🔷

TypeScript

JavaScriptに型を追加。フロント/バックエンド両対応

✅ フロントエンド✅ サーバーサイド✅ 型安全 ⚠ 設定が複雑⚠ ビルドが必要
📌 一言で言うと

JavaScriptの信頼できる版。Webの実質標準語

Microsoftが開発。JavaScriptに静的型付けコードを実行する前にデータの型を確認する仕組み。バグを事前に検出できるを加えたスーパーセット。 フロントエンド（React/Next.js）からバックエンド（Node.js）、 MCPサーバーModel Context Protocol サーバー。ClaudeなどのAIにツールや外部機能を提供する仕組みまで同じ言語で書ける。

🎯 得意な用途

Webフロントエンド：React / Next.js との組み合わせが業界標準。型安全なUIコンポーネントを構築できる。

Node.jsサーバー：Express / Fastify / NestJS などでAPIサーバーやBFFを構築。フロントと言語を統一できるメリットが大きい。

MCPサーバー・CLIツール：Claude Code の拡張（MCPサーバー）の公式SDKがTypeScript製。AIツール開発の主力言語になりつつある。

フルスタック開発：Next.js App Router でフロント・バック・DB操作をすべてTypeScriptで統一する「T3スタック」が人気。

⚖️ 他言語との比較
観点TypeScriptPythonGo
フロントエンド対応 得意（唯一の選択肢） 非対応 非対応
型安全性 強い 型ヒント（任意） 強い
AI/MLライブラリ 少ない 圧倒的に豊富 ほぼなし
設定の複雑さ tsconfig等が必要 シンプル シンプル
向いている場面 Webアプリ・フルスタック AI・データ・PoC 高トラフィックAPI
✅ 選ぶ理由 / ⚠ 選ばない理由

選ぶ理由：

フロントとバックを同じ言語で書けるためチームの認知コストが下がる。型エラーでバグを事前検出。Webサービス開発では現実的に最有力。

選ばない理由：

小さなスクリプトや自動化ツールにはオーバーキル。AIモデル推論など計算集約タスクはPythonの方が圧倒的にライブラリが充実。

💬 よくある会議での質問と答え方
Q.JavaScriptじゃなくTypeScriptを使う理由は？
A.型定義によりIDEの補完が効き、実行前にバグを検出できます。チームが大きくなるほど恩恵が増します。現在のWebプロジェクトでTypeScriptを使わない理由の方が少ないです
Q.Next.jsとExpressどちらを選びますか？
A.フロント込みのWebサービスならNext.js（App Router）で統一するのが今の主流です。APIだけ提供するマイクロサービスにはExpressやFastifyが軽量で適しています
🌐 エコシステム

パッケージマネージャ：npm / pnpm（推奨） / yarn (Berry)

主要フレームワーク：

  • Next.js — フルスタックWebフレームワーク・App Router・SSR/SSG・Vercel製
  • React — UIライブラリ・デファクト・JSX仮想DOM
  • NestJS — エンタープライズ向けNodeフレームワーク・DI・Angular影響
  • Remix — Web標準重視のフルスタック・nested routing

主要ライブラリ：

  • Prisma — 型安全ORM・マイグレーション付き・DBスキーマから型生成
  • Zod — TypeScriptファーストのスキーマバリデーション・実行時型検査
  • tRPC — エンドツーエンド型安全API・クライアント自動型生成
  • Vitest — Viteベースのテストランナー・Jest互換・ESネイティブ

ランタイム：

  • Node.js — 本番標準・LTS運用
  • Bun — 高速・ネイティブTS実行・npm互換
  • Deno — セキュア・TSネイティブ・Web標準準拠
💻 コード例

Hello World + 型

const greeting: string = "Hello";
console.log(greeting);

async/await と型

async function fetchUser(id: number): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

ジェネリクス（型の再利用）

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

ユーティリティ型（Partial）

type UserUpdate = Partial<User>;  // 全フィールド任意に
function updateUser(id: number, patch: UserUpdate) { ... }
📚 学習ロードマップ

初級（目安: 〜2週間）

  • 型システム基本 — primitives / union / intersection・type alias vs interface
  • tsconfig.json — strict / target / module・noImplicitAny の意味
  • VSCode + TS 開発環境 — tsserver・インレイヒント・quick fix

中級（目安: 〜1-2ヶ月）

  • ジェネリクス・ユーティリティ型 — Partial/Pick/Omit/Record・型の再利用
  • strict モード完全理解 — noUncheckedIndexedAccess・exactOptionalPropertyTypes 等
  • 型推論の限界と型アサーション — as の用法と乱用避ける・Type Guards

上級（目安: 〜3-6ヶ月）

  • Conditional Types — T extends U ? X : Y・infer・分配的
  • Mapped Types / Template Literal Types — { [K in keyof T]: ... }・型レベル文字列操作
  • 型レベルプログラミング — ts-toolbelt・type-fest・再帰型

← 語彙帳トップ · GitHub