TypeScriptでPropsを型定義する方法を徹底解説！初心者でもわかるReactとTypeScript入門

1. Propsとは何かを理解しよう

1. Propsとは何かを理解しよう

Props（プロップス）とは、Reactのコンポーネントに外部から渡す値のことです。たとえば「挨拶文を表示するコンポーネント」に「名前」を渡すと、その名前を使って表示を変えることができます。

TypeScriptを使わない場合は、Propsにどんな値でも渡せてしまうため、誤って数字の代わりに文字を渡すとエラーが出てしまいます。TypeScriptで型を定義すれば、「このPropsは文字列だけですよ」と決めておけるので安心です。

2. 基本的なPropsの型定義

2. 基本的なPropsの型定義

まずは文字列のPropsを受け取るコンポーネントを作ってみましょう。

import React from "react";

type GreetingProps = {
  name: string;
};

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>こんにちは、{name}さん！</h1>;
};

export default Greeting;

ここではGreetingPropsという型を作り、nameは文字列と定義しています。その型をReact.FCに指定することで、Propsが正しく使われているかチェックできるようになります。

3. 複数のPropsを型定義する

3. 複数のPropsを型定義する

次に複数の値をPropsとして渡す例です。数字や真偽値も組み合わせられます。

type ProfileProps = {
  name: string;
  age: number;
  isStudent: boolean;
};

const Profile: React.FC<ProfileProps> = ({ name, age, isStudent }) => {
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}</p>
      <p>学生: {isStudent ? "はい" : "いいえ"}</p>
    </div>
  );
};

このように型を決めておくと、年齢に文字列を渡すとエラーになり、間違いを事前に防げます。

4. Propsにオブジェクトを渡す型定義

4. Propsにオブジェクトを渡す型定義

実際のアプリでは、オブジェクトをPropsとして渡すこともよくあります。TypeScriptではオブジェクトの中身まで細かく型定義できます。

type User = {
  id: number;
  name: string;
};

type UserCardProps = {
  user: User;
};

const UserCard: React.FC<UserCardProps> = ({ user }) => {
  return (
    <div>
      <h2>ID: {user.id}</h2>
      <p>名前: {user.name}</p>
    </div>
  );
};

このように型を別で定義して再利用すれば、コードが整理されて読みやすくなります。

5. Propsを省略可能にする（オプショナル型）

5. Propsを省略可能にする（オプショナル型）

Propsによっては必須ではなく、省略できる場合もあります。そのときは?を付けてオプショナルにできます。

type MessageProps = {
  text?: string;
};

const Message: React.FC<MessageProps> = ({ text }) => {
  return <p>{text ? text : "デフォルトのメッセージ"}</p>;
};

このようにすることで「Propsがないときはどうするか」も決められるので便利です。

6. Propsに関数を渡す型定義

6. Propsに関数を渡す型定義

イベント処理などで関数をPropsとして渡すこともよくあります。TypeScriptでは関数の型も定義できます。

type ButtonProps = {
  onClick: () => void;
};

const Button: React.FC<ButtonProps> = ({ onClick }) => {
  return <button onClick={onClick}>クリック</button>;
};

このように関数の型を定義しておけば、引数や戻り値の間違いを防げます。

7. 型定義を使うメリットを理解しよう

7. 型定義を使うメリットを理解しよう

Propsを型定義するメリットは以下の通りです。

• 間違った値を渡すとすぐにエラーになる
• エディタが自動補完してくれるので効率的
• コードを読む人にとってPropsの内容が一目でわかる

初心者にとっては、エラーを早く見つけられるだけでなく、「このコンポーネントは何を受け取るのか」が分かりやすくなる点も大きな助けになります。

まとめ

まとめ

今回の記事では、React開発におけるTypeScriptを用いたPropsの型定義について、基礎から応用まで詳しく解説してきました。モダンなフロントエンド開発において、ReactとTypeScriptの組み合わせはもはや標準といっても過言ではありません。Propsに型を定義するということは、単にエラーを防ぐための作業ではなく、プログラムの意図を明確にし、チーム全体の開発効率を飛躍的に高めるための重要なステップです。

型定義がもたらす開発体験の向上

TypeScriptを導入する最大の恩恵は、エディタ上での「静的解析」と「自動補完」にあります。これまでJavaScriptだけで開発していた時は、Propsとして何を渡すべきか、そのコンポーネントの定義ファイルを確認しに行く必要がありました。しかし、型定義が行われていれば、VS Codeなどのエディタが即座に必要なプロパティを提案してくれます。また、必須のPropsを渡し忘れたり、数値を入れるべき場所に文字列を入れてしまったりした際、ブラウザで実行する前にコード上で赤線が出て教えてくれるため、バグの混入を未然に防ぐことができます。

基本的な型定義の振り返り

基本的には、type（型別名）またはinterfaceを使ってPropsの構造を定義します。Reactコンポーネント側では、React.FC（Functional Component）というジェネリクス型を使用することで、Propsに型を適用させることができます。

import React from "react";

// 表示用データの型定義
type UserInfoProps = {
  userName: string;
  userAge: number;
  isPremium?: boolean; // オプショナルなプロパティ
};

// コンポーネントへの適用
const UserInfo: React.FC<UserInfoProps> = ({ userName, userAge, isPremium = false }) => {
  return (
    

      
ユーザー情報
      
名前: {userName}
      
年齢: {userAge}歳
      
プラン: {isPremium ? "プレミアム" : "無料"}
    
  );
};

export default UserInfo;

Next.jsや大規模開発での応用

Next.jsのようなフレームワークを使用する場合でも、この基本的な考え方は変わりません。APIから取得したデータの配列をPropsとして渡す場合は、配列の型定義を組み合わせます。

import React from "react";

// リスト表示用のコンポーネント例
const TodoList = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
};

export default TodoList;

上記はJavaScriptの例ですが、これをTypeScriptにする際は、items: Array<Todo>のように定義することで、ループ処理内でのプロパティ参照も安全になります。

型安全な開発を習慣にしよう

最初は「型を書くのが面倒だ」と感じるかもしれません。しかし、プロジェクトの規模が大きくなればなるほど、過去に自分が書いたコードの内容を忘れてしまいます。その時、過去の自分からのメッセージとして「このコンポーネントはこれが必要だよ」と教えてくれるのがTypeScriptの型定義です。

これまでに学んだ「基本の型」「オブジェクトの型」「関数の型」「オプショナルな定義」を組み合わせれば、日常的なReact開発のほとんどの場面に対応できるはずです。まずは小さなコンポーネントから、一歩ずつ型を意識して書いてみることをお勧めします。