翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# JavaScript を使用して App Studio で式を記述する
AWS App Studio では、JavaScript 式を使用して、アプリケーションの動作と外観を動的に制御できます。単一行の JavaScript 式は、二重中括弧、、およびオートメーション`{{ }}`、UI コンポーネント、データクエリなどのさまざまなコンテキストで使用できます。これらの式は実行時に評価され、計算の実行、データの操作、アプリケーションロジックの制御に使用できます。
App Studio は、Luxon、UUID、Lodash、および SDK 統合の 3 つの JavaScript オープンソースライブラリをネイティブにサポートし、アプリの設定内の JavaScript 構文と型チェックエラーを検出します。
**重要**
App Studio は、サードパーティーまたはカスタム JavaScript ライブラリの使用をサポートしていません。
## 基本構文
JavaScript 式には、変数、リテラル、演算子、関数呼び出しを含めることができます。式は、計算の実行や条件の評価によく使用されます。
以下の例を参照してください。
+ `{{ 2 + 3 }}` は 5 と評価されます。
+ `{{ "Hello, " + "World!" }}` は「Hello, World\$1」と評価されます。
+ `{{ Math.max(5, 10) }}` は 10 に評価されます。
+ `{{ Math.random() * 10 }}` は、[0～10) の乱数 (小数点以下) を返します。
## Interpolation
JavaScript を使用して、静的テキスト内の動的値を補間することもできます。これは、次の例のように、JavaScript 式を二重中括弧で囲むことで実現されます。
```
Hello {{ currentUser.firstName }}, welcome to App Studio!
```
この例では、 `currentUser.firstName`は現在のユーザーの名を取得する JavaScript 式で、挨拶メッセージに動的に挿入されます。
## 連結
次の例のように、JavaScript の `+`演算子を使用して文字列と変数を連結できます。
```
{{ currentRow.FirstName + " " + currentRow.LastName }}
```
この式は、 `currentRow.FirstName`と の値をその間のスペース`currentRow.LastName`と組み合わせ、現在の行のフルネームになります。たとえば、 `currentRow.FirstName`が `John`で、 `currentRow.LastName`が の場合`Doe`、式は に解決されます`John Doe`。
## 日付および時間
JavaScript には、日付と時刻を操作するためのさまざまな関数とオブジェクトが用意されています。例えば、次のようになります。
+ `{{ new Date().toLocaleDateString() }}`: ローカライズされた形式で現在の日付を返します。
+ `{{ DateTime.now().toISODate() }}`: Date コンポーネントで使用する現在の日付を YYYY-MM-DD 形式で返します。
### 日付と時刻の比較
、`=`、`>`、`<`、 などの演算子`<=`を使用して`>=`、日付または時刻の値を比較します。例えば、次のようになります。
+ `{{ui.timeInput.value > "10:00 AM"}}`: 時刻が午前 10 時より後かどうかを確認します。
+ `{{ui.timeInput.value <= "5:00 PM"}}`: 時刻が午後 5 時以前であるかどうかを確認します。
+ `{{ui.timeInput.value > DateTime.now().toISOTime()}}`: 時刻が現在の時刻より後かどうかを確認します。
+ `{{ui.dateInput.value > DateTime.now().toISODate()}}`: 日付が現在の日付より前かどうかを確認します。
+ `{{ DateTime.fromISO(ui.dateInput.value).diff(DateTime.now(), "days").days >= 5 }}`: 日付が現在の日付から 5 日以上経過しているかどうかを確認します。
## コードブロック
式に加えて、複数行の JavaScript コードブロックを記述することもできます。式とは異なり、コードブロックには中括弧は必要ありません。代わりに、JavaScript コードをコードブロックエディタ内で直接記述できます。
**注記**
式が評価され、その値が表示される間、コードブロックが実行され、出力 (存在する場合) が表示されます。
## グローバル変数と関数
App Studio は、JavaScript 式とコードブロックで使用できる特定のグローバル変数と関数へのアクセスを提供します。たとえば、 `currentUser`は、現在ログインしているユーザーを表すグローバル変数であり、 などのプロパティにアクセスしてユーザーのロール`currentUser.role`を取得できます。
## UI コンポーネント値を参照または更新する
コンポーネントとオートメーションアクションで式を使用して、UI コンポーネント値を参照および更新できます。コンポーネント値をプログラムで参照して更新することで、ユーザーの入力とデータの変更に対応する動的でインタラクティブなユーザーインターフェイスを作成できます。
### UI コンポーネント値を参照する
UI コンポーネントから値にアクセスすることで、動的な動作を実装することで、インタラクティブでデータ駆動型のアプリケーションを作成できます。
式の名前`ui`空間を使用して、同じページで UI コンポーネントの値とプロパティにアクセスできます。コンポーネントの名前を参照することで、その値を取得したり、その状態に基づいてオペレーションを実行したりできます。
**注記**
コンポーネントはそれぞれのページにスコープされているため、`ui`名前空間には現在のページにのみコンポーネントが表示されます。
App Studio アプリのコンポーネントを参照するための基本的な構文は、 です`{{ui.componentName}}`。
次のリストには、 `ui`名前空間を使用して UI コンポーネント値にアクセスする例が含まれています。
+ `{{ui.textInputName.value}}`: *textInputName* という名前のテキスト入力コンポーネントの値を表します。
+ `{{ui.formName.isValid}}`: *formName* という名前のフォームのすべてのフィールドが、指定した検証基準に基づいて有効かどうかを確認します。
+ `{{ui.tableName.currentRow.columnName}}`: *tableName* という名前のテーブルコンポーネントの現在の行にある特定の列の値を表します。
+ `{{ui.tableName.selectedRowData.fieldName}}`: *tableName* という名前のテーブルコンポーネントの選択した行から指定されたフィールドの値を表します。その後、 `ID` (`{{ui.tableName.selectedRowData.ID}}`) などのフィールド名を追加して、選択した行からそのフィールドの値を参照できます。
次のリストには、コンポーネント値を参照するより具体的な例が含まれています。
+ `{{ui.inputText1.value.trim().length > 0}}`: *inputText1* コンポーネントの値に空でない文字列があるかどうかを確認します。これは、ユーザー入力の検証や、入力テキストフィールドの値に基づいて他のコンポーネントの有効化/無効化に役立ちます。
+ `{{ui.multiSelect1.value.join(", ")}}`: *multiSelect1* という名前の複数選択コンポーネントの場合、この式は選択したオプション値の配列をカンマ区切りの文字列に変換します。これは、選択したオプションをユーザーフレンドリーな形式で表示したり、選択を別のコンポーネントやオートメーションに渡すのに役立ちます。
+ `{{ui.multiSelect1.value.includes("option1")}}`: この式は、値 *option1* が *multiSelect1* コンポーネントの選択したオプションの配列に含まれているかどうかを確認します。*option1* が選択されている場合は true を返し、それ以外の場合は false を返します。これは、条件付きでコンポーネントをレンダリングしたり、特定のオプション選択に基づいてアクションを実行したりするのに役立ちます。
+ `{{ui.s3Upload1.files.length > 0}}`: *s3Upload1*3Upload1 という名前の Amazon S3 ファイルアップロードコンポーネントの場合、この式は files 配列の長さをチェックして、ファイルがアップロードされたかどうかを確認します。ファイルがアップロードされたかどうかに基づいて、他のコンポーネントやアクションを有効または無効にするのに役立ちます。
+ `{{ui.s3Upload1.files.filter(file => file.type === "image/png").length}}`: この式は、*s3Upload1* コンポーネントにアップロードされたファイルのリストをフィルタリングして PNG イメージファイルのみを含め、それらのファイルの数を返します。これは、アップロードされたファイルの種類に関する情報を検証または表示するのに役立ちます。
### UI コンポーネント値の更新
コンポーネントの値を更新または操作するには、オートメーション`RunComponentAction`内で を使用します。以下は、 `RunComponentAction`アクションを使用して *myInput* という名前のテキスト入力コンポーネントの値を更新するために使用できる構文の例です。
```
RunComponentAction(ui.myInput, "setValue", "New Value")
```
この例では、`RunComponentAction`ステップは *myInput* コンポーネントの `setValue`アクションを呼び出し、新しい値 *New Value* を渡します。
## テーブルデータの使用
テーブルデータと値にアクセスして、オペレーションを実行できます。次の式を使用して、テーブルデータにアクセスできます。
+ `currentRow`: テーブル内の現在の行からテーブルデータにアクセスするために使用します。たとえば、テーブルアクションの名前の設定、行からアクションから開始されたオートメーションへの値の送信、テーブル内の既存の列の値を使用した新しい列の作成などです。
+ `ui.tableName.selectedRow` と `ui.tableName.selectedRowData` はどちらも、ページの他のコンポーネントからテーブルデータにアクセスするために使用されます。例えば、選択した行に基づいてテーブルの外部にボタンの名前を設定するとします。返される値は同じですが、 `selectedRow`と の違い`selectedRowData`は次のとおりです。
+ `selectedRow`: この名前空間には、各フィールドの列ヘッダーに表示される名前が含まれます。テーブル内の表示可能な列から値を参照`selectedRow`する場合は、 を使用する必要があります。たとえば、エンティティのフィールドとして存在しないカスタム列または計算列がテーブルにある場合です。
+ `selectedRowData`: この名前空間には、テーブルのソースとして使用されるエンティティのフィールドが含まれます。`selectedRowData` を使用して、テーブルに表示されないエンティティの値を参照する必要がありますが、アプリの他のコンポーネントやオートメーションに役立ちます。
次のリストには、式内のテーブルデータにアクセスする例が含まれています。
+ `{{ui.tableName.selectedRow.columnNameWithNoSpace}}`: テーブル内の選択した行から *columnNameWithNoSpace* 列の値を返します。
+ `{{ui.tableName.selectedRow.['Column Name With Space']}}`: テーブル内の選択した行の*列名とスペース*の列の値を返します。
+ `{{ui.tableName.selectedRowData.fieldName}}`: テーブル内の選択した行から *fieldName* エンティティフィールドの値を返します。
+ `{{ui.tableName.selectedRows[0].columnMappingName}}`: 同じページの他のコンポーネントまたは式から選択した行の列名を参照します。
+ `{{currentRow.firstName + ' ' + currentRow.lastNamecolumnMapping}}`: 複数の列の値を連結して、テーブルに新しい列を作成します。
+ `{{ { "Blocked": "🔴", "Delayed": "🟡", "On track": "🟢" }[currentRow.statuscolumnMapping] + " " + currentRow.statuscolumnMapping}}`: 保存されたステータス値に基づいて、テーブル内のフィールドの表示値をカスタマイズします。
+ `{{currentRow.colName}}`、`{{currentRow["First Name"]}}`、`{{currentRow}}`、または `{{ui.tableName.selectedRows[0]}}`: 参照された行のコンテキストを行アクションに渡します。
## オートメーションへのアクセス
オートメーションを使用して、App Studio でサーバー側のロジックとオペレーションを実行できます。自動化アクション内では、式を使用してデータを処理し、動的値を生成し、以前のアクションの結果を組み込むことができます。
### オートメーションパラメータへのアクセス
UI コンポーネントやその他のオートメーションからオートメーションに動的値を渡すことができるため、再利用可能で柔軟性があります。これは、次のように `params`名前空間のオートメーションパラメータを使用して行われます。
`{{params.parameterName}}`: UI コンポーネントまたは他のソースからオートメーションに渡される値を参照します。たとえば、 は *ID* という名前のパラメータを参照`{{params.ID}}`します。
#### オートメーションパラメータの操作
JavaScript を使用してオートメーションパラメータを操作できます。以下の例を参照してください。
+ `{{params.firstName}} {{params.lastName}}`: パラメータとして渡された値を連結します。
+ `{{params.numberParam1 + params.numberParam2}}`: 2 つの数値パラメータを追加します。
+ `{{params.valueProvided?.length > 0 ? params.valueProvided : 'Default'}}`: パラメータが null または未定義ではなく、長さがゼロでないかどうかを確認します。true の場合は、指定された値を使用します。それ以外の場合は、デフォルト値を設定します。
+ `{{params.rootCause || "No root cause provided"}}`: `params.rootCause`パラメータが false (null、undefined、または空の文字列) の場合は、指定されたデフォルト値を使用します。
+ `{{Math.min(params.numberOfProducts, 100)}}`: パラメータの値を最大値 (この場合は `100`) に制限します。
+ `{{ DateTime.fromISO(params.startDate).plus({ days: 7 }).toISO() }}`: `params.startDate`パラメータが の場合`"2023-06-15T10:30:00.000Z"`、この式は開始日の 1 週間後の日付`"2023-06-22T10:30:00.000Z"`である に評価されます。
### 前のアクションからのオートメーション結果へのアクセス
自動化により、アプリケーションはデータベースのクエリ、APIs とのやり取り、データ変換の実行など、サーバー側のロジックとオペレーションを実行できます。`results` 名前空間は、同じオートメーション内の以前のアクションによって返された出力とデータへのアクセスを提供します。自動化結果へのアクセスに関する以下の点に注意してください。
1. 以前のオートメーションステップの結果には、同じオートメーション内でのみアクセスできます。
1. *action1* と *action2* という名前のアクションがその順序で存在する場合、*action1* は結果を参照できず、*action2* は にのみアクセスできます`results.action1`。
1. これはクライアント側のアクションでも機能します。たとえば、 `InvokeAutomation`アクションを使用してオートメーションをトリガーするボタンがある場合です。その後、オートメーションによってファイルが PDF であることが示された場合`results.myInvokeAutomation1.fileType === "pdf"`、PDF ビューワーのあるページに移動するなどの`Run If`条件を含むナビゲーションステップを使用できます。
次のリストには、 `results`名前空間を使用して前のアクションの自動化結果にアクセスするための構文が含まれています。
+ `{{results.stepName.data}}`: *stepName* という名前のオートメーションステップからデータ配列を取得します。
+ `{{results.stepName.output}}`: *stepName* という名前のオートメーションステップの出力を取得します。
自動化ステップの結果にアクセスする方法は、アクションのタイプと返されるデータによって異なります。異なるアクションは、異なるプロパティまたはデータ構造を返す場合があります。以下は一般的な例です。
+ データアクションの場合、 を使用して返されたデータ配列にアクセスできます`results.stepName.data`。
+ API コールアクションの場合、 を使用してレスポンス本文にアクセスできます`results.stepName.body`。
+ Amazon S3 アクションの場合、 を使用してファイルコンテンツにアクセスできます`results.stepName.Body.transformToWebStream()`。
返されるデータの形状と`results`、名前空間内でデータにアクセスする方法については、使用している特定のアクションタイプのドキュメントを参照してください。次のリストには、いくつかの例が含まれています。
+ `{{results.getDataStep.data.filter(row => row.status === "pending").length}}`: *getDataStep* がデータ行の配列を返す`Invoke Data Action`オートメーションアクションであると仮定すると、この式はデータ配列をフィルタリングして、ステータスフィールドが と等しい行のみを含め`pending`、フィルタリングされた配列の長さ (カウント) を返します。これは、特定の条件に基づいてデータをクエリまたは処理する場合に便利です。
+ `{{params.email.split("@")[0]}}`: `params.email`パラメータに E メールアドレスが含まれている場合、この式は @ 記号で文字列を分割し、@ 記号の前に部分を返します。これにより、E メールアドレスのユーザー名部分が効果的に抽出されます。
+ `{{new Date(params.timestamp * 1000)}}`: この式は Unix タイムスタンプパラメータ (`params.timestamp`) を受け取り、JavaScript Date オブジェクトに変換します。タイムスタンプは秒単位であることを前提としているため、1000 を掛けてミリ秒に変換します。これはコン`Date`ストラクタが想定する形式です。これは、オートメーションで日付と時刻の値を操作するのに役立ちます。
+ `{{results.stepName.Body}}`: *stepName* という名前の`Amazon S3 GetObject`オートメーションアクションの場合、この式はファイルコンテンツを取得し、取得されたファイルを表示するために **Image** や **PDF Viewer** などの UI コンポーネントで使用できます。この式は、 コンポーネントで使用するオートメーションの Automation **出力**で設定する必要があることに注意してください。