先生と生徒の会話形式で理解しよう

生徒

「先生、ReactとTypeScriptってよく一緒に使われているのを見ますけど、どうしてなんですか？」

先生

「良いところに気づきましたね。ReactはJavaScriptで動くライブラリですが、TypeScriptを組み合わせると“型安全”な開発ができるようになるんです。」

生徒

「型安全ってどういう意味ですか？初心者にはちょっと難しそうです…」

先生

「心配いりませんよ。例えを使いながら分かりやすく説明しますから、一緒に学んでいきましょう！」

1. TypeScriptとは？JavaScriptとの違い

TypeScriptはJavaScriptに型の仕組みを加えた言語です。JavaScriptは柔軟で便利ですが、自由すぎて思わぬエラーが発生することもあります。TypeScriptは「この変数は数字です」「この関数は文字を返します」といったルールを決めておけるため、間違いを事前に防ぎやすいのです。

例えるなら、JavaScriptは自由に荷物を積めるトラックで、TypeScriptは荷物ごとにラベルを貼って整理するトラックです。ラベルのおかげで間違った荷物を積むことがなくなり、より安心して運べるようになります。

2. 型安全とは？初心者にも分かるイメージ

型安全というのは「データの種類を間違えないように守ってくれる仕組み」のことです。例えば、年齢を入れる箱に「二十歳」という文字を入れてしまうと、本当は数字が必要なのに文字を入れてしまったことになります。JavaScriptではこうした間違いが見逃されることがありますが、TypeScriptなら「ここは数字を入れるルールだよ」と教えてくれるのです。

つまり型安全とは、初心者でも安心してプログラムを書けるようにする安全ベルトのような役割を持っています。

3. ReactとTypeScriptの相性が良い理由

Reactではコンポーネントという小さな部品を組み合わせてアプリを作ります。その際に「この部品はどんなデータを受け取るのか」を明確にしておくと、間違いが減り、チームでの開発もスムーズになります。

例えば、ユーザー名を表示するコンポーネントがあったとします。「名前は文字列ですよ」というルールをTypeScriptで書いておけば、間違って数字を渡したときにエラーで気づけるのです。これがReactとTypeScriptの相性が良いといわれる大きな理由です。


import React from "react";

type UserProps = {
  name: string;
};

function User({ name }: UserProps) {
  return <h1>こんにちは、{name}さん！</h1>;
}

export default User;

（「name」に文字列を渡すと「こんにちは、〇〇さん！」と表示されます。数字を渡すとTypeScriptがエラーを出して教えてくれます）