こんにちは。Reactの世界へようこそ。
Reactを学び始めると、「コンポーネントの再利用」という大きな壁にぶつかりますよね。「似たような機能だけど、見た目だけ少し違う」というコンポーネントを、コピー＆ペーストで量産してしまい、あとから修正地獄に陥った経験はありませんか？
今日は、そんな悩みを解決する魔法のようなテクニック「Render Props（レンダー・プロップス）」についてお話しします。難しそうに聞こえるかもしれませんが、実はとってもシンプルな考え方なんですよ。
—
Render Propsってなに？：料理の「型」と「材料」の関係
いきなりコードを叩く前に、少しだけ例え話をさせてください。
想像してみてください。あなたは今、「クッキーの型抜き」をしようとしています。
「生地をこねる」「型を抜く」「オーブンで焼く」という手順はいつも同じ。でも、ハート型のクッキーがいい時もあれば、星型のクッキーがいい時もありますよね。
このとき、「型抜き機（コンポーネント）」は、どの形でも対応できるように、あなたにこう言います。
「生地の準備は僕がやるよ！その代わり、『どんな形にしたいか』という指示書（関数）を僕に渡してくれたら、その通りに仕上げてあげるよ」
これがRender Propsの正体です。
「機能（ロジック）」を親が持ち、「見た目（UI）」を子に任せる。この「見た目を決める関数をプロパティとして渡す」という発想が、Render Propsなんです。
—
実践！Render Propsで「マウスの座標」を共有する
よくある「マウスの位置に合わせてメッセージを変える」という機能を例にしてみましょう。
まずは、マウスの位置を取得する「司令塔コンポーネント（MouseTracker）」を作ります。
import React, { useState } from ‘react’;
// マウスの座標を管理する「司令塔」コンポーネント
// renderという名前のプロパティで「どう描画するか」を受け取ります
const MouseTracker = ({ render }) => {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
setPosition({ x: event.clientX, y: event.clientY });
};
return (
{render(position)}
);
};
次に、これを使う側です。
const App = () => {
return (
今のマウス位置は {pos.x}, {pos.y} です！
)}
/>
);
};
どうでしょう？ `MouseTracker` は「座標を計算する」という仕事に専念し、`App` は「どう表示するか」というデザインに専念できていますね。これが、コードが美しく分かれる瞬間です。
—
TypeScriptで型安全に守る
「でも、型定義が難しそうで怖い……」という声が聞こえてきそうです。大丈夫、一つずつ紐解いていきましょう。
TypeScriptで型をつけるときは、「関数がどんなデータを受け取って、何を返すか」を定義するだけです。
// 座標のデータの型を定義
type MousePosition = { x: number; y: number };
// プロパティの型定義
type MouseTrackerProps = {
// renderは、「座標データ」を受け取って「Reactの要素」を返す関数ですよ、と教えます
render: (position: MousePosition) => React.ReactNode;
};
const MouseTracker = ({ render }: MouseTrackerProps) => {
// …中身は同じです！
};
これだけで、`render`関数内で「`pos.x`」と書こうとしたとき、ちゃんと「これは数値（number）だね」とエディタが認識してくれます。型があることで、チーム開発での「動かない！」というトラブルを未然に防げるんです。
—
なぜ今、Render Propsなのか？
最近は `Hooks` という便利な機能が主流ですが、それでもRender Propsが愛され続けているのには理由があります。
1. 疎結合（そけつごう）: コンポーネント同士がガチガチに固まっておらず、お互いに「何が必要か」だけを知っている状態を作れる。
2. 柔軟性: コンポーネントの構造を外から自由に入れ替えられるため、ライブラリ開発などで非常に重宝されます。
最初は少し戸惑うかもしれません。でも、「困ったときに、UIを外から注入できる場所を作る」という感覚を掴めれば、あなたはもうReactの中級者への切符を手に入れたも同然です。
無理に全部をRender Propsにする必要はありません。「あ、ここは表示だけ変えたいな」と直感的に感じたとき、そっとこのテクニックを思い出してみてください。
Reactの学習は、ときどきしんどいこともあるけれど、こうやってパズルを組み立てるような楽しさがあります。焦らず、自分のペースで進んでいきましょうね。
また何か壁にぶつかったら、いつでもここへ帰ってきてください。応援しています！
コメント