> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Actions を使用してフォームをレンダリングする方法を説明します。

# Actions を使用してフォームをレンダリングする

フォームを作成したら、`api.prompt.render()` メソッドを使って [Actions](/ja/docs/customize/actions) でレンダリングできます。

```javascript lines theme={null}
// post-loginトリガーを使用した例

exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id');
}

exports.onContinuePostLogin = async (event, api) => {
  // フォーム完了後のロジックをここに追加
}
```

form\_id はフォームの ID に置き換えてください。ID は、フォームの URL (例:  `ap_pUMG...`) で確認するか、フォームエディターの **Render** タブから選択できます。
[Actions コードエディター](/ja/docs/customize/actions/write-your-first-action#create-an-action) では、フォームをいつどのようにレンダリングするかを決めるビジネスロジックを定義できます。

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {

  // ユーザーに company_name メタデータがない場合のみフォームをレンダリングする
  if (!event.user.user_metadata.company_name) {
    api.prompt.render(':form_id');
  }
}

exports.onContinuePostLogin = async (event, api) => {
  // フォーム完了後のロジックをここに追加する
}
```

これらのオブジェクトの詳細については、以下を参照してください。

* [Event Object](/ja/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-event-object): Event オブジェクトとそのプロパティについて確認できます。
* [API object](/ja/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object): API オブジェクトとそのメソッドについて確認できます。

<div id="populate-values-for-existing-fields-and-hidden-fields-client-side">
  ## 既存フィールドと非表示フィールドの値を設定する (クライアント側)
</div>

render メソッドの第 2 引数で `fields` プロパティを使用すると、既存フィールドと非表示フィールドの値を設定できます。

以下の例では、`Jane` という値が `first_name` フィールドに設定されます。

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id', {
    fields: {
      first_name: 'Jane',
    }
  });
}

exports.onContinuePostLogin = async (event, api) => {
  // フォーム完了後の処理をここに追加してください
}
```

<Warning>
  機密情報は設定しないでください。設定した値はブラウザー (クライアント側) に公開されます。
</Warning>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  第2引数で参照しているフィールド `ID` が、[nodes and components](/ja/docs/customize/forms/nodes-and-components) でクライアント側から利用可能であることを確認してください。そうでない場合、値は反映されません。
</Callout>

<div id="inject-custom-data-with-shared-variables-server-side">
  ## 共有変数を使用してカスタムデータを渡す (サーバーサイド)
</div>

render メソッドの第2引数で `vars` プロパティを使用すると、サーバーサイド変数を渡せます。これにより、機密情報をクライアントサイドに公開することなく渡せます。

以下の例では、値 `123456789` が変数 `external_user_id` に設定されます。

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id', {
    vars: {
      external_user_id: '123456789',
    }
  });
}

exports.onContinuePostLogin = async (event, api) => {
  // フォーム完了後の処理をここに追加してください
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  共有変数 `{{vars.*}}` には、データ型の制限はありません。

  共有変数 `{{vars.*}}` は、常に自動的にマスクされます。

  `{{fields.*}}` 変数に値を設定する場合と異なり、値を挿入する前に `{{vars.*}}` プロパティがフォーム内に存在している必要はありません。

  `{{vars.*}}` プロパティを使用すると、Forms と関連付けられた Flows で共有変数を参照できます。詳細については、[Variables](/ja/docs/customize/forms/variables) を参照してください。
</Callout>

<div id="fields-and-shared-variables-data-in-actions">
  ## Actions のフィールドデータと共有変数データ
</div>

フォームで収集したフィールドデータと共有変数データは、現在の Action の resume 関数で `event.prompt` から自動的に利用できます。

* `id` プロパティ。現在レンダリングしているプロンプトの ID が含まれます。
* `fields` オブジェクト。すべてのフィールドと非表示フィールドのデータが含まれます。
* `vars` オブジェクト。すべての共有変数のデータが含まれます。

<Accordion title="event.prompt オブジェクトの例">
  ```json lines theme={null}
  {
    "id": "ap_fuVuFiiQWN3mTEujWTy966",
    "fields": {
      "first_name": "Jane",
      "company_name": "Okta"
    },
    "vars": {
      "external_crm_uuid": "f8f32e6f-2329-49bd-bf21-fa8b0bea2652",
      "api_hostname": "api.example.com"
    }
  }
  ```
</Accordion>

以下の例では、`api.user.setUserMetadata` は、フォームから収集した `event.prompt.fields.company_name` プロパティの値を `user_metadata` の `company_name` 属性に設定します。

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id');
}

exports.onContinuePostLogin = async (event, api) => {
  api.user.setUserMetadata('company_name', event.prompt.fields.company_name);
}
```

<div id="restrictions-and-limitations">
  ## 制限事項
</div>

* 同じ Action 内で、ユーザーを[リダイレクト](/ja/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/redirect-with-actions)すると同時にフォームをレンダリングすることはできません。両方が必要な場合は、別々の Actions を使用することを検討してください。
* 1 つの Action でレンダリングできるフォームは 1 つだけです。複数のフォームをレンダリングする必要がある場合は、別々の Actions でレンダリングする必要があります。
* `fields` プロパティのサイズ上限は 24 KB です。
* `api.prompt.render()` メソッドは、次のトリガーで使用できます。

  * [post-login](/ja/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object)
  * [post-challenge](/ja/docs/customize/actions/explore-triggers/password-reset-triggers/post-challenge-trigger/post-challenge-api-object)