React と TypeScript の使い分け

React と TypeScript（TS）を一緒に使うことが増えてきましたが、それぞれなんのために使うのか役割が分からなくなりがちなのでこの記事にまとめました。

React と TypeScript の違い

	React	TypeScript
何か	UI を作るライブラリ	型を追加する JS の拡張
役割	画面の見た目を構築	エラーを減らすための型チェック
拡張部分	UI	型

React は「UI を作るライブラリ」TypeScript は「型をつける JavaScript」なので、それぞれの目的が違う

使い分けのポイント

1. ReactはUI を作るために使う

React はコンポーネントを使って 「見た目の管理」 を簡単にする
個人、チーム、大規模な組織によって書かれさまざまなコンポーネントを、シームレスに組み合わせながら開発できる

2. TypeScriptはデータの型を管理するために使う

TypeScript は、データの型を指定することで 「バグを減らす」 ために使う

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

→ User の id は 数値しか入らない ことが保証される

3. React × TypeScript の組み合わせ

React のコンポーネントに TS を適用すると、安全に UI を作れるメリットがある

type Props = {
  name: string;
};

const Greeting = ({ name }: Props) => {
  return <h1>こんにちは、{name} さん！</h1>;
};

→ name は 必ず文字列 なので、間違ったデータが渡る心配がない

まとめ

• React → 「UI を作るため」 に使う
• TypeScript → 「型を追加してバグを防ぐ」 ために使う
• React × TS → UI を作りながら、データの型を管理