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

生徒

「Reactで文字や数字を画面に表示できるって聞いたんですけど、TypeScriptだと型ってどう書けばいいんですか？」

先生

「ReactではuseStateを使って状態を管理します。TypeScriptを使う場合は、そのStateにどんな値が入るかを型で決められます。」

生徒

「文字とか数字とか、trueやfalseも使えるんですよね？」

先生

「はい。文字列・数値・真偽値は、ReactでもTypeScriptでもとても基本的で大切です。順番に、やさしく見ていきましょう。」

1. ReactのuseStateとは？初心者向けに超かんたん解説

ReactのuseStateは、画面の中で変わる情報を覚えておくための仕組みです。たとえば「表示する文字」「カウンターの数字」「オンかオフか」といった情報です。

パソコンに例えると、useStateは「付せんメモ」のような存在です。付せんに今の情報を書いておいて、ボタンを押したら書き換える、というイメージです。Reactは、この付せんの内容が変わると、自動で画面を書き直してくれます。

TypeScriptを使う場合、この付せんに「どんな種類の情報を書くか」をあらかじめ決められます。これが型指定です。

2. 文字列をuseStateで型指定する方法

まずは一番よく使う文字列です。文字列とは、「こんにちは」「名前」「メッセージ」のような文章や文字のことです。TypeScriptでは、文字列の型をstringと書きます。


import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState<string>("こんにちは！");

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("ボタンがクリックされました！")}>
        クリック
      </button>
    </div>
  );
}

export default App;

（画面に「こんにちは！」と表示され、ボタンを押すと「ボタンがクリックされました！」に変わります）

useState<string>と書くことで、「このStateには文字列しか入りません」と宣言しています。もし間違って数字を入れようとすると、TypeScriptがエラーで教えてくれます。

初心者のうちは「文字だけを扱うState」には、必ずstringを指定しておくと安心です。

3. 数値をuseStateで型指定する方法

次に数値です。数値は、回数・金額・年齢・点数など、さまざまな場面で使います。TypeScriptでは、数値の型をnumberと書きます。


import React, { useState } from "react";

function App() {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>クリック回数：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        増やす
      </button>
    </div>
  );
}

export default App;

（画面に「クリック回数：0」と表示され、ボタンを押すたびに数字が増えていきます）

このようにnumber型を指定しておくと、文字を足そうとしたり、間違った計算をしようとしたときにエラーで気づけます。

電卓で計算するときに、数字以外を入れたらおかしいのと同じで、Reactでも「数字専用の箱」を作ると安全です。

4. 真偽値（true / false）をuseStateで型指定する方法

真偽値とは、「はい / いいえ」「オン / オフ」「表示する / 表示しない」のように、2つの状態を表す値です。TypeScriptでは、真偽値の型をbooleanと書きます。


import React, { useState } from "react";

function App() {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        切り替え
      </button>
      {isOpen && <p>表示されています</p>}
    </div>
  );
}

export default App;

（ボタンを押すと、文字が表示されたり消えたりします）

boolean型は、条件分岐ととても相性が良いです。Reactでは「表示するかどうか」を制御する場面が多いため、初心者でもよく使う型です。

スイッチのオンとオフを想像すると、trueとfalseの役割が分かりやすくなります。