こんにちは！Reactの世界へようこそ。
コンポーネントを組み合わせて画面を作る楽しさを知り始めた頃、誰もが一度は「あれ？ 親のデータや機能って、どうやって子に渡せばいいの？」という壁にぶつかります。
今日は、その中でも特に重要で、かつ「Reactらしさ」が詰まった「関数をPropsで渡す」というテクニックについて、お話ししましょう。
—
1. 「リモコン」と「テレビ」の例えで考えてみよう
まずはコードの話を少し横に置いて、身近な例で考えてみてください。
あなたの手元に「テレビ」と「リモコン」があると思ってください。
- 親コンポーネント＝テレビ本体（画面の表示や、チャンネルを変えるという「機能」を持っている）
- 子コンポーネント＝リモコン（ボタンはあるけれど、押された時に何をするかはテレビに伝えないといけない）
リモコン（子）には「ボタン」しかありません。でも、そのボタンが押されたとき、実際にチャンネルを変えるのはテレビ（親）の仕事ですよね。
つまり、「ボタンが押されたら、この関数を実行してね」という「命令書（関数）」を、親から子へ手渡してあげる。これが、Reactにおける関数をPropsで渡すという仕組みの正体です。
—
2. 実装のステップ：まずはコードを見てみよう
難しく考える必要はありません。関数もデータの一部として、`props`という名の「贈り物」に詰め込むだけです。
// 親コンポーネント：テレビ本体
function TV() {
// 実際にチャンネルを変えるという「仕事（関数）」
const changeChannel = () => {
console.log(“チャンネルが変わりました！”);
};
return (
テレビ画面
{/ 子コンポーネントに「changeChannel」という名前で関数を渡す /}
);
}
// 子コンポーネント：リモコン
// propsから「onPush」という受け皿（関数）を取り出します
function RemoteControl({ onPush }) {
return (
);
}
どうでしょう？ `onPush` という名前の「紐」で、親の関数と子のボタンがつながりましたよね。
—
3. 初学者がつまずきやすい「落とし穴」
ここで、多くの人が陥る「あるある」を一つだけシェアします。
「カッコ」をつけてはいけない？
よくある間違いが、`onPush={changeChannel()}` とカッコをつけてしまうパターンです。
- `changeChannel()` と書くと、「今すぐ実行して！」という意味になります。
- `changeChannel` と書くと、「ボタンが押された時に実行してね」という「命令のセット」を渡すことになります。
「今すぐやって」ではなく「渡しておくから、あとでタイミングを見てやってね」というニュアンスの違いです。ここだけ間違えなければ、もうあなたは半分マスターしたようなものです！
—
4. 型付けの世界（TypeScriptを使うなら）
もしあなたがTypeScriptに挑戦しているなら、型付けも難しくありません。「このPropsは関数ですよ」と教えてあげるだけです。
// 関数の型を定義する：引数なし、戻り値なし(void)の関数
type RemoteProps = {
onPush: () => void;
};
// 子コンポーネントに型を適用
function RemoteControl({ onPush }: RemoteProps) {
return ;
}
`() => void` というのは、「引数はいらないし、何も返さなくていい関数だよ」という決まり文句です。最初は呪文のように見えるかもしれませんが、「ああ、これは『ただ実行するだけの関数』ってことね」と覚えてしまえば大丈夫です。
—
最後に：Reactは「対話」である
関数をPropsで渡すということは、親子で対話をするということです。
「子よ、何かが起きたら私に教えてね。その時はこの関数を呼んでくれればいいから」
そうやってコンポーネント同士が連携しあう姿は、まるで小さなチームが協力して一つの大きなシステムを作り上げているようで、とても美しいと思いませんか？
もしコードが動かなくても、焦る必要はありません。エンジニアという生き物は、エラーと友達になりながら成長していくものです。一つずつ、確実にお腹に落としていきましょう。
また何か壁にぶつかったら、いつでもここへ来てくださいね。応援しています！
コメント