データバインディング

Amplify Studioは、UIコンポーネントをデータにバインドして動的コンポーネントを構築するためのビジュアルデータバインディング機能を提供します。UIコンポーネントエディタを使用して、フィールドを静的値にマップするか、バックエンドデータモデルにマップします。すべてのデータバインディングは生成されたコードに自動的に含まれます。

UIコンポーネントエディタ

UIコンポーネントエディタを使用すると、コンポーネント内の要素を実際のデータにバインドできます。

1. エレメントツリー

エレメントツリーはFigma内のコンポーネントの構成を表示します。Figma内の各レイヤーは特定のAmplify UIプリミティブにマップされます。たとえば、FigmaのフレームはAmplify UIライブラリの<Flex>コンポーネントにマップされます。レイヤーをクリックすると、ライブプレビュー内の要素がハイライトされます。

2. ライブコンポーネントプレビュー

ライブプレビューはReactコンポーネントの表現です！ブラウザの開発者ツールでコンポーネントを検査すると、コンポーネント内の各要素が実際のコードにマップされていることがわかります。コンポーネント内のいずれかの要素をクリックして、特定の子コンポーネントを選択します。これにより、エレメントツリー内のレイヤーがハイライトされ、そのコンポーネントのすべての関連する子プロパティが表示されます。

3. コンポーネントプロパティ

Reactと同様に、親コンポーネントにpropsを設定できます。Reactコンポーネントはpropsを使用して相互に通信します。すべての親コンポーネントはpropsを与えることで、子コンポーネントに情報を渡すことができます。Reactのpropsについて詳しくは、ドキュメントを参照してください。Amplify Studioはスカラー型（String、Number、Boolean）とデータモデルコンポーネント型をサポートしています。

4. 子プロパティ

ライブプレビュー内の任意の子要素をクリックして、子propの値を設定できます。静的値を設定するか、親コンポーネントからprop値を渡すことができます。子propsはUIプリミティブで利用可能なpropsにマップされます。たとえば、<Button>コンポーネントを選択すると、variationやsizeなどのpropsを設定でき、ライブプレビューに値が反映されるのを確認できます。

5. コンポーネントコントロール

コンポーネントで次のアクションを実行できます：

1. Figmaでコンポーネントを編集: これにより、Figmaファイルにディープリンクしてコンポーネントを編集できます。
2. プレビューデータをシャッフル: UIを静的データまたはデータモデルからのデータにバインドしたときに、シャッフルプレビューを使用してコンポーネントが異なるデータでどのようにレンダリングされるかを確認します。
3. コレクションを作成: コンポーネントからコレクションを作成します。詳細情報
4. コンポーネントコードを取得: このReactコンポーネントをアプリで使用します。

データモデルからのデータにUIをバインド

Amplify Studioを使用すると、UIコンポーネント内の要素をデータモデル型のコンポーネントプロパティで子要素に渡すことにより、データベースから実際のバックエンドデータにバインドできます。

データにバインドするには、データモデルをデプロイする必要があります。Studioは、DataStoreの有無を問わずAmplifyで作成されたGraphQL APIをサポートしています。

1. Amplify Studioで、UIビルダーコンポーネントに移動して、コンポーネントを選択します。
2. fooという名前のコンポーネントプロパティを追加します。型としてデータモデル（例：Home）を参照します。
3. UIコンポーネント内のimage子要素をクリックします。
4. 子プロパティのSet propを選択します。Propドロップダウンからsrcを選択し、値にhome.image_urlをリンクします。ライブプレビューがデータベースからの画像に更新されます。同じ手順を繰り返して、テキストフィールド、入力など、異なる子要素を続けます。

コレクションドキュメントで詳細情報を確認してください

UIを静的データにバインド

テキストラベルを静的値にバインドできます。次の2つの方法のいずれかを使用して、UI要素を静的値にバインドします。

コンポーネントプロパティのデフォルト値を子propsに渡す

次の例は、テキストラベルの値をコンポーネントのデフォルト値に設定する方法を示しています。

1. Amplify Studioで、UIビルダーコンポーネントに移動して、コンポーネントを選択します。
2. fooという名前のコンポーネントプロパティを追加します。型はStringで、デフォルト値はHello worldです。
3. UIコンポーネント内のテキスト子要素をクリックします。
4. 子プロパティのSet propを選択します。Propドロップダウンからlabelを選択し、値をfooにリンクします。ライブプレビューが「Hello world」を表示するように更新されます。

子propsを直接設定

利用可能なすべてのプロパティで子propの値を直接設定できます。次の例では、label propを「Explore」に、color propを「orange」に設定しています。

モディファイアを適用

モディファイアを使用すると、レンダリング子propの値にカスタムロジックを適用できます。

条件分岐

子propの値にカスタムロジックを条件付きで適用できます。次の例は、カスタムロジックに基づいて子propの値を条件付きで設定する方法を示しています。

連結

子propの値に連結を適用できます。次の例は、価格を表示する前に$記号を追加する方法を示しています。