Next.jsでtype Propsを使ってコンポーネントにプロパティを渡す

type Propsとは

type Props を使用してコンポーネントにプロパティを渡す方法があります。

メリット

TypeScriptにおけるtype Propsのメリットです。

①型安全性

TypeScriptはコード内のエラーやバグを前もって検出できるプログラミング言語です。
type Propsを使用することで、コンポーネントに渡すべきプロパティ（データ）やその型（データの形式）をわかりやすく指定できます。

②コードの理解がしやすい

type Propsを使用すると、コンポーネントがどのようなプロパティを受け入れ、それらのプロパティの型が何であるかが明示的になります。これは、他の開発者やあなた自身がコードを読んだりメンテナンスしたりする際に、コードの理解が容易になります。つまり、他の人がコードを読んで「このコンポーネントは何を受け入れるのか？」という疑問を解消できます。

③リファクタリングのサポート

コードを整形する時に　type Propsを使用すると変更に関連する箇所を効果的に特定できます。つまり、コードの変更が効率的にできます。

④エディタの補完支援

TypeScriptをサポートするエディタ（例: Visual Studio Code）は、type Propsを使用することで、プロパティの名前や型を自動的に補完してくれます。これにより、プロパティ名や型を正確に入力する手間を省くことができ、タイプミスを防げます。

⑤ドキュメンテーション

type Propsを使用することは、コンポーネントのインターフェースをわかりやすくドキュメント化する手段としても役立ちます。他の開発者やチームメンバーにとって、コンポーネントがどのようなプロパティを期待し、どの型を要求するのかを一目で理解できるようになります。

要するに、type Propsを使うことで、TypeScriptの力を借りて、コードの品質を高めることができるます。

なぜtype Propsを使うといいか小学生にもわかる説明

type Propsを使ってコンポーネントにプロパティを渡すとなぜいいのか小学生でもわかるようにしてみます。

例えば、お寿司屋さんで注文をする時に、お客さんが食べたいメニューはそれぞれ違うかもしれないです。
それぞれのお客さんが欲しいメニューを伝えるのが、プロパティの役割です。

以下は、Reactコンポーネントを使った具体例で、以下のようなコンポーネントがあるとします。

function Order(props) {
  return <p>注文内容：{props.menu}</p>;
}

function App() {
  return (
    <div>
      <h1>ようこそ、React寿司へ</h1>
      <Order menu="マグロ" />
      <Order menu="ウニ" />
      <Order menu="えび" />
　　　　　　　　　　　　<Order menu="　サーモン" />
    </div>
  );
}

Orderコンポーネントにmenuというプロパティを渡し、Appコンポーネント内で、違うメニューをOrderコンポーネントに渡すことができます。このプロパティによって、それぞれの注文は違うメニューを表示できます。

ここで、*** のようにmenuプロパティにさまざまな値を指定することで、同じOrderコンポーネントを再利用しながら、違うメニューを注文できます。
これによって、同じコンポーネントを様々な状況で再利用することができ、コードを効果的に管理できています。

どう使ったか

実際にNext.jsを使った開発でtype Propsを使いました。
具体例を出して見ていきます。エンジニアの管理情報を例に出していきます。

interfaces/index.tsx

export type User = {
    id: number;
    No:number;
    name: string;
    age: number;
    department: string;
    labels: string;
};

のようなデータをとってくる時に使いました。

users/List.tsx

//省略
import { User } from "../../interfaces";


const users: User[] = [
    {
        id: 1,
        No: 1,
        name: ハリー,
        age: 27,
        department: 開発,
        role: バックエンド,
    },
    {
        id: 2,
        No: 2,
        name: メアリ,
        age: 23,
        department: 開発,
        role: フロントエンド,
    },
    {
        id: 3,
        No: 3,
        name: ジョージ;
        age: 25;
        department: インフラ;
        role: クラウド;
    },
];

type Props = {
     user: User;
};

const List: React.FC<Props> = ({ user }: Props) => {
        //省略

}
export default List;

上のように実務で使いました。(コードの中身は違っています。)

参考

ChatGPT参照