{"meta":{"title":"ビジネス ロジックの UI コンポーネントからの分離","intro":"Copilot Chat は、ビジネス ロジックをユーザー インターフェイス コードから分離し、アプリケーションの保守とスケーリングを容易にするのに役立ちます。","product":"GitHub Copilot","breadcrumbs":[{"href":"/ja/copilot","title":"GitHub Copilot"},{"href":"/ja/copilot/tutorials","title":"チュートリアル"},{"href":"/ja/copilot/tutorials/copilot-cookbook","title":"GitHub Copilot クックブック"},{"href":"/ja/copilot/tutorials/copilot-cookbook/refactor-code","title":"コードのリファクタリング"},{"href":"/ja/copilot/tutorials/copilot-cookbook/refactor-code/decouple-business-logic","title":"ビジネス ロジックを切り離す"}],"documentType":"article"},"body":"# ビジネス ロジックの UI コンポーネントからの分離\n\nCopilot Chat は、ビジネス ロジックをユーザー インターフェイス コードから分離し、アプリケーションの保守とスケーリングを容易にするのに役立ちます。\n\n多くのフロントエンド フレームワークでは、ビジネス ロジックがユーザー インターフェイス (UI) コンポーネント内に埋め込まれることがあり、特にアプリケーションが大きくなるにつれて、コードの保守や拡張が困難になります。\n\nCopilot Chat は、コードをリファクタリングして、ビジネス ロジックを個別のサービスまたは状態管理ソリューションに抽出するのに役立ちます。 これにより、ビジネス ロジックをさまざまな UI コンポーネントで再利用できるようになります。 また、懸念事項を分離し、相互依存関係を減らすことでコードの拡張が容易になります。また、ビジネス ロジックを UI コンポーネントから独立してテストできるようになるため、単体テストも簡略化されます。\n\n## サンプル シナリオ\n\nこの JavaScript コードでは、`Counter` コンポーネントでコンポーネントのビジネス ロジックを構成し、Web ページ内でコンポーネントを使うための UI コードも定義しています。\n\n```javascript id=counter-component\nimport React, { useState } from 'react';\n\nconst Counter = () => {\n  const [count, setCount] = useState(0);\n\n  const increment = () => {\n    if (count >= 10) {\n      alert('Count cannot exceed 10');\n      return;\n    }\n    setCount(count + 1);\n  };\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={increment}>Increment</button>\n    </div>\n  );\n};\n\nexport default Counter;\n```\n\n## プロンプトの例\n\n```copilot copy prompt ref=counter-component\nUse Redux to separate the UI code from the Counter component in this code.\n```\n\n## 応答の例\n\nCopilot には、コードをリファクタリングするための詳細な手順が用意されています。\n\n提案される変更は、状態管理に Redux を使うように `Counter` コンポーネントをリファクタリングするものです。 これには、初期状態とレジューサーを使用した Redux ストアの設定、インクリメント アクションの定義、Redux ストアに接続するための `Counter` コンポーネントの変更が含まれます。 最後に、Redux ストアを `Provider` コンポーネントで使用できるように、アプリケーションは `Counter` コンポーネントでラップされます。 これにより、UI ロジックは状態管理から分離されます。\n\n提案された変更により、コードは 5 つの個別のファイルに分割されます。\n\n> \\[!NOTE]\n> Copilot Chat 応答は非決定論的であるため、ここで説明した応答とは異なる応答が得られる場合があります。\n\n### actions.js\n\n```javascript\nexport const increment = () => ({\n  type: 'INCREMENT'\n});\n```\n\n### reducer.js\n\n```javascript\nconst initialState = {\n  count: 0\n};\n\nconst counterReducer = (state = initialState, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      if (state.count >= 10) {\n        alert('Count cannot exceed 10');\n        return state;\n      }\n      return {\n        ...state,\n        count: state.count + 1\n      };\n    default:\n      return state;\n  }\n};\n\nexport default counterReducer;\n```\n\n### store.js\n\n```javascript\nimport { createStore } from 'redux';\nimport counterReducer from './reducer';\n\nconst store = createStore(counterReducer);\n\nexport default store;\n```\n\n### counter.js\n\n```javascript\nimport React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { increment } from './actions';\n\nconst Counter = () => {\n  const count = useSelector(state => state.count);\n  const dispatch = useDispatch();\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => dispatch(increment())}>Increment</button>\n    </div>\n  );\n};\n\nexport default Counter;\n```\n\n### index.js\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport store from './store';\nimport Counter from './counter';\n\nReactDOM.render(\n  <Provider store={store}>\n    <Counter />\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## 詳細については、次を参照してください。\n\n* [GitHub Copilot Chat のプロンプト エンジニアリング](/ja/copilot/concepts/prompting/prompt-engineering)\n* [GitHub Copilot の使用に関するベスト プラクティス](/ja/copilot/get-started/best-practices)"}