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

生徒

「ReactってJavaScriptでもTypeScriptでも作れるって聞いたんですが、何が違うんですか？」

先生

「はい。どちらもReact開発はできますが、安心感や間違いに気づける早さが大きく違います。」

生徒

「パソコンを触ったことがない初心者でも、違いは感じられますか？」

先生

「感じられますよ。むしろ最初ほどTypeScriptの良さが分かりやすいです。」

1. Reactとは何かを超かんたんに説明

React（リアクト）とは、Web画面を作るための道具です。ボタンや文字、入力フォームなどを組み合わせて、動きのある画面を作ることができます。スマートフォンのアプリのように、画面がなめらかに切り替わるのが特徴です。

ReactはJavaScriptで作られています。そのため、React開発はJavaScriptだけでもできますし、TypeScriptを使って書くこともできます。

2. JavaScriptでのReact開発の特徴

JavaScriptは、自由度がとても高い言語です。決まりが少なく、思ったままにコードを書けます。そのため、React初心者でもとりあえず動く画面を作ることができます。

ただし、自由すぎることが弱点になることもあります。間違った値を入れても、画面を開くまでエラーに気づけないことがあります。これは、料理を完成させてから「塩を入れ忘れた」と気づくような状態です。

TypeScriptは、JavaScriptに「型（かた）」という説明書を付けた言語です。型とは、「この箱には数字だけ入ります」「ここには文字だけです」といったルールのことです。

ReactをTypeScriptで書くと、部品（コンポーネント）に何を渡すのかがはっきりします。そのため、間違った使い方をすると、画面を開く前にエラーとして教えてくれます。

props（プロップス）とは、Reactの部品に渡す情報のことです。たとえば「名前」や「年齢」を部品に渡します。


type Props = {
    name: string;
};

function Hello(props: Props) {
    return <p>{props.name}</p>;
}

TypeScriptでは、nameは文字でなければならないと決まっています。もし数字を渡そうとすると、すぐにエラーが表示されます。JavaScriptでは、この間違いに実行するまで気づけません。

一見すると、TypeScriptは難しそうに見えます。しかし実際は、先生が横で「それは違いますよ」と教えてくれるような存在です。

React開発では、部品が増えるほど何をしているのか分からなくなりがちです。TypeScriptを使うことで、コードの意味がはっきりし、迷子になりにくくなります。

保守性とは、あとから直しやすいかどうかという意味です。Reactアプリは長く使われることが多いため、途中で機能を追加したり直したりします。

TypeScriptで作られたReactアプリは、どこを直せばいいか分かりやすく、間違いも見つけやすいです。JavaScriptだけの場合、動かしてみないと分からない部分が増えてしまいます。

JavaScriptは自由で始めやすく、TypeScriptは安全で安心です。React開発では、画面が大きくなるほどTypeScriptの良さが目立ちます。

特に初心者のうちは、間違いをすぐに教えてくれるTypeScriptを使うことで、Reactの仕組み自体も理解しやすくなります。