TypeScript：現代 Web 開発の標準

2025/12/22-18:00:00

TypeScript

TypeScript; 2025

words 単語

2025 年、TypeScript は GitHub で最も使われている言語になった。JavaScript と Python を抜いた。GitHub Octoverse の数字だけの話じゃない。Microsoft、Google、Meta、Netflix が主要プロジェクトの標準に採用し、npm には型サポート付きパッケージが 500 万以上ある。貢献者数は前年比 66% 増だ。

このノートでは、なぜここまで普及したのか、TypeScript 7.0 で何が変わったのか、2025 年の実務でどう使うべきかを整理する。

支配への台頭：GitHub Octoverse 2025

2025 年 8 月の GitHub 発表は、偶然の結果じゃない。大企業が続々と標準採用し、npm エコシステムの型定義カバレッジが実用域に達し、公開リポジトリ 90 万以上が TypeScript で書かれている。コミュニティの規模が、もはや「移行すべきか」ではなく「移行しない理由は何か」という議論のレベルに達した。

TypeScript 7.0：Go によるパフォーマンス革命

TypeScript 7.0（Project Corsa）は、言語史上最大の飛躍だと思う。主要コンパイラを Go で書き直した。

体感できるのは、コンパイル速度が 10 倍になったこと。5 分かかっていた大規模プロジェクトが 30 秒で終わる。コンパイル中の RAM 使用量も最大 60% 削減された。Monorepo 向けの最適化も入っている。構文や型の動作は一切変わっていないので、既存コードはそのまま動く。

// TypeScript 7.0 はこのコードを 10 倍の速度でコンパイル
interface Usuario {
  id: string;
  nombre: string;
  email: string;
  rol: 'admin' | 'usuario' | 'invitado';
}

function procesarUsuario(usuario: Usuario): { mensaje: string } {
  return { mensaje: `ようこそ, ${usuario.nombre}` };
}

TypeScript ユーティリティ：2025 年のベストプラクティス

TypeScript の型システムは、コード品質と開発体験を上げるユーティリティ型を提供している。よく使うものをいくつか。

更新操作の Partial

Partial は一部のフィールドだけ更新する PATCH 操作にそのまま使える:

interface Producto {
  id: string;
  nombre: string;
  precio: number;
  descripcion: string;
  stock: number;
}

function actualizarProducto(
  id: string,
  cambios: Partial<Producto>
): Producto {
  const producto = obtenerProductoPorId(id);
  return { ...producto, ...cambios };
}

// 使用法：価格だけを更新
actualizarProducto('prod-123', { precio: 29.99 });

焦点を絞ったインターフェースの Pick と Omit

エンティティの特定のフィールドだけ公開したいときに便利だ。Pick で必要なフィールドを選び、Omit で機密フィールドを除外する:

interface UsuarioCompleto {
  id: string;
  nombre: string;
  email: string;
  password: string;
  createdAt: Date;
  updatedAt: Date;
}

// Pick：特定のフィールドを選択
type UsuarioPublico = Pick<UsuarioCompleto, 'id' | 'nombre' | 'email'>;

// Omit：機密フィールドを除外
type UsuarioSinPassword = Omit<UsuarioCompleto, 'password'>;

function obtenerPerfilPublico(id: string): UsuarioPublico {
  return obtenerUsuarioCompleto(id);
}

TypeScript と AI：強力なシナジー

TypeScript と生成 AI ツールの組み合わせが、開発ワークフローを変えた。LLM（GPT-4、Claude など）が生成する TypeScript コードは、JavaScript と比べてコンパイルエラーが 94% 少ない。GitHub Copilot や Cursor の提案も、型コンテキストがある分だけ正確になる。

// 例：型が LLM をどのように助けるか
type EstadoPedido = 'pendiente' | 'procesando' | 'enviado' | 'entregado';

interface Pedido {
  id: string;
  estado: EstadoPedido;
  items: Array<{ nombre: string; cantidad: number }>;
}

function avanzarEstadoPedido(pedido: Pedido): Pedido {
  // LLM は次の可能な状態を正確に推論できる
  const transiciones: Record<EstadoPedido, EstadoPedido> = {
    pendiente: 'procesando',
    procesando: 'enviado',
    enviado: 'entregado',
    entregado: 'entregado',
  };
  return {
    ...pedido,
    estado: transiciones[pedido.estado],
  };
}

JavaScript に対する TypeScript の主な利点

コンパイル時の型安全性

TypeScript はエラーが本番に到達する前に検出する。同じコードで比較してみる:

// JavaScript：実行時にしかエラーが検出されない
function calcularArea(ancho, alto) {
  return ancho * alto;
}
calcularArea("10", 20); // "200"（文字列結合）を返す

// TypeScript：コンパイル時にエラーが検出される
function calcularArea(ancho: number, alto: number): number {
  return ancho * alto;
}
calcularArea("10", 20); // エラー：型 'string' を型 'number' のパラメータに割り当てることはできません

より良い開発者体験

IDE の自動補完が正確になる。定義へのジャンプ、参照の検索、リファクタリングも信頼できる。型がそのままドキュメントになるので、コードを読むだけで何が期待されているかわかる。

現代フレームワークでの採用

TypeScript 付き React

interface Props {
  titulo: string;
  onClic?: () => void;
  children?: React.ReactNode;
}

function Boton({ titulo, onClic, children }: Props) {
  return (
    <button onClick={onClic} className="px-4 py-2 bg-blue-500 rounded">
      {titulo}
      {children}
    </button>
  );
}

TypeScript 付き Next.js

import { GetServerSideProps } from 'next';

interface PageProps {
  usuario: {
    id: string;
    nombre: string;
  };
}

export const getServerSideProps: GetServerSideProps<PageProps> = async () => {
  const usuario = await obtenerUsuario();
  return { props: { usuario } };
};

export default function Pagina({ usuario }: PageProps) {
  return <div>ようこそ, {usuario.nombre}</div>;
}

TypeScript 付き Vue 3

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Contador',
  setup() {
    const contador = ref<number>(0);
    const incrementar = () => contador.value++;

    return { contador, incrementar };
  },
});

2025 年のベストプラクティス

any を避け、unknown を使用

any は型チェックを無効にする。代わりに unknown を使い、型ガードで検証する:

// ❌ any を避ける
function procesarDato(dato: any) {
  return dato.valor;
}

// ✅ 検証付きの unknown を使用
function procesarDato(dato: unknown) {
  if (typeof dato === 'object' && dato !== null && 'valor' in dato) {
    return (dato as { valor: string }).valor;
  }
  throw new Error('無効なデータ形式');
}

判別型を使用

判別型ユニオン（discriminated union）を使うと、TypeScript が各ケースで存在するプロパティを正確に把握してくれる:

interface Success {
  status: 'success';
  data: string;
}

interface Error {
  status: 'error';
  message: string;
}

type Resultado = Success | Error;

function manejarResultado(resultado: Resultado) {
  // TypeScript は存在する正確なプロパティを知っている
  if (resultado.status === 'success') {
    console.log(resultado.data);
  } else {
    console.log(resultado.message);
  }
}