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

生徒

「Reactって、ちゃんと動いているかどうかは目で見れば分かるんじゃないんですか？」

先生

「小さい画面ならそれでも大丈夫ですが、機能が増えると見落としが増えます。そこでテストが役立ちます。」

生徒

「TypeScriptを使っていると、テストも型を意識する必要があるんですか？」

先生

「はい。PropsやStateを型安全にテストすると、間違いに早く気づけて安心して修正できますよ。」

1. Reactにおけるテストとは何か

Reactのテストとは、「このコンポーネントが想定どおりに動くか」を機械に確認してもらう作業です。ボタンを押したら文字が変わるか、正しいPropsを渡したら正しく表示されるか、などをチェックします。

人が毎回クリックして確認するのは大変ですが、テストを書いておくと、あとからコードを直したときでも自動で確認できます。

TypeScriptを使っている場合は、テストでも型が守られているかを確認できます。これにより、「間違ったPropsを渡してしまう」「Stateの扱いを間違える」といったミスを減らせます。

2. 型安全なテストが初心者にやさしい理由

テストと聞くと難しそうに感じますが、型安全なテストは初心者にこそ向いています。理由は、「正しい使い方」を型が教えてくれるからです。

PropsやStateに型が付いていると、テストコードを書くときにも「何を渡せばいいか」が分かります。間違った値を渡そうとすると、エディタやTypeScriptが教えてくれます。

例え：テストは完成した料理の味見、型はレシピです。レシピがあれば、間違った材料を使わずに済みます。

3. Propsを型安全にテストする基本

まずはPropsを受け取るシンプルなコンポーネントを考えます。表示用のメッセージをPropsで受け取るケースです。


type MessageProps = {
  text: string;
};

function Message(props: MessageProps) {
  return <p>{props.text}</p>;
}

このコンポーネントをテストするとき、正しいPropsを渡しているかが重要です。型があることで、テストコードでも「textは文字列でなければならない」と分かります。

型安全なテストでは、「Propsに正しい値を渡したとき、画面がどうなるか」を確認します。

4. 間違ったPropsを防ぐというテストの役割

TypeScriptを使っていると、テストコードでも間違ったPropsは書けません。たとえば、文字列の代わりに数字を渡そうとするとエラーになります。

これは、「実行する前に失敗に気づける」という大きなメリットです。テストは「正しく動くか」だけでなく、「間違った使い方をしていないか」を確認する役割も持っています。

初心者にとっては、「型エラーが出たら直す」という流れが、そのまま正しいテストの書き方につながります。

5. Stateを使うコンポーネントのテストの考え方

次に、Stateを使うコンポーネントを考えます。Stateは画面の中で変わる値なので、「初期状態」と「変化後」を意識してテストします。


import React, { useState } from "react";

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

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

この場合、テストでは「最初は0が表示されているか」「ボタンを押すと1になるか」を確認します。

Stateに型が付いていることで、countが数字であることが保証され、テストも安心して書けます。

6. PropsとStateを組み合わせたテストの視点

実際のReactアプリでは、PropsとStateが組み合わさることが多くあります。たとえば、Propsで初期値を受け取り、それをStateとして管理するケースです。

この場合、テストでは次の点を確認します。

正しいPropsを渡したときに初期Stateが正しくなるか
Stateが変わったときに表示が変わるか

型安全にしておくと、PropsとStateのつながりが分かりやすくなり、テストの内容も整理しやすくなります。

7. テストコードでも型が守ってくれること

TypeScriptを使ったReactでは、テストコードもTypeScriptで書くことが一般的です。そのため、コンポーネントと同じ型情報を使えます。

これは、「本番コードとテストコードのズレ」を防ぐ効果があります。Propsの型を変えたら、テスト側もエラーになるので、修正忘れに気づけます。

結果として、テストは「動作確認」だけでなく、「型の整合性チェック」としても働きます。

8. 初心者が意識したいテストの粒度

初心者の場合、すべてを細かくテストしようとすると大変です。まずは次のようなポイントに絞ると続けやすくなります。

Propsを渡したら正しく表示されるか
Stateの初期値が正しいか
ユーザー操作でStateが変わるか

これらは画面の基本動作なので、型安全なテストとの相性がとても良いです。

9. 型安全なテストがリファクタリングを助ける

テストがある状態でコードを書き直すと、「どこを直したら壊れるか」がすぐ分かります。これを安心してリファクタリングできると言います。

型安全なPropsとState、そして型安全なテストがそろっていると、Reactのコードはとても壊れにくくなります。

初心者にとっては、「直したら動かなくなった」という不安を減らせるのが大きなメリットです。

10. PropsとStateを型安全にテストするという考え方

PropsとStateを型安全にテストするとは、「正しい使い方だけができる状態で、動作を確認する」ことです。

型はルール、テストは確認作業です。この2つを組み合わせることで、Reactのアプリは初心者でも安心して成長させられます。

最初は難しく感じるかもしれませんが、「Propsを渡して表示を見る」「Stateが変わるかを見る」という基本だけでも、十分に価値のあるテストになります。

まとめ

今回はReactにおけるPropsとStateを型安全にテストする考え方について、初心者にも分かりやすい形で整理してきました。React開発においてテストは後回しにされがちですが、最初の段階から意識しておくことで、コードの品質と安心感は大きく変わります。特にTypeScriptを使った開発では、型という仕組みがあることで、テストの意味や価値がより明確になります。

まず重要なのは、Propsは外から渡される値であり、Stateはコンポーネント内部で変化する値であるという基本です。この二つの役割を正しく理解することで、テストの視点も自然と整理されます。Propsに関しては正しい値が渡されたときに正しく表示されるかを確認し、Stateに関しては初期値と変化後の状態を確認することが基本となります。

型安全という考え方は、単にエラーを防ぐためのものではありません。開発者にとっての道しるべとなり、何をどのように扱うべきかを明確にしてくれます。テストコードを書くときにも型があることで、何を渡すべきか迷わずに済み、結果として学習コストを下げる効果があります。初心者にとっては特にこの恩恵が大きく、間違いながら学ぶ過程をしっかり支えてくれます。

また、テストは単なる確認作業ではなく、設計の一部として捉えることが大切です。どのような振る舞いを期待しているのかを明文化することで、コンポーネントの責務がはっきりし、結果として保守しやすいコードになります。これはReact開発だけでなく、フロントエンド開発全体において非常に重要な考え方です。

次に、実際の開発を意識したシンプルなサンプルを通して復習してみます。PropsとStateを組み合わせた基本的なコンポーネントを確認しながら、どのようにテスト視点を持つべきかを整理します。


import React, { useState } from "react";

type CounterProps = {
  initialValue: number;
};

function Counter(props: CounterProps) {
  const [count, setCount] = useState<number>(props.initialValue);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

export default Counter;

このコンポーネントでは、Propsとして初期値を受け取り、それをStateとして管理しています。テストの観点としては、まず初期表示がPropsの値と一致しているかを確認し、その後ボタン操作によって値が正しく増加するかを見ることが重要です。このように視点を分解して考えることで、テストは難しいものではなくなります。

（初期値が表示され、ボタンを押すたびに数値が一つずつ増えていきます）

さらに重要なのは、テストと型が連携している点です。Propsの型を変更した場合、テストコードにも影響が出るため、修正漏れを防ぐことができます。これにより、コードとテストの整合性が保たれ、長期的に安定した開発が可能になります。

React開発におけるテストの目的は、動作確認だけではありません。将来の変更に対する安全網として機能し、安心してコードを改善できる環境を作ることにあります。型安全なPropsとState、そしてそれを支えるテストコードが揃うことで、初心者でも自信を持って開発を進められるようになります。

最初は小さなコンポーネントからでも構いません。Propsを渡して表示を確認する、Stateの変化を確認するという基本を繰り返すことで、自然とテストの感覚が身についていきます。継続して取り組むことで、より複雑なアプリケーションにも対応できる力が養われます。

先生と生徒の振り返り会話

生徒

Reactのテストって難しそうだと思っていましたが、PropsとStateに分けて考えると少し分かりやすくなりました。

先生

その理解はとても良いですね。Reactの基本構造をそのままテストに落とし込むのがポイントです。

生徒

TypeScriptの型があると、テストを書くときにも迷いにくい気がしました。

先生