Reactの考え方をディレクター向けに説明する——コンポーネントと状態

Reactをディレクターに説明するとき、私は 「画面を部品（コンポーネント）に分けること」と「その画面で変わるもの（状態）を最小限に決めること」の2つだけ を伝えています。コードの書き方は知らなくても、この2つをワイヤーの段階で言葉にできれば、エンジニアとの会話はかなり速くなります。

コンポーネントは「名前の付いた箱」

Reactの公式ドキュメントには、UIの作り方を5つのステップで説明した「Thinking in React」というページがあります。その最初のステップは、画面のモックに箱を描いて、それぞれに名前を付けることです（Thinking in React）。

これはディレクターが普段やっていることとほぼ同じです。ワイヤーを見ながら「ここはヘッダー」「ここは商品カード」「ここは絞り込みフォーム」と呼び分ける。その呼び名がそのまま部品の名前になり、同じ商品カードが20枚並んでいても、部品としては1つです。

私がワイヤーを渡すときに気をつけているのは、次の3点です。

• 同じ見た目のものには同じ名前を付ける（「おすすめカード」と「新着カード」が同じなら、1つの部品として扱う）
• 違いは「中身の差」として書く（画像・タイトル・価格が違うだけ、と明記する）
• 入れ子を意識する（一覧の中にカードがあり、カードの中にボタンがある）

この「中身の差」を、Reactでは props と呼びます。公式ドキュメントでは、propsは関数に渡す引数のようなもので、親の部品から子の部品へデータを渡して見た目を変えるもの、と説明されています。ディレクターの言葉にすると「同じ型に、違う中身を流し込む」です。

状態は「部品の記憶」

もう1つの柱が state（状態） です。公式ドキュメントでは、stateは部品の記憶のようなもので、操作に応じて情報を覚えて変えていくもの、とされています（State: A Component's Memory）。入力中の文字、いま開いているタブ、カートに入っている商品などが例に挙がっています。

同じページには、普通の変数では足りない理由として、再描画のたびに値が引き継がれないこと、値を変えても再描画が起きないこと、の2つが書かれています。細かい仕組みはエンジニアに任せてよいのですが、「画面を描き直すきっかけになるのが状態だ」と理解しておくと、仕様の話がしやすくなります。

何を状態にするかは、3つの質問で決める

ディレクターが一番役に立てるのはここだと私は考えています。「Thinking in React」では、状態を「アプリが覚えておく必要のある、変化するデータの最小限の集まり」と捉え、次の3つの質問で絞り込むよう勧めています。

質問	「はい」なら
時間が経っても変わらないか	状態ではない
親から props で渡されるか	状態ではない
既存の状態や props から計算できるか	状態ではない

たとえば商品一覧に「検索キーワード」と「在庫ありのみ表示」のチェックがある画面なら、状態はこの2つだけで足ります。「絞り込み後の商品リスト」や「該当件数」は、元の商品データと2つの状態から計算できるので、状態として持つ必要はありません。

私は仕様書に「この画面で利用者が変えられるもの」を箇条書きで書くようにしています。これがほぼそのまま状態の候補になり、件数表示や空の時のメッセージは「計算で出すもの」として別枠にしておくと、実装時に食い違いが起きにくくなりました。

状態を「どこに置くか」で話が分かれる

公式ドキュメントのステップ4は、状態をどの部品に置くかを決めることです。複数の部品が同じ状態を使うなら、それらに共通する一番近い親に置く、という考え方です。

ディレクションの場面では、「検索フォームで入力した条件を、一覧とページ上部の件数表示の両方に反映したい」といった要望がこれに当たります。この一言があるかないかで、エンジニアが状態を置く場所が変わります。後から「件数も連動させたい」と言うと手戻りになりやすいので、どの部品とどの部品が同じ情報を見ているか はワイヤーの段階で矢印1本でも書いておくようにしています。

なお、stateは部品ごとに独立しています。同じ部品を2つ置けば、それぞれが別々の記憶を持つ、と公式ドキュメントにも書かれています。「アコーディオンを1つ開いたら他は閉じたい」のように部品同士を連動させたい場合は、その旨を仕様に書いておくと親切です。

明日から試せる一手

いま手元にあるワイヤーを1枚選び、画面の要素に箱を描いて名前を付けてください。そのうえで、余白に「利用者が変えられるもの」を書き出し、3つの質問で「計算で出せるもの」を消していく。残ったものが状態の候補です。この1枚をエンジニアに渡すだけで、最初の打ち合わせの質問がぐっと減るはずです。