> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/hajimeni/reactive-components.md).

# リアクティブコンポーネント

## 概要

Reactive コンポーネントは、ユーザーが Experience Site とやり取りすると自動的に更新されます。ユーザーがあるコンポーネントで何かをクリックまたは選択すると、接続された他のコンポーネントが即座に更新され、関連情報が表示されます。これにより、シームレスでインタラクティブな体験が生まれます。

{% hint style="success" %}

## 主要コンポーネント

Reactive コンポーネントは次のとおりです:

* [AX - データテーブル](/experience-cloud/experience-cloud-ja/experience-components/ax-data-table.md)
* [AX - ](/experience-cloud/experience-cloud-ja/experience-components/ax-data-table.md)[マップ](/experience-cloud/experience-cloud-ja/experience-components/ax-map.md)
* [AX - ](/experience-cloud/experience-cloud-ja/experience-components/ax-data-table.md)[リスト](/experience-cloud/experience-cloud-ja/experience-components/ax-list.md)
* [AX - ](/experience-cloud/experience-cloud-ja/experience-components/ax-data-table.md)[タイムライン](/experience-cloud/experience-cloud-ja/experience-components/ax-timeline.md)
* [AX - ](/experience-cloud/experience-cloud-ja/experience-components/ax-data-table.md)[テキストブロック](/experience-cloud/experience-cloud-ja/experience-components/ax-text-block.md)
  {% endhint %}

### **これが役立つ理由**

Reactive コンポーネントを使うと、ユーザーがデータを動的に探索できるインタラクティブなページを構築できます。たとえば、AX - データテーブルでレコードをクリックすると、AX - マップが自動的に更新されてそのレコードの所在地を表示したり、AX - タイムラインをフィルタリングして関連アクティビティを表示したりできます。どれもページの再読み込みや移動は不要です。

これにより、ユーザーが閲覧または選択している内容に応じて情報が即座に更新される、より魅力的なポータル体験が実現します

***

## 実用例

### マップを使った動的なアカウント詳細

Avonni Map を設定してアカウントの所在地を表示します。ユーザーが所在地を選択すると、関連するアカウントの詳細（例: 名前、説明、業界）が Avonni Text Block に自動的に表示され、データを直感的に確認できます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-189411e2d9a5169d4e792b0c36242d7d0b79568d%2FAvonni%20Components%204.2%20Jan%2031.webp?alt=media" alt=""><figcaption></figcaption></figure>

### 連携するデータテーブル

Avonni Data Table を設定してアカウントを一覧表示します。アカウントを選択すると、2 つ目の Data Table が更新され、関連する連絡先が表示されるため、大規模なデータセットでもシームレスに移動できます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-7af79a605fab92865b6a16afe29c165dcc11a1f0%2F2024-02-04_16-43-22%20(1).gif?alt=media" alt=""><figcaption></figcaption></figure>

***

## Reactive コンポーネントが重要な理由

Reactive コンポーネントにより、Experience Site は要素間で応答し、通信できるようになり、より動的で使いやすくなります。このインタラクティブ性により、訪問者は情報を効率的に見つけてアクセスできるようになり、より魅力的で生産的な体験につながります。

***

## **Reactive Avonni コンポーネントの設定**

これらの Reactive コンポーネントを、わかりやすい設定手順で Experience Site に組み込み、インタラクティブ性を高めましょう:

### **コンポーネントを「Reactive」にするものは何か?**

コンポーネントは、データを他のコンポーネントにリンクすることで Reactive になり、ユーザー操作に基づいて自動更新されるようになります。これは 2 つの簡単な手順で実現できます

### リアクティビティを有効にする手順

{% stepper %}
{% step %}

#### データコンポーネントに名前を付ける（componentApiName）

* プロパティパネルで各コンポーネントに一意のニックネームを割り当てます。たとえば、アカウントを一覧表示する Data Table に accountsDatatable という名前を付けます。
* *なぜこれが必要なのか?* このニックネームは、リアクティビティ用にコンポーネントを識別し、他のコンポーネントがそのデータを参照できるようにします
  {% endstep %}

{% step %}

#### 他のコンポーネントがどう反応するかを指定する

* ユーザーが別のコンポーネントとやり取りしたときに、どのコンポーネントを更新するかを指定します。ターゲットコンポーネントのプロパティで次の構文を使用します:text`{{componentApiName.selectedRecord.componentFieldApiName}}`
* **内訳:**
  * `componentApiName`: 割り当てたニックネーム（例: `accountsDatatable`).
  * `selectedRecord`: ユーザーが選択した行または項目。
  * `componentFieldApiName`: 表示する特定のフィールド（例: `名称`, `業界`).
* *なぜこれが必要なのか?* この構文は、選択したデータ（例: アカウントの `名称`）を別のコンポーネントにリンクし、自動更新をトリガーします
  {% endstep %}
  {% endstepper %}

***

## よくある問題のトラブルシューティング

<details>

<summary><strong>コンポーネントが更新されない</strong></summary>

各コンポーネントに一意の `componentApiName` と構文（`{{componentApiName.selectedRecord.componentFieldApiName}}`）がターゲットコンポーネントのプロパティに正しく入力されていることを確認してください。

</details>

<details>

<summary><strong>データが表示されない</strong></summary>

ソースコンポーネント（例: `accountsDatatable`）にデータがあり、かつ `componentFieldApiName` が利用可能なフィールド（例: `名称`).

</details>

<details>

<summary><strong>リアクティビティの遅延</strong></summary>

複雑なデータセットがないか確認し、クエリを簡素化するか、リアクティブリンクの数を減らしてパフォーマンスを改善します。

</details>

<details>

<summary><strong>問題が解決しない場合</strong></summary>

サポートチームまでお問い合わせください: <support@avonni.com> サポートを受けるには。

</details>

***

## **ガイド付きの例**

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="/experience-cloud/experience-cloud-ja/chtoriaru/reactive-components/linking-data-table-and-map-for-dynamic-locations.md"><strong>データテーブルとマップを連携して動的な所在地を表示する</strong></a></td><td>Experience Site で Avonni Data Table と Map を接続し、ユーザーが選択したアカウントに基づいて所在地を動的に表示する方法を学びます。</td><td><a href="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-fd7ba86f47c4069c8363cc00b7ebadee796a7124%2FCSV%20Parser%20from%20Figma.png?alt=media">CSV Parser from Figma.png</a></td></tr><tr><td><a href="/experience-cloud/experience-cloud-ja/chtoriaru/reactive-components/linked-data-tables.md"><strong>連携したデータテーブル</strong></a></td><td>アカウント用の Avonni Data Table を Contacts Table に連携し、選択したアカウントの連絡先のみを表示するよう Contacts Table を動的に更新する方法を学びます</td><td><a href="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-83b032625e9015b4172cbef2af6f514ac2fedcfa%2FAvonni%20Component%20Builder%20Illustrations%20(4).png?alt=media">Avonni Component Builder Illustrations (4).png</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/hajimeni/reactive-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.