Day 5・React/Next.jsの超入門
propsの型づけ
部品に外から渡す値(props)に型をつけ、渡し忘れや型違いをコンパイル時に防ぐ。
部品に「外から値を渡す」のがprops
同じ見た目でも、中身のテキストだけ変えたい場面はよくあります。たとえば「◯◯さん、こんにちは」の◯◯だけ差し替えたい。このとき、コンポーネントに外から渡す値のことを(プロップス、propertiesの略)と呼びます。propsは、関数コンポーネントが受け取る「引数」だと考えてください。
// props は関数の引数として受け取る
function Greeting(props) {
return <p>{props.name}さん、こんにちは</p>;
}
// 使う側: name という値を渡している
// <Greeting name="田中" />型なしのpropsは事故のもと
上のコードは props に型がないため、name を渡し忘れても、数値を渡しても、エディタは何も警告しません。実行して初めて「undefinedさん、こんにちは」と表示されて気づく、という遅い失敗になります。
propsの形を型で宣言する
そこで、propsがどんな形かを型で宣言します。よく使うのは(type)かです。ここでは分かりやすいtypeで書きます。「name は文字列」と決めておけば、渡し忘れや型違いをエディタが赤線で即座に教えてくれます。実行前に間違いが分かるのが型の価値です。
// propsの形を型で定義する
type GreetingProps = {
name: string; // 必須の文字列
age?: number; // ? をつけると「あってもなくてもよい」
};
function Greeting({ name, age }: GreetingProps) {
return (
<p>
{name}さん、こんにちは
{age !== undefined ? "(" + age + "歳)" : ""}
</p>
);
}
// <Greeting name="田中" /> OK
// <Greeting name="田中" age={30} /> OK
// <Greeting age={30} /> エラー: name が足りない
// <Greeting name={30} /> エラー: name は文字列のはず- { name, age } のように書くのは「分割代入」。props.name と書く代わりに、必要な値を直接取り出せる
- 型の name: string は「必須」、age?: number の ? は「省略可能」を意味する
- 渡し忘れ・型違いはコンパイル時(実行前)にエラーになるので、画面を開く前に気づける
型なし
何を渡せばいいか呼び出し側から分からず、ミスに実行時まで気づけない
function UserCard(props) {
return <div>{props.title}</div>;
}
// props.name の打ち間違いをしても無警告型あり
受け取れる値が一目で分かり、間違いは赤線で即座に分かる
type UserCardProps = { title: string };
function UserCard({ title }: UserCardProps) {
return <div>{title}</div>;
}
// title の打ち間違いはその場でエラーAIにはこう聞く
「このコンポーネントのpropsに型をつけて。nameは必須の文字列、ageは省略可能な数値」と形を日本語で伝えれば、AIが型定義を書いてくれます。ポイントは、あなたが型(=仕様)を決めて、実装はAIに任せること。型があれば、AIの出力が仕様どおりか型チェックが自動で照合してくれます。
propsは「部品への引数」、その形を型で決めておく。これだけで、チーム開発でもAIとの共同作業でも、渡し間違いという定番のバグを実行前に潰せます。
読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。
理解度チェック
答えられれば、面接で説明できる状態に一歩近づきます。
型 type GreetingProps = { name: string; age?: number } が表す意味として正しいものはどれ?
propsに型をつける最大のメリットは何?
propsに型をつけると、AIと一緒に開発するときにどう役立ちますか。
記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。