---
title: "外部ソースからコンポーネントへのデータマッピング"
slug: "map-data-from-an-external-source-to-a-component"
abstract: "要素の属性を外部データソースのプロパティとマッピングします。"
---
# 外部ソースからコンポーネントへのデータマッピング

外部ソースからコンポーネントへのデータをマッピングするには:

1.  コンポーネントに要素を追加するか、既存の要素をクリックします。
    
2.  右側のペインの **「コンテンツ** 」セクションで、選択した要素の設定したい属性をクリックします。例えば、*Image*要素の場合、マッピングされたデータで設定可能な属性は*Image source*、*Caption*、*画像代替テキスト*、または*Link*です。
    
3.  データ**収集**ダイアログを開くには**「マッピング」**をクリックしてください。
    
4.  **データ収集**ダイアログボックスの**ソース**ステップで、ドロップダウンリストから該当するデータソースを選択します。
    
    > !注もしこのコンポーネントのデータソースを以前に選択しているなら、ダイアログボックスが表示されたときに自動的に選択されます。別のソースを選択する場合は、ソースアイコンまたは右ペイン下部の戻るボタンをクリックしてください。
    
5.  **データ収集**ダイアログボックスの**パス**ステップでは、データツリーに属性の値として使える該当するプロパティが表示されます。属性の適切なプロパティをクリックします。
    
    > !注エキスパートユーザーは手動でJSONPathを提供できます。エキスパートモードをクリックして、選択したプロパティによって生成される基礎となるJSONPathクエリを表示し、マッピングしたいオブジェクトの[JSONPath](https://www.npmjs.com/package/jsonpath-plus)を指定します。
    
6.  データソースに同じオブジェクトの複数のレコードがあり、データ**収集**\>**データスコープ**が**「マッピング**」に設定されている場合、ダイアログには**「アイテム**」と呼ばれる第三のステップが含まれます。
    
    要素のリピーターを設定する際に、配列のどの項目を表示するかを制限または指定できます:
    
    -   「 **すべて** 」をクリックすると、データソースコレクション内のすべての項目でこの要素を繰り返します。
    -   コレクションの最初のアイテムにのみ要素を繰り返すには **「制限** 」をクリックしてください。
    -   「 **指定** 」をクリックすると、リスト内の位置に基づいてコレクション内で繰り返すアイテムを指定します。
    
    これを行った後、選択したデータソースに基づいてコンポーネントのキャンバスで繰り返しの様子をプレビューできます。
    
7.  **完了**をクリックします。