1. Propsとは？Reactの基本を確認しよう

まず、Props（プロップス）について簡単に説明します。Propsとは、親コンポーネントから子コンポーネントへ値を渡す仕組みです。たとえば「おもちゃに電池を入れる」とイメージするとわかりやすいです。電池（Props）が正しく入っていないと、おもちゃ（コンポーネント）が動きません。ReactではこのPropsを通して、表示する文字や色、動作などを指定できます。

2. 型安全とは何か？

型安全とは、「数字には数字を、文字には文字を」といったルールを守ることです。たとえば電話番号を入力する欄に「こんにちは」と文字を書いたら、電話はかけられません。コンピュータの世界でも同じで、「このデータは数値」「このデータは文字列」とあらかじめ決めておくと、間違いを防ぐことができます。Reactで型安全なPropsを使うと、プログラムを書くときに「間違った値を渡していないか」を自動でチェックしてくれます。

3. 型安全なPropsを使うメリット

型安全なPropsを使うと、次のようなメリットがあります。

エラーを早く見つけられる：開発中に間違った型を渡すとすぐに警告が出ます。
チーム開発が楽になる：どんな値を渡せばよいか明確になり、他の人が見ても理解しやすくなります。
コードが読みやすくなる：Propsの役割や形式がハッキリするので、初心者でも迷わず使えます。

4. 実際のコード例を見てみよう

それではReactで型安全なPropsを使った簡単な例を見てみましょう。ここではTypeScript（型を扱いやすい言語）を使います。


import React from "react";

// Propsの型を定義
type GreetingProps = {
  name: string; // 文字列だけを受け取れる
  age: number;  // 数字だけを受け取れる
};

// コンポーネントに型を指定
function Greeting(props: GreetingProps) {
  return (
    <div>
      <h1>こんにちは、{props.name}さん！</h1>
      <p>{props.age}歳ですね。</p>
    </div>
  );
}

// 親コンポーネントで値を渡す
function App() {
  return (
    <div>
      <Greeting name="太郎" age={20} />
      {/* 間違えて数値に文字を入れるとエラーになる */}
      {/* <Greeting name="次郎" age="二十" /> */}
    </div>
  );
}

export default App;

（画面に「こんにちは、太郎さん！」と表示され、その下に「20歳ですね。」と表示されます）

5. 型安全がないとどうなる？

もし型安全を使わないと、誤った値を渡してもエラーに気づかないことがあります。たとえば「年齢」に「二十」と文字を入れてしまっても、その場では気づかず、実行したときに予期せぬエラーが起きるかもしれません。こうしたトラブルを防ぐために、ReactではTypeScriptと組み合わせて型安全なPropsを使うことが推奨されています。

6. PropsとStateの違いも知っておこう

初心者の方が混乱しやすいのがPropsとStateの違いです。Propsは親から渡される「外部からの値」、Stateはコンポーネントの中で管理する「自分の値」です。型安全はどちらにも適用できますが、この記事では特にPropsに注目しました。Reactを学んでいくと、Stateも型を付けて管理する場面が増えますので、次の学習に備えて頭の片隅に置いておくと良いでしょう。