SetValueコマンド
コンポーネントのプロパティまたはバインディングの値を変更します。各コンポーネントには一連の動的なプロパティが定義されており、SetValueを使用して変更できます。コンポーネントには、SetValueコマンドで変更できる名前付きバインディングを含めることもできます。
プロパティ
SetValueコマンドには、共通のコマンドプロパティに加えて、以下の表に示すプロパティがあります。typeプロパティはSetValueに設定します。
コマンドを実行するために値が必要なプロパティの場合、以下の表の「デフォルト」列に「必須」と表示されています。それ以外の場合はデフォルト値が表示されますが、デフォルト値がないこともあります。
| プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|
| componentId | セレクター | :source |
新しい値で更新するコンポーネントです。 |
| property | 文字列 | 必須 | 設定するプロパティの名前です。 |
| value | 文字列 | 必須 | プロパティに設定する値です。 |
次の例では、ジョークのオチが表示されるよう値が設定されています（opacityの値が1であるため、コンポーネントが完全に表示されます）。
{
"type": "SetValue",
"componentId": "jokePunchline",
"property": "opacity",
"value": 1
}
SetValueコマンドは遅延なく、高速モードで実行されます。
componentId
新しい値で更新するコンポーネントを識別するセレクターです。指定しない場合は、デフォルトで:sourceになります。:sourceセレクターは、SetValueコマンドを発行したコンポーネントをターゲットにします。
property
変更されるプロパティの名前です。これは、組み込みのコンポーネントプロパティでも、コンポーネントのbindプロパティで定義されたバインディングでも構いません。コンポーネントプロパティの場合、プロパティは動的である必要があります。コンポーネントプロパティが動的かどうかを判断するには、そのコンポーネントのプロパティの表を参照してください。たとえば、Textコンポーネントの動的プロパティを確認するには、Textのプロパティの表を参照してください。
SetValueコマンドは、値を更新するときに次のルールを使用します。
- 指定された名前の動的プロパティがコンポーネントにある場合、コマンドはそのプロパティを新しい値で更新します。
- 該当する動的プロパティがなく、指定された名前を持つbindプロパティがコンポーネントにある場合、コマンドはそのbindプロパティを新しい値で更新します。
- バインドされているプロパティの値が変わると、そのプロパティに依存しているコンポーネントの動的なプロパティはすべて更新されます。
以下は、バインドされた値を更新する方法の例です。シミュレーターのテキストをクリックするたびに、数字が増えていくことを確認できます。ページを更新するか、ビューポートのプロファイルを変更すると、カウンターがリセットされます。
value
指定されたpropertyに割り当てる新しい値です。valueはコマンドの実行時に評価されます。そのため、既存のコンポーネントのプロパティを活用できます。次の例では、SetValueコマンドがターゲットコンポーネントのopacityを現在の値の50%に設定します。
{
"type": "SetValue"
"property": "opacity",
"value": "${event.target.opacity * 0.5}"
}
関連トピック
最終更新日: 2025 年 12 月 12 日