こんにちは！Reactの世界へようこそ。
日々コードを書いていると、「あ、この機能、見た目は違うけど中身の動きは一緒だな…」と気づく瞬間が必ずやってきます。
そんなとき、多くの人が「コピペでいいや」とやりがちですが、実はReactには「中身のロジックは共通化しつつ、見た目は自由自在に変える」という魔法のようなテクニックがあります。
今日は、その秘密兵器である「Render Props（レンダー・プロップス）」について、一緒に紐解いていきましょう。難しいことは考えなくて大丈夫。まずは、お買い物の例え話から始めますね。
—
1. Render Propsってなに？ お店の「注文用紙」で例えてみる
例えば、あなたがカフェに行ったとしましょう。
このお店には「注文用紙（Props）」を渡すと、店員さんが「美味しいコーヒー」を作ってくれるという仕組みがあります。
- 普通のお店： 「コーヒーください」と頼むと、決まったカップでコーヒーが出てくる。
- Render Propsのお店： 「この紙に書いた通りに作ってね」と頼むと、あなたが描いたデザインのカップで、その通りのメニューを提供してくれる。
つまり、「何を作るか（中身のロジック）」は店員さんが管理し、「どう見えるか（見た目のデザイン）」はあなたが描いた紙（関数）に委ねる。 これがRender Propsの正体です。
Reactで言えば、「コンポーネントという店員さんに、レンダリングするための『設計図（関数）』をPropsとして渡す」ということなんです。
—
2. なぜRender Propsを使うの？
「そのままコンポーネントを作ればいいじゃん！」と思うかもしれません。でも、こんな経験はありませんか？
- 「データ取得のロジックは同じなのに、UI（見た目）だけが場所によって違う」
- 「ボタンの動きは共通だけど、アイコンや色を呼び出し元で変えたい」
こういう時、Render Propsを使えば、ロジックを1箇所に集約しつつ、見た目は呼び出し元で自由自在に操れるようになります。コードがスッキリして、修正も1箇所で済む。まさに「伝説のアーキテクト」が好む、メンテナンス性の高いコードの第一歩です。
—
3. 実践！Render Propsを書いてみよう
まずは、「マウスの位置を取得する」という、ちょっと面倒なロジックをRender Propsで共通化してみましょう。
import React, { useState } from ‘react’;
// 【ロジック担当】マウス位置を計算し、その結果を「関数」に渡して表示してもらうコンポーネント
const MouseTracker = ({ children }) => {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
setPosition({ x: event.clientX, y: event.clientY });
};
return (
{children(position)}
);
};
// 【見た目担当】使う側は、受け取ったデータを使って好きなように表示する
export default function App() {
return (
{(pos) => (
マウスの現在地は：{pos.x}, {pos.y} です！
)}
);
}
このコードのポイント
- `MouseTracker` は「データ（`pos`）」だけを持っていて、それを `children` という関数に引数として渡しています。
- 使う側（`App`）は、その `pos` を使って、好きなようにHTMLを書けます。もし「色を変えたい」と思ったら、`App` 側をいじるだけでOK。`MouseTracker` の複雑なロジックには一切触れなくていいんです。
—
4. つまずきポイント：型付け（TypeScript）はどうするの？
Reactを触り始めると、TypeScriptとの出会いも近いですよね。「関数をPropsで渡すとき、型はどう書くの？」と悩む人も多いはず。
安心してください。コツは「受け取る関数の形を定義する」だけです。
// 受け取るデータの型
interface Position {
x: number;
y: number;
}
// Propsの型定義
interface Props {
// (arg: 引数の型) => 戻り値の型（今回はReactの要素）
children: (pos: Position) => React.ReactNode;
}
// あとは普通に書くだけ！
const MouseTracker = ({ children }: Props) => {
// …ロジック…
return
;
};
「`React.ReactNode`」は、「Reactが表示できるものなら何でもOK！」というおまじないです。これさえ覚えておけば、型エラーに怯えることはありませんよ。
—
最後に：完璧主義を捨てよう
「Render Propsは素晴らしいパターンですが、やりすぎるとコードが複雑に見えることもあります。最近は `Hooks` というもっと便利な機能もありますから、まずは『こういう書き方もあるんだな』と知っておくだけで十分です。
最初から完璧に使いこなそうとしなくて大丈夫。『ロジックと見た目を切り離すと、開発がもっと楽になる』、その感覚を大切にしてください。
今日書いたコードを、まずはご自身のエディタに貼り付けて動かしてみてください。画面にマウスの位置が出たとき、きっと小さな感動があるはずです。その積み重ねが、あなたを最高のエンジニアへと導いてくれますよ。
またいつでも相談しに来てくださいね。応援しています！
コメント