「同じ材料なら、いつも同じ料理を」Reactの純粋コンポーネントってなんだろう？
こんにちは。Reactの世界へようこそ。
初めてReactを触ったとき、「コンポーネントって結局なんなの？」「再レンダリングって何でこんなに気を使うの？」と頭を抱えてしまうことは、誰にでもある通過儀礼のようなものです。大丈夫、あなただけではありません。
今日は、Reactのパフォーマンスを語る上で欠かせない「純粋コンポーネント（Pure Component）」という考え方について、肩の力を抜いてお話ししましょう。
—
料理に例えてみよう：自動調理ロボットの話
想像してみてください。あなたは今、最新の「自動調理ロボット」を開発しています。
- 純粋なコンポーネント： 「卵1個」と「塩少々」という材料（Props）を渡すと、いつ何時でも寸分違わぬ「完璧な目玉焼き」を作ってくれるロボットです。
- 純粋ではないコンポーネント： 材料は同じなのに、その日の気分で急にオムライスを作り始めたり、あるいは裏で勝手に冷蔵庫の中身を確認して、材料以外のものまで勝手に調理に混ぜてしまうようなロボットです。
Reactにおける「純粋コンポーネント」とは、まさに前者です。
「同じ材料（Props）をもらったら、必ず同じ見た目（UI）を返す」という約束を守るコンポーネントのこと。これこそが、Reactのレンダリング最適化を支える一番の基本ルールなのです。
なぜ「純粋」だと嬉しいの？
もしあなたのコンポーネントが「純粋」であれば、Reactはこう考えます。
「お、このロボット（コンポーネント）は前回と同じ材料だな。じゃあ、わざわざもう一度調理（再計算・再描画）しなくても、前の結果をそのまま使い回せばいいよね！」
これが、レンダリングの無駄を省くための強力な武器になります。逆に、純粋じゃないと、Reactは「材料は同じだけど、中身が変わってるかもしれないから……念のためもう一度作り直そう！」と慎重になり、余計な処理が走ってしまうんです。
—
コードで見てみる「純粋な世界」
実際に、ごくシンプルな「挨拶をするコンポーネント」を見てみましょう。
// これは純粋なコンポーネントの例です。
// 受け取った名前（name）に対して、必ず同じ文字列を返します。
function Greeting({ name }) {
console.log(“挨拶コンポーネントが描画されました！”);
return
こんにちは、{name}さん！
;
}
// 使い方
//
こんにちは、田中さん！
を返します。
もし、この中で `const time = new Date().getTime();` のように「今の時間」をこっそり取得して表示したりすると、それはもう「純粋」ではありません。材料が変わっていないのに、結果が刻々と変わってしまうからです。
—
つまずきやすいポイント：気楽に行こう
初心者の頃、よくある悩みは「じゃあ、すべてのコンポーネントを完璧に純粋にしなきゃいけないの？」というプレッシャーです。
結論から言うと、そんなに気負わなくて大丈夫です。
Reactは、基本的には純粋であることを期待しますが、現実のアプリでは「APIからデータを取ってくる」こともあれば「ユーザーの入力を受け取る」こともあります。これらはすべて「純粋ではない」動きです。
Reactには、これらを綺麗に分離する仕組み（`useEffect`や`useState`など）がちゃんと用意されています。
まずは、「画面を表示する部分は、できるだけシンプルに、材料だけで決まるように書こう」と意識するだけで、あなたの書くコードは驚くほど読みやすく、そして高速になります。
—
最後に：一歩ずつでいいんです
純粋コンポーネントの考え方は、最初は少し抽象的に感じるかもしれません。でも、もし画面が重いなと感じたり、動きがカクつくなと思ったら、立ち止まってこう自分に聞いてみてください。
「このコンポーネントは、同じ材料で同じ結果を返せているかな？」
この視点を持つだけで、あなたはもう「ただのコードを書く人」から「Reactの仕組みを理解するエンジニア」へ一歩近づいています。
分からないことがあっても、何度でも立ち止まって、またここに戻ってきてください。Reactの世界は、あなたの挑戦をいつでも歓迎しますよ！それでは、また次の記事でお会いしましょう。
コメント