UIロジックの作成

ワイヤーフレームにUIロジックを追加し、コンポーネントがアクションを実行したり、バックエンドシステムからの模擬データに反応したりできるようにすることで、ワイヤーフレームをインタラクティブなプロトタイプに変え、複雑なユーザー体験をシミュレートします。

コンポーネントの接続

UIコンポーネント間に接続を作成し、相互に通信できるようにします。例えば、マウスクリック時にボタンの外観をどのように変更すべきか、またマウスクリック時に発せられるシグナルに対してUIがどのようなアクションを実行すべきか、といった点を検討します。

プロパティエイリアスと状態の活用

UIコンポーネント間のプロパティをバインドすることで、コンポーネント間の接続を作成できます。これにより、親コンポーネントのプロパティ値が変更された際、値の変更を示すシグナルを発信することで、すべての子コンポーネントのプロパティ値を自動的に変更することができます。

あるコンポーネントのプロパティを別のコンポーネントから参照するには、別のプロパティへの参照を保持するプロパティエイリアスを作成します。 プロパティに対して新しい一意の記憶領域を割り当てる通常のプロパティ定義とは異なり、プロパティエイリアスは、新しく宣言されたプロパティ（エイリアシングプロパティと呼ばれる）を、既存のプロパティ（エイリアス対象プロパティ）への直接参照として接続します。 データ駆動型のコンテンツはすべて、関連するコンポーネントのパブリックプロパティとしてエクスポートする必要があります。たとえば、スピードメーターには、UI がバインドされる速度のプロパティが必要です。

プロパティの値が基本状態からどのように変化するかを記述する、さまざまなUI状態を宣言できます。状態は、UIロジックを整理する上で有用な手段となります。コンポーネントに遷移を関連付けることで、状態の変化に伴いプロパティがどのようにアニメーションするかを定義できます。

プロパティエイリアスと状態を使用してコンポーネントインスタンス間の差異を作成することで、コンポーネントを複製する代わりに再利用できるようになります。したがって、コンポーネントを完全に新しいコンポーネントタイプとして処理する必要がなくなります。これにより、読み込み時間やコンパイル時間が短縮されるだけでなく、最終的なアプリケーションのパッケージサイズも削減されます。

UIコントロールのカスタマイズ

プリセットのUIコントロールには、変更可能なデフォルトのプロパティと状態が用意されています。追加のプロパティが必要な場合は、コントロールのインスタンスをカスタムコンポーネントに変換し、新しいプロパティを指定することができます。

式の記述

UIに特定の操作を実行させるには、条件設定のためのJavaScript式を記述したり、数値を文字列に変換したりする必要がある場合があります。たとえば、ブール値のAND、NOT、OR演算子を使用してプロパティ値をバインドしたり、数値や数値範囲をマッピングしたりできます。さらに、2つのコンポーネントのプロパティ値を双方向に同期させることも可能です。

代表的なユースケース

次の表に、代表的なユースケースと詳細情報へのリンクをまとめました。