> 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/chtoriaru/reactive-components/guide-to-implementing.md).
# 実装ガイド
## **Avonniコンポーネントにリアクティビティを実装するためのガイド**
データコンポーネントにリアクティブな機能を設定する方法を解説したこのガイドで、Avonniコンポーネントを動的でインタラクティブな体験へと変えましょう。このチュートリアルでは、コンポーネントがデータを表示し、ユーザー操作にリアルタイムで反応するようにする手順を順を追って説明します。
{% hint style="info" %}
リアクティブ対応のデータ体験コンポーネントは次のとおりです： [データテーブル](/experience-cloud/experience-cloud-ja/experience-components/ax-data-table.md), [リスト](/experience-cloud/experience-cloud-ja/experience-components/ax-list.md), [マップ](/experience-cloud/experience-cloud-ja/experience-components/ax-map.md), [タイムライン](/experience-cloud/experience-cloud-ja/experience-components/ax-timeline.md) そして Avonni テキストブロックです。
{% endhint %}
### ステップ 1: データコンポーネントに API 名を割り当てる
まず、各データコンポーネントに API 名として知られる一意の識別子を付けます。この名前は参照点として機能し、ページ内のさまざまな部分が相互に通信できるようにします。
* **例**:
* データテーブルコンポーネントを使用している場合、次のような名前を付けることができます `accountsDatatable`.
### ステップ 2: 対象コンポーネントにリアクティブ式を設定する
次に、インタラクティブなデータをどこに表示したいかを決めます。これは、テキストブロック、別のデータテーブル、またはデータを表示する任意のコンポーネント内にできます。ここでは、リアクティブ式を使って、どのデータをいつ表示するかをコンポーネントに指示します。
* **リアクティブ式の形式**：次の形式を使用します `{{componentApiName.selectedRecord.componentFieldApiName}}` でコンポーネントを連携します。
* `componentApiName`：ここにはデータコンポーネントの API 名を入れます（たとえば、 `accountsDatatable` 上で付けた名前）。
* `componentFieldApiName`：これは、表示したいレコード内の特定の項目を指します（たとえば、 `名前` または `業界`).
* **例**:
* あなたのから選択したレコードの「Name」項目を表示するには、 `accountsDatatable`、次を使用します `{{accountsDatatable.selectedRecord.Name}}`.
* 同じ選択から「Industry」項目を表示するには、次を使用します `{{accountsDatatable.selectedRecord.Industry}}`.
### 実用例：
1. **アカウントの可視化のためのインタラクティブマップ**:
* たとえば、次のようにタグ付けされたインタラクティブマップがあるとします `accountMap`。ユーザーが場所を選択したときは、次のような式を使ってテキストブロックにアカウント名を表示できます `{{accountMap.selectedRecord.Name}}`。これにより、選択されたアカウント名がユーザー操作に応じて動的に表示されます。
2. **アカウントと連絡先の同期されたデータテーブル**:
* アカウントを表示するテーブル（`accountsDatatable`）`contactsDatatable`).
* 設定できます `contactsDatatable` の選択に応答するように `accountsDatatable`。たとえば、選択したアカウントに関連付けられた連絡先名を表示するには、次を使用します `{{accountsTable.selectedRecord.Id}}`.
これらの手順により、静的なコンポーネントが豊かで応答性の高い体験へと変わり、Web アプリケーションがより直感的で使いやすくなります。リアクティブなデータの力は、サイト上のあらゆる操作をつながりのある、目的のあるものとして感じさせる能力にあります。
楽しく構築しましょう！
---
# 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/chtoriaru/reactive-components/guide-to-implementing.md?ask=&goal=
```
`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.