こんにちは。Reactの世界へようこそ！
最初はコンポーネント同士のデータのやり取り、特に「どこに何を渡せばいいのか」で迷ってしまうこと、ありますよね。大丈夫、みんなそこを通ってプロになっていますから。
今日は、Reactをより柔軟に、そして「まるでパズルを組み立てるように」開発するための「Slot（スロット）パターン」という強力な武器を授けます。これを知ると、あなたのコードは劇的にスッキリして、後から修正するのが楽しくなりますよ。
—
そもそも「Slot（スロット）」って何？
難しい言葉に聞こえますが、実は私たちの身の回りにあふれている概念です。
例えば、「お弁当箱」を想像してみてください。
お弁当箱（コンポーネント）には、「メインのおかずを入れる場所」「ご飯を入れる場所」「デザートを入れる場所」という「枠（スロット）」があらかじめ決まっていますよね。
その枠の中に、今日は唐揚げを入れるか、ハンバーグを入れるか。あるいは、ご飯の代わりにパスタを入れるか。中身が変わっても、お弁当箱という「枠組み」そのものは壊れません。
Reactでいう「Slotパターン」もこれと同じです。「ここには何かが入るためのスペースですよ」とあらかじめ空けておいて、使う時に好きなパーツ（コンポーネント）を流し込む。これがSlotパターンの正体です。
—
なぜPropsで全部渡さないの？
初心者の頃は、何でもかんでもPropsで「名前」や「フラグ」を送りたくなります。「もし『isShowButton』がtrueならボタンを表示して…」という具合に。
でも、それを繰り返すと、コンポーネントがどんどん肥大化して、まるで「何でも屋の便利屋」みたいに制御不能になってしまうんです。
Slotパターンを使えば、「中身は中身を作る人に任せる（関心の分離）」という、とても美しい設計ができるようになります。
—
実践：Slotパターンを書いてみよう
では、実際にコードを見てみましょう。「ヘッダー・メイン・フッター」という構成を持つ `Layout` コンポーネントを作ってみます。
1. Slotを用意する
ここでは `children` だけでなく、明示的に名前をつけたスロット（`headerSlot`, `footerSlot`）を作ってみます。
import React from ‘react’;
// Propsの型定義です。
// React.ReactNodeは「Reactで表示できるあらゆるもの（文字、タグ、コンポーネント）」を指す魔法の型です。
type LayoutProps = {
headerSlot: React.ReactNode;
children: React.ReactNode; // メインコンテンツ用の標準スロット
footerSlot: React.ReactNode;
};
const Layout = ({ headerSlot, children, footerSlot }: LayoutProps) => {
return (
);
};
2. コンポーネントを差し込む（お買い物感覚で！）
使う側では、好きなものをパズルのピースとして渡すだけです。
const App = () => { } © 2023 React学び中 } ここはメインのコンテンツです。
return (
footerSlot={
>
{/ childrenにはメインのコンテンツが入るよ /}こんにちは！
);
};
—
なぜこのやり方が「神」なのか
この手法の最大のメリットは、「Layoutコンポーネントは、中身が何かなんて一切気にしなくていい」ということです。
- ヘッダーの中に検索バーを入れたい？ → `headerSlot` に検索コンポーネントを渡すだけ。
- ログイン状態によってヘッダーを変えたい？ → `App` 側で条件分岐して、渡すコンポーネントを切り替えるだけ。
Layout側をわざわざ書き換える必要がないので、バグが入り込む隙が圧倒的に減るんです。これが、実務で愛される「堅牢なアーキテクチャ」の第一歩です。
—
つまずきそうなポイント：型付けのコツ
「`React.ReactNode` って何でもありで危険じゃない？」と思うかもしれません。
確かにそうですが、今の段階では「Reactが描画できるなら何でもOK！」と割り切るのが一番の近道です。
もし「このスロットにはボタンしか入れさせたくない！」と厳格にしたい場合は、`React.ReactElement` を使うこともできますが、最初は無理せず `React.ReactNode` を使って、「柔軟に差し替えられる楽しさ」を体験してみてください。
—
最後に：完璧を目指さなくていい
最初は「どこをSlotにすればいいんだろう？」と迷うはずです。でも、それでいいんです。
最初は一つのコンポーネントに全部詰め込んでみて、あとで「あ、ここって毎回同じ形だな」と気づいた時に、スッと `headerSlot` のように外に出してあげる。
リファクタリング（後からの改善）こそが、React開発の醍醐味です。
今日のコードをコピーして、ぜひ自分のエディタで動かしてみてください。自分の書いたパーツが、自由自在にレイアウトの中にハマる感覚は、きっと最高に気持ちいいはずですよ！
応援しています。何かまた詰まったら、いつでも聞きに来てくださいね。
コメント