Selectコマンド

Selectコマンド

Selectを使用するには、APL 1.3以降が必要です。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。

コマンドとデータの配列から1つのコマンドを選択します。

プロパティ

Selectコマンドには、共通のコマンドプロパティに加えて、以下の表に示すプロパティがあります。typeプロパティはSelectに設定します。

コマンドを実行するために値が必要なプロパティの場合、以下の表の「デフォルト」列に「必須」と表示されています。それ以外の場合はデフォルト値が表示されますが、デフォルト値がないこともあります。

プロパティ 型 デフォルト 説明
commands コマンドの配列 必須 順番に並んだ選択できるコマンドのリストです。
data 配列 [] コマンドに対してマップするデータのリストです。
otherwise コマンドの配列 [] commands配列からコマンドが選択されていない場合に実行するコマンドの配列です。

data配列が空の場合、Selectコマンドはcommands配列でwhenがtrueと評価された最初のコマンドを実行します。

commands

コマンドの配列です。trueのwhen句を持つ配列の最初のコマンドが実行されます。

data

反復処理するデータの配列です。反復処理の間、データバインディングコンテキストは次のプロパティで拡張されます。

名前 説明
data データ配列のプロパティから割り当てられたデータです。
index 現在のデータ項目の0から始まるインデックスです。
length データ配列内のデータ項目の合計数です。

これらのプロパティは、data配列プロパティに1つ以上の項目が含まれている場合に設定されます。

otherwise

otherwiseコマンドは、commandsプロパティ内のいずれのコマンドも実行されない場合に実行されます。otherwiseコマンドでは、dataプロパティにアクセスできません。次に例を示します。

{
  "type": "Select",
  "commands": {
    "when": "${data.breed == breed}",
    "type": "SetValue",
    "property": "text",
    "componentId": "${textIdToUpdate}",
    "value": "飼い犬は${data.description}です"
  },
  "otherwise": {
    "type": "SetValue",
    "property": "text",
    "componentId": "${textIdToUpdate}",
    "value": "飼い犬の犬種を分類できません"
  },
  "data": "${dogBreedData}"
}

dogBreedData配列の内容は以下のとおりです。

{
  "dogBreedData": [
    {
      "breed": "アーフェンピンシャー",
      "description": "忠実で好奇心があり、面白い"
    },
    {
      "breed": "バセットハウンド",
      "description": "垂れ耳で可愛らしい"
    },
    {
      "breed": "ビーグル",
      "description": "楽天的で陽気"
    }
  ]
}

上記の例では、「雑種」のbreedを渡すとotherwiseに割り当てられ、指定されたTextコンポーネントのテキストが「飼い犬の犬種を分類できません」に更新されます。

otherwiseプロパティは、data配列のいずれも一致しない場合のフォールバック動作を提供します。

Selectコマンドの例

dataプロパティを使用しないSelectコマンド

次の例では、ageが7であると仮定します。コマンドは、3番目のコマンドに到達するまでcommands配列を反復処理します。このコマンドのwhenステートメントがtrueと評価されるので、SelectはSetValueコマンドを実行して、指定されたtextプロパティの値を「子ども」に更新します。

{
  "type": "Select",
  "commands": [
    {
      "when": "${age < 2}",
      "type": "SetValue",
      "property": "text",
      "value": "乳児",
      "componentId": "${textIdToUpdate}"
    },
    {
      "when": "${age < 5}",
      "type": "SetValue",
      "property": "text",
      "value": "幼児",
      "componentId": "${textIdToUpdate}"
    },
    {
      "when": "${age < 13}",
      "type": "SetValue",
      "property": "text",
      "value": "子ども",
      "componentId": "${textIdToUpdate}"
    },
    {
      "when": "${age < 18}",
      "type": "SetValue",
      "property": "text",
      "value": "ティーンエイジャー",
      "componentId": "${textIdToUpdate}"
    },
    {
      "type": "SetValue",
      "property": "text",
      "value": "大人",
      "componentId": "${textIdToUpdate}"
    }
  ]
}

data配列を使用したSelectコマンド

data配列を指定すると、Selectコマンドはdata配列の項目ごとに、commands配列内の各コマンドのwhen句がtrueになるかどうかを1つずつ確認します。データバインディングコンテキストは、dataプロパティ、indexプロパティ、lengthプロパティをバインドすることで拡張されます。Selectコマンドは、1つのコマンドを実行すると終了し、data配列に対する反復処理は継続しません。

次の例では、ageが17であると仮定します。このコマンドは、data配列を反復処理します。コマンドのwhenステートメントは、4番目の項目（17 < 18）で指定されるデータについてtrueと評価されるため、Selectはデータ配列の反復処理を停止して、SetValueコマンドを実行します。これにより、指定されたtextプロパティが「カテゴリーはティーンエイジャーです」に更新されます。

{
  "type": "Select",
  "commands": {
    "when": "${!data.until || age < data.until}",
    "type": "SetValue",
    "property": "text",
    "value": "カテゴリーは${data.category}です",
    "componentId": "${textIdToUpdate}"
  },
  "data": [
    {
      "until": 2,
      "category": "乳児"
    },
    {
      "until": 5,
      "category": "幼児"
    },
    {
      "until": 13,
      "category": "子ども"
    },
    {
      "until": 18,
      "category": "ティーンエイジャー"
    },
    {
      "category": "大人"
    }
  ]
}

複数のcommandsをdata配列と組み合わせることができます。Selectは、引き続きcommands配列の1つのコマンドのみを実行します。次に例を示します。

{
  "type": "Select",
  "commands": [
    {
      "when": "${searchCategory == data.category && data.rating >= 8.0}",
      "type": "SetValue",
      "property": "text",
      "componentId": "${textIdToUpdate}",
      "value": "カテゴリーにぴったりの映画はこちら：<em>${data.title}</em>"
    },
    {
      "when": "${searchCategory == data.category}",
      "type": "SetValue",
      "property": "text",
      "componentId": "${textIdToUpdate}",
      "value": "カテゴリーに合う映画はこちら：<em>${data.title}</em>"
    }
  ],
  "data": "${movieData}"
}

この例では、movieDataは、評価が最も高い映画が最初に来るようにカテゴリーと評価で並び替えられた映画の配列にバインドされています。

{
  "movieData": [
    {"title":"アバター","category":"アドベンチャー","rating":7.8},
    {"title":"アラジン","category":"アドベンチャー","rating":7.1},
    {"title":"リメンバー・ミー","category":"アニメーション","rating":8.4},
    {"title":"トイ・ストーリー4","category":"アニメーション","rating":8},
    {"title":"ライオン・キング","category":"アニメーション","rating":7}
  ]
}

SearchCategoryが「アニメーション」の場合、Selectはdata内の3番目の項目に達するまで反復処理します。この項目は、最初のwhenステートメントの両方の条件に一致します。ここで最初のコマンドが実行され、movieResultTextComponentコンポーネントのtextプロパティが「カテゴリーにぴったりの映画はこちら： リメンバー・ミー」に更新されます。

SearchCategoryが「アドベンチャー」の場合、Selectはdata内の最初の項目を選択します。これは、この項目が2番目のwhenステートメントの条件に一致するためです。ここで2番目のコマンドが実行され、movieResultTextComponentのtextプロパティが「カテゴリーに合う映画はこちら： アバター」に更新されます。

このページは役に立ちましたか？

最終更新日: 2025 年 12 月 04 日