--- title: "自分の部品を持ってきてください" slug: "bring-your-own-components" abstract: "クライアント側とハイブリッドレンダリングの両方をサポートする、独自のコードを持ち込むBYOCフローを使って、自分のWebやReactコンポーネントを登録またはスキャフォールドできます。" --- # 自分の部品を持ってきてください コンテンツ作成者やデザイナーは、[コンポーネントビルダー](https://doc.sitecore.com/sai/en/users/sitecoreai/prototyping-components.html) を使って[SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html)ユーザーインターフェース内でコンポーネントを作成、調整、デザイン、スタイリングします。開発者は自社のReactやウェブコンポーネントを追加することで、シンプルな「自分でコードを持ち込む(BYOC)」ワークフローで、あなたのSitecoreAIウェブサイト全体でレンダリングや利用可能にすることができます。Reactコードやウェブコンポーネントを作成した後、それを登録またはスキャフォールディングでSitecoreAIに取り込みます。 BYOCにはいくつかの利点があります: - BYOCコンポーネントはネイティブコンポーネントのようにインターフェースに表示されますが、Sitecoreはソースや定義にアクセスできず、コンポーネントコードは非公開のままです。コンポーネントビルダーでテーマを適用し、ドラッグ&ドロップのページインターフェースでページに追加できます。これは他のコンポーネントと同じようにです。 - ローカルで開発する際にブラウザでコードを熱くリロードし、ページ上で変更点を即座に確認できるようにし、Pagesや最終的なウェブサイトでコンポーネントのレンダリングも含まれます。 - 自分のツールや依存関係、技術を使ってコンポーネントを柔軟に作成できる柔軟性。 - SitecoreAIの各サイトでコンポーネントを再利用できます。 - 設定ユーザーインターフェースは [、パスしたJSONスキーマ](https://doc.sitecore.com/sai/ja/developers/sitecoreai/bring-your-own-components/walkthrough--registering-an-external-react-component/the-registercomponent-method.html "The registerComponent method")に基づいて自動的に生成されるため、コンテンツ作成者はPages WYSIWYGエディター内でコンポーネントを設定できます。 ## SitecoreAIへのBYOCコンポーネントの追加 BYOCコンポーネントをSitecoreAIに追加するには、以下の2つの方法のいずれかがあります。 - [手動登録の場合](https://doc.sitecore.com/sai/ja/developers/sitecoreai/bring-your-own-components/walkthrough--registering-an-external-react-component.html "Walkthrough: Registering an external React component") 、コンポーネントはJSS Next.jsアプリケーションの別の byoc フォルダにあります。 - [足場](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/scaffold-and-auto-register-your-own-components-in-a-next-js-app.html) - コンポーネントはJSS Next.jsアプリケーションの components フォルダーの一部であり、コンポーネントとSXA一緒に入っています。 ## レンダリングモード BYOCは、お客様のニーズに合わせたさまざまな開発および構成オプションをサポートしています。 ### クライアントサイド クライアント側で登録されたコンポーネントをレンダリングすることも可能です。例えば、スマート入力フィールドの追加、動的なコンテンツの表示、その他のインタラクティブな機能などです。クライアントコンポーネントをJSSアプリのbyoc/index.client.tsファイルに追加します。この例に従うことができます。 ### ハイブリッド 可能な限りこれが推奨される方法です。このアプローチでは、サーバー側にクライアント側のコンポーネントをプリレンダリングし、初期レンダリング時間とページの検索エンジン最適化を向上させます。ハイブリッド方式はコンポーネントのサーバー側インデックスをサポートし、アプリが完全に初期化される前でも静的デザインを読み込めます。ハイブリッドコンポーネントを使う場合は、この例のようにindex.hybrid.ts内にインポートすることを忘れないでください。 ## REST API REST APIを使ってSitecoreコンポーネント機能をソリューションに統合したい場合は、Swaggerのドキュメントに従うことができます。