やあ、Reactの世界へようこそ！ここに来たということは、君は今「Reactでコンポーネントを作っているけれど、データの受け渡し（Props）の型定義で少し迷子になっている」というところかな？
大丈夫、安心してください。Reactの型定義は、最初は誰だってパズルみたいに感じるものです。今日は、「`interface`と`type`、どっちを使えばいいの？」という疑問を、現場のリアルな感覚を交えて解き明かしていきましょう。
—
1. Propsは「コンポーネントへのお手紙」
まず、Propsとは何でしょうか？
僕の考えでは、「親コンポーネントから子コンポーネントへ送る『指示書』」だと思っています。
例えば、君が「ボタン」を作るとして、親が「赤色で、文字は『送信』にしてね」と書いたメモを渡す。そのメモ（Props）の中身がバラバラだと、ボタンは混乱して動かなくなりますよね。だからこそ、TypeScriptを使って「このお手紙には、必ず『色』と『文字』を書いてね！」とルールを定めるのです。
どちらを使えばいいの？ `interface` vs `type`
TypeScriptには「型」を決める方法が2つあります。
- `interface`（インターフェース）: 「設計図」に近いイメージ。後から項目を追加（拡張）しやすいのが特徴です。
- `type`（型エイリアス）: 「あだ名」や「定義」に近いイメージ。柔軟性が高く、複雑な組み合わせが得意です。
結論から言うと、ReactのProps定義ではどちらを使っても大きな差はありません。
ただ、現場の空気感で言うと、「迷ったら`type`でいい」というのが今の主流です。理由はシンプル。`type`の方が直感的で、いざという時の型結合（`&`を使った合成）がとても楽だからです。
—
2. 実際に書いてみよう！ Propsの型定義
では、シンプルなお買い物カードを例に書いてみましょう。
// TypeScriptでPropsのルールを決めます
type ProductCardProps = {
name: string; // 商品名（文字列）
price: number; // 価格（数値）
isSoldOut?: boolean; // ?をつけると「あってもなくても良い」というオプション扱いになります
};
// コンポーネントに型を適用する
const ProductCard = ({ name, price, isSoldOut }: ProductCardProps) => {
return (
{name}
価格: ¥{price}
{/ 売り切れなら表示する /}
{isSoldOut && 売り切れ！}
);
};
ここがポイント：`?`（オプショナル）の魔法
さっきの `isSoldOut?: boolean` に注目してください。この `?` は、「この項目は空っぽでも怒らないでね」という優しい合図です。
実際の開発では、「全部の項目が必須」というケースは意外と少ないもの。この記号を使いこなすだけで、コードの柔軟性がグッと上がります。
—
3. 「子要素」を丸ごと受け取る最強の型 `ReactNode`
Propsを渡していると、「コンポーネントの間にタグを挟みたい！」と思うことがありますよね。
// こういう風に使いたい場合
こんにちは！
このとき、`Wrapper`コンポーネントはどう受け取ればいいのでしょうか？
そんな時のために、Reactには `ReactNode` という魔法の型が用意されています。
import { ReactNode } from ‘react’;
type WrapperProps = {
children: ReactNode; // ReactNodeは「Reactで表示可能なものすべて（文字、タグ、数字など）」を受け入れる器です
};
const Wrapper = ({ children }: WrapperProps) => {
return
;
};
`ReactNode` を使えば、「文字だけじゃなくて、画像やボタンも何でも入れていいよ！」という包容力のあるコンポーネントが作れます。これは現場でも毎日使う、いわば「必殺技」のようなものです。
—
最後に：完璧を目指さなくていい
Reactを始めたばかりの頃は、「型を完璧に書かなきゃ！」と気負いすぎてしまうことがあります。でも、最初は「エラーが出たら、TypeScriptがヒントをくれる」くらいの気持ちで大丈夫です。
`interface` か `type` かで悩んだら、まずは `type` で書き始めてみてください。もし大規模なライブラリを作ったり、型を継承したくなったりしたら、その時に `interface` を調べてみれば十分です。
プログラミングは、完璧な設計よりも「動くものを書いて、少しずつ磨いていく」プロセスが一番楽しいんです。君が書いたそのコンポーネント、きっと素晴らしいものになりますよ。
また何か壁にぶつかったら、いつでもここへ来てくださいね。応援しています！
コメント