17.0.1前回は、ルートコンポーネントの状態を、コンテクスでコンポーネントツリー内に共有しました。今回は、状態とその操作のロジックを、コンテクストのモジュールに切り出してみます。インタフェースと表示に専念するコンポーネントとロジックのモジュールを分ければ、見通しがよくなり、動作の確認や機能の拡張もしやすくなるのです。コンテクストをつくってuseContext()フックで参照する新たにつくるコンテクストのモジュールsrc/components/GameContext.jsは、つぎのような枠組みにします。鍵になるのは、コンテクストのProviderを返して、exportすることです。ルートコンポーネントは、importしたProviderでコンポーネントツリーを包みます。ひとつ課題は、子どもたちにどうやってvalueを渡すかです。これは、つぎの項でご説明します。}}>/*コンポーネントツリーにどうやってvalueを渡すか*/</GameContext.Provider>);};ロジックを切り出したルートコンポーネントのモジュールsrc/components/App.jsの記述が、つぎのコード001です。Provider(GameProvider)でコンポーネントツリーをラップして返すだけの単純なコードになってしまいました。状態にも一切触れません。ラップしたコンポーネントツリーをprops.childrenで受け取る前掲コード001で、ルートコンポーネントからProviderコンポーネントには、プロパティは何も渡されていないように見えるかもしれません。ラップしたコンポーネントツリーは、props.childrenというプロパティとして受け取れるのです。コンテクストのモジュールsrc/components/GameContext.jsで、プロパティをつぎのようにProviderコンポーネントの子として差し込みます(プロパティは引数からオブジェクトの分割代入で取り出しました)。すれば、コンポーネントツリーがコンテクストのvalueを参照できるようになるのです。}}>{children}</GameContext.Provider>);};ロジックを切り出したコンテクストのモジュールsrc/components/GameContext.jsの記述全体は、つぎのコード002のとおりです。ロジックはルートコンポーネントからほぼそのまま移しました。状態の保持と操作が、このモジュールに集約されたことになります。子孫コンポーネントはコンテキストの読み込みもとを変えるだけあと、書き替えなければならないのはコンポーネントツリーの子どもたちです。いっても、それぞれ1行だけ、コンテクスト(GameContext)のimportもとを直せば済みます。'./GameContext';一応、これらのコンポーネントモジュールについても、つぎのコード003に全体をまとめておきます。動きが確かめられるよう、以下のサンプル001をCodeSandboxに掲げました。