> ## 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.

> フローの選択、Actionの作成と設定、フローへのバインドを含め、Actionの書き方を学びます。

# 初めてのActionを書く

このガイドでは、<Tooltip tip="Auth0 Dashboard: サービスを設定するためのAuth0の主要製品。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>を使って、初めてのActionを作成し、デプロイする方法を順を追って説明します。読み終える頃には、すべてのActionsで使用する基本的な機能を理解し、プログラミングモデルにも慣れているはずです。ここで学ぶ内容は、目的やフローにかかわらず、あらゆるActionを作成するための基礎となります。

<div id="the-goal-notify-slack-on-user-login">
  ## 目標: ユーザーログイン時に Slack に通知する
</div>

ユーザーがログインしたときに Slack チャンネルにメッセージを送信する Action を作成します。このチュートリアルでは Post Login トリガー を使用しますが、ここで紹介する内容は、どの種類の トリガー でも役立ちます。

このタスクを実行するには、次の手順を行います。

* [Action を作成する](#create-an-action)
* [シークレットを追加する](#add-a-secret)
* [依存関係を追加する](#add-a-dependency)
* [下書きを保存する](#save-the-draft)
* [カスタムロジックを追加する](#add-custom-logic)
* [Action をテストする](#test-an-action)
* [Action をデプロイする](#deploy-the-action)
* [フローに Action を追加する](#attach-the-action-to-a-flow)
* [テナントログで Action の結果を確認する](#observe-actions-in-tenant-logs)

<div id="prerequisites">
  ## 前提条件
</div>

このActionはSlackチャンネルにメッセージを送信するため、[Slackワークスペース用のIncoming Webhookを作成する](https://api.slack.com/messaging/webhooks)必要があります。Slack Webhook URL を取得したら、このガイドの手順に進んでください。

<div id="create-an-action">
  ## Action を作成する
</div>

特定のフローで Action を動作させるには、Action を作成してからそのフローに追加する必要があります。

1. [Auth0 Dashboard > Actions > Library,](https://manage.auth0.com/#/actions/library) に移動し、**Create Action** > **Build from scratch** を選択します。
2. **Name** を入力し、Action を ログインフロー に追加するため、**Login / Post Login** トリガー を選択して、**Create** をクリックします。

Actions Code Editor が表示されます。

<Frame>
  <img src="https://mintcdn.com/translations/raZlN0BXDjNonwyb/docs/images/cdy7uua7fh8z/12Q8OEuDI39eWuWsrVVwN0/ff7dd385d33aee704e1cb603f43c679b/2025-02-28_13-27-14.png?fit=max&auto=format&n=raZlN0BXDjNonwyb&q=85&s=2297ddea8163f88caa55eff5da1451b1" alt="Actions Code Editor" width="902" height="507" data-path="docs/images/cdy7uua7fh8z/12Q8OEuDI39eWuWsrVVwN0/ff7dd385d33aee704e1cb603f43c679b/2025-02-28_13-27-14.png" />
</Frame>

<div id="create-an-action-from-a-template">
  ## テンプレートからActionを作成する
</div>

Actions のテンプレートギャラリーには、Action の作成を始める際に利用できるさまざまなスターターテンプレートが用意されています。テンプレートから Action を作成するには、次の手順に従います。

1. [Auth0 Dashboard > Actions > Library](https://manage.auth0.com/#/actions/library) に移動し、**Create Action** を選択します。
2. **Choose from template** を選択します。
3. Action の作成に使用するテンプレートを選択します。
4. テンプレート内のコードの読み取り専用プレビューが表示されます。続行するには、**Use this template** を選択します。
5. 名前を入力し、**Create** を選択します。

<div id="add-a-secret">
  ## シークレットを追加する
</div>

各 Action にはシークレット値を含めることができ、<Tooltip tip="アクセストークン: API へのアクセスに使用される、不透明な文字列または JWT 形式の Authorization 認証情報。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Access+Tokens">アクセストークン</Tooltip>や API キーなどの機密情報を保持するのに適しています。Slack の Webhook URL をシークレットとして保存しましょう。

1. コードエディターの左側のサイドバーにある鍵アイコンを選択します
2. **Add Secret** を選択します。
3. シークレットに `SLACK_WEBHOOK_URL` という名前を付けます。
4. Slack から提供された Webhook URL を貼り付け、**Create** を選択します。

これでシークレットが Action に追加され、`event.secrets` と入力するとコード補完で新しいシークレットを利用できるようになります。

<Frame>
  <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4FyFtKRSIYuigxE9U8TkEJ/9598b5909694631ca673f748abf2268a/Screen_Shot_2022-02-09_at_3.24.05_PM.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=c05b92ab3da7350c96d58075b67d0fc4" alt="Actions Code Editor - Secrets セクションにシークレットが追加されました。" width="1325" height="780" data-path="docs/images/cdy7uua7fh8z/4FyFtKRSIYuigxE9U8TkEJ/9598b5909694631ca673f748abf2268a/Screen_Shot_2022-02-09_at_3.24.05_PM.png" />
</Frame>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  シークレットは一度作成すると、その値が再度表示されることはありません。Auth0 はすべてのシークレットを暗号化し、安全に保存します。
</Callout>

<div id="add-a-dependency">
  ## 依存関係を追加する
</div>

Slack にメッセージを簡単に送信するために、[`@slack/webhook` `npm` パッケージ](https://www.npmjs.com/package/@slack/webhook)を使用します。[ネイティブアドオン](https://www.npmjs.com/package/node-gyp)に依存せずインストールできるものであれば、Action ではほぼすべての公開 `npm` パッケージを利用できます。

依存関係を追加するには、次の手順に従います。

1. サイドバーで Dependency アイコン (キューブのアイコン) を選択します。
2. **Name** に `@slack/webhook` と入力します。

   デフォルトでは、Action は依存関係を追加した時点での最新バージョンを使用します。
3. **Create** を選択すると、依存関係が Action に追加されます。

   <Frame>
     <img src="https://mintcdn.com/translations/mMSz-RNYLuOm2GmQ/docs/images/cdy7uua7fh8z/Jmzvgydo204pBLikzuDJy/1d9a614b4c92f27afbbdd2b2af3b3c0b/Screen_Shot_2022-02-23_at_11.28.41_AM.png?fit=max&auto=format&n=mMSz-RNYLuOm2GmQ&q=85&s=5b1c3a88cec8f529524d445f3b823452" alt="Actions Code Editor: 依存関係が追加されました。" width="1504" height="614" data-path="docs/images/cdy7uua7fh8z/Jmzvgydo204pBLikzuDJy/1d9a614b4c92f27afbbdd2b2af3b3c0b/Screen_Shot_2022-02-23_at_11.28.41_AM.png" />
   </Frame>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  この Action を保存すると、依存関係の最新バージョンが解決され、以後のパッケージ更新によって Action が壊れないよう、特定のバージョン番号に置き換えられます。
</Callout>

<div id="save-the-draft">
  ## 下書きを保存
</div>

**Save Draft** を選択します。Action は保存されますが、まだどのユーザーフローでも実行されません。Actions を使うと、Auth0 テナントのトラフィックに影響が及ぶ前に、Actions を作成、編集、テストできます。Action の動作に問題がなければ、後でその Action をデプロイして フロー に追加します。

<div id="add-custom-logic">
  ## カスタムロジックを追加
</div>

Action に Secret と依存関係を設定したので、次はコードを書いてみましょう。

すべての Action には、関連する トリガー に応じた読み取り専用のコンテキスト情報を含む `event` オブジェクトがあります。Editor で `event.` と入力し始めると、`event` で利用できるすべてのプロパティが表示されます。各 トリガー で利用できる情報について詳しくは、[Explore Flows and Triggers](/docs/ja-jp/customize/actions/explore-triggers) を参照してください。

では、Action を使って Slack に通知してみましょう。次のコードを Action に追加してください。

```javascript lines theme={null}
const { IncomingWebhook } = require('@slack/webhook');

exports.onExecutePostLogin = async (event, api) => {
    const url = event.secrets.SLACK_WEBHOOK_URL;
    const webhook = new IncomingWebhook(url);

    // 通知を送信する
    await webhook.send({ text: "Logging In..." });
};
```

**Save Draft** を選択して、Action を下書き保存します。

<div id="test-the-action">
  ## Action をテストする
</div>

実際のユーザートラフィックでこの Action をテナント内で実行する前に、想定どおりに動作することを確認するため、テストを行います。

1. サイドバーの Test (三角形) アイコンを選択します。Payload セクションには、Action の作成時に選択したトリガーに関連する、編集可能な JSON データが表示されます。

   <Frame>
     <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4MSu8EfpMLNJpcYtrwP7Jf/66480a0434c89eadb809012bca890037/Screen_Shot_2022-02-10_at_10.01.10_AM.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=268f5e08a17c3c3c3cfb96ee843f234d" alt="Actions Code Editor: Test Runner panel" width="378" height="644" data-path="docs/images/cdy7uua7fh8z/4MSu8EfpMLNJpcYtrwP7Jf/66480a0434c89eadb809012bca890037/Screen_Shot_2022-02-10_at_10.01.10_AM.png" />
   </Frame>
2. **Run** ボタンを選択すると、Slack チャンネルにメッセージが表示されます。

<div id="deploy-the-action">
  ## Actionをデプロイする
</div>

Actionが期待どおりに動作することを確認できたので、次はこれをデプロイします。

**Deploy** を選択します。Actionをデプロイすると、その時点のActionのスナップショットが作成され、**Action Version** として記録されます。

**Version History** を選択すると、Actionがバージョン1として記録されているはずです。

<Frame>
  <img src="https://mintcdn.com/translations/MV7tE-x71x8RWRES/docs/images/cdy7uua7fh8z/53sn70cXoxUHibc3Bmk7Og/193af512ac2b58f3d60ab36ca5499d90/Screen_Shot_2022-02-10_at_10.02.47_AM.png?fit=max&auto=format&n=MV7tE-x71x8RWRES&q=85&s=12536896fe948de77396c8fe71126359" alt="Actions: Version History" width="326" height="177" data-path="docs/images/cdy7uua7fh8z/53sn70cXoxUHibc3Bmk7Og/193af512ac2b58f3d60ab36ca5499d90/Screen_Shot_2022-02-10_at_10.02.47_AM.png" />
</Frame>

これで、Actionのバージョン1に影響を与えることなく、Actionを自由に更新して保存できます。Auth0が実行するのは現在デプロイ済みのActionのバージョンだけなので、Actionを再度デプロイするまでは、Auth0はバージョン1を実行します。

<div id="attach-the-action-to-a-flow">
  ## フロー に Action を追加する
</div>

新しい Action を設定し、テナントの実際のトラフィックの一部として実行されるようにする最後のステップは、その Action を フロー に追加することです。

1. 利用可能な フロー の一覧を表示するには、[Auth0 Dashboard > Actions > Flows](https://manage.auth0.com/#/actions/flows) に移動します。
2. [ログインフロー](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) を選択し、`my-slack-action` を フロー にドラッグします。

   <Frame>
     <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/6hU7sKWtGzSx9Z8dhsXbvp/0253fb4e9eac1133cc9626385622c54e/Login_Action_-_English.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=fd50d3f8faf41e106597bd9f48f6adac" alt="Actions Flows: Login Flow" width="842" height="836" data-path="docs/images/cdy7uua7fh8z/6hU7sKWtGzSx9Z8dhsXbvp/0253fb4e9eac1133cc9626385622c54e/Login_Action_-_English.png" />
   </Frame>
3. **Apply** を選択します。

これで、この Action はテナント内の実際のユーザートラフィックに対して実行されるようになります。より本格的なテスト環境が必要な場合は、[複数の Auth0 環境を設定する](/docs/ja-jp/get-started/auth0-overview/create-tenants/set-up-multiple-environments)ことを検討してください。

<div id="observe-actions-in-tenant-logs">
  ## テナントログで Actions を確認する
</div>

Action がログインフローの一部として実行されるようになったので、Auth0 は各 Action の実行情報をテナントログに記録します。これを確認するには、[Auth0 Dashboard > Monitoring > Logs](https://manage.auth0.com/#/logs) に移動し、**Successful Login** イベントを選択します。

そのフローの一部として実行された Actions の情報を含む **Action Details** ビューが表示されます。

<Frame>
  <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/61k82wmsXSb9M3wOExM4jH/51fae3a36a8ecddeec08bc45da468e2b/Action_logs_-_English.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=bbae31682ef23d5f086dd7df335cfedf" alt="テナントログ: Action Details ビュー" width="1079" height="1010" data-path="docs/images/cdy7uua7fh8z/61k82wmsXSb9M3wOExM4jH/51fae3a36a8ecddeec08bc45da468e2b/Action_logs_-_English.png" />
</Frame>

<div id="next-steps">
  ## 次のステップ
</div>

最初の Action を作成したら、[Flows と Triggers を確認する](/docs/ja-jp/customize/actions/explore-triggers)を参照して、Actions でよくあるタスクを実行する方法を学びましょう。