---
title: "ウォークスルー:外部Reactコンポーネントの登録方法"
slug: "walkthrough--registering-an-external-react-component"
abstract: "コンポーネントビルダーでReactのコードベースを参照して、SitecoreAIにカスタムコンポーネントを含めると良いでしょう。"
---
# ウォークスルー:外部Reactコンポーネントの登録方法

[SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html)には強力なコンポーネントビルダーインターフェースが含まれており、デザイナーはこれを使ってコンポーネントの設定、配置、スタイル化が可能です。コンテンツ作成者はページビルダーを使ってサイトページにコンポーネントを追加できます。コンポーネントビルダーは、一度作成して再利用しながら一貫したテーマを適用することで、サイトのコンテンツを単一ソース化できます。

SitecoreAIでは、[コンポーネントにコードを含み](https://doc.sitecore.com/sai/en/users/sitecoreai/add-html-and-javascript-to-a-component.html) 、[JSSでコンポーネントを構築する](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/components-in-jss-apps.html)他のオプションもあります。このトピックでは、外部ReactコンポーネントやReactコンポーネントライブラリ全体を参照する方法について説明します。

[コンポーネントビルダー](https://doc.sitecore.com/sai/en/users/sitecoreai/get-started-with-the-component-builder.html) は、主にコンテンツ作成者やデザイナーがウェブサイトの再利用可能な要素を作成するために使用するローコード/ノーコードのソリューションです。開発者は外部のコードベースを参照してコンポーネントを導入し、コンポーネントビルダーやPagesインターフェースで使用できるように、自分でコードを(BYOC)持参できます。開発者が登録フローを完了した後、Reactコンポーネントを [ビルダーに追加](https://doc.sitecore.com/sai/en/users/sitecoreai/add-an-external-component-to-the-component-builder.html)できます。その結果、

-   登録されたコンポーネントはコンポーネントライブラリの一部であり(プロジェクトにスコープが設定されています\[^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a\_xmc\_project\])、ページビルダー内で使用・再利用が可能です。
-   登録されたコンポーネントはコンポーネントビルダーやページビルダーでプレビューできます。
-   コンテンツ作成者はPages内のコンポーネントを使って、定義された入力パラメータの値を入力できます。

スターターファンデーションを使うと、フロントエンドを管理するためのJSSアプリが付属しています。Reactコンポーネントを作成した後、JSSアプリでBYOCのReactコンポーネントを登録します。

外部コンポーネントを参照する前に、コードベースがアクセス可能なレンダリングホストURL上でホストされていることを確認してください。ローカルで作業し、テスト目的でローカルレンダリングホストを参照することも可能です。

> !ヒントこのトピックをもっと簡単に理解するために、コンポーネントアプリの設定タブで「ホストのレンダリング」をクリックし、そこからコマンドとコードをコピーしてください。

このウォークスルーでは、以下の方法を説明します:

-   コードに registerComponent メソッドを追加してください。
-   コンポーネントをインポートします。
-   レンダリングホストを登録してください。
-   外部Reactコンポーネントの登録に関するトラブルシューティング。

## コードにregisterComponentメソッドを追加してください

コンポーネントを登録しプロパティを指定するには:

-   [registerComponentメソッド](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")を使ってください。この呼び出しはビルダーがコンポーネントをレンダリングしようとする前に実行されなければなりません。

## コンポーネントをインポートします

登録を完了しレンダリング用にするために、BYOCコンポーネントをアプリにインポートする必要があります。JSSバージョン21.6以降は、新しいスターター基盤によって自動的に処理されるようになりました。

JSSバージョン21.5以前を使っている場合は、ツリーシェイク中にコンポーネントが削除されないようにインポートし、副効果のために構文でインポートしてください。 Layout.tsxの上部に置いてください:

import './ExampleHybridComponent

BYOCはJSS以外のアプリでも使えます。この手法を実装したNext.jsの例例はこちらでご覧いただけます。

JSSを使用する場合、BYOCコンポーネントをインポートするためのあらかじめ定義された構造を使うこともでき、適切な文脈でコンポーネントが利用可能であることを保証できます:

-   クライアント専用コンポーネントの場合は、インポートファイルを src/byoc-imports/index.client.ts ファイルに追加してください。
-   ハイブリッドコンポーネントの場合は、インポート文を src/byoc-imports/index.hybrid.ts ファイルに追加してください。

## レンダリングホストを登録します

ローカルで開発する場合や自社編集ホストを使う場合、コンポーネントビルダー内でレンダリングホストを登録できます。これにより、SitecoreAIにアプリをプッシュすることなくBYOCコンポーネントの開発やデバッグが可能になります。

レンダリングホストを登録することで、コンポーネントアプリとページエディターが作成およびビジュアル編集中にBYOCコンポーネントを正しく読み込みレンダリングできます。

> !注他のレンダリングホストやフロントエンドアプリケーション(例:VercelやNetlify)からコンポーネントを登録しても、ビジュアル編集体験のためにコンポーネントアプリやページビルダーエディターで自動的に利用可能になるわけではありません。コンポーネントアプリ/ページビルダーエディターでコンポーネントを使用するには、適切なレンダリングホストがコンポーネントアプリに登録されている必要があります。

レンダリングホストを登録するには:

1.  コンポーネントの **設定** タブで **「ホストのレンダリング**」をクリックします。
2.  「 **レンダリングホストの設定** 」欄で、公開されているURLを入力して「 **保存**」をクリックします。これによりReactのコードを取得し、Componentsアプリに登録されます。

少し待つと、登録された部品数の更新表示が表示されます。

## 外部Reactコンポーネントの登録トラブルシューティング

外部Reactコンポーネントを登録すると、サーバー側のCould not find registered BYOC componentエラーとクライアント側(ブラウザ側)のハイドレーションエラーが同時に発生することがあります。

フロントエンド・アズ・ア・サービス(FEAAS)SDKはCommonJSおよびESモジュールをサポートし、JSSはCommonJSを使用します。このエラーは、Next.jsアプリケーションにFEAASとJSSが同じモジュールフォーマットシステムを使用するWebpackプラグインが不足していることを示しています。

誤差を解消するために:

1.  アプリケーションの src/lib/next-config/plugins フォルダにあるプラグインファイルをダウンロードしてください。
2.  アプリケーションを再デプロイしてください。

^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a\_xmc\_project: **プロジェクト** とは環境の論理的なグループ化です。各プロジェクトは、開発、テスト、本番環境など複数の環境を含むことができます。SitecoreAIでは、Deployアプリ、CLI、またはREST APIを使ってプロジェクトを作成できます。

When you create a project using the Deploy app, one environment is automatically created, and you can choose whether it’s a production environment (that gets faster support than the non-production environments). The number of projects you can create depends on your subscription.