--- title: "Autify JSステップガイド | Autify Guide" slug: "javascript-steps" description: "AutifyでJSステップを利用する方法を学びましょう。シームレスな自動化テストを開始しましょう！" updated: 2024-10-23T03:50:59Z published: 2024-10-23T03:50:59Z canonical: "help.autify.com/javascript-steps" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.autify.com/llms.txt > Use this file to discover all available pages before exploring further. # JSステップ Autifyはノーコードで使えることが強みですが、コードを記述できないわけではありません！ Autifyの標準機能でも幅広いテストに対応できますが、より高度なテストを行いたい場合、JavaScriptを活用すると作成・実行できるテストの幅が広がります。 ## JSステップとは？ **JSステップ**とは、Autifyの「シナリオ」内でお客様ご自身で任意のJavaScriptを記述する機能です。この機能を使うことで、Autifyの標準機能でサポートしていない操作も実行できるようになります。 かなりパワフルな機能のため、以下具体的に解説いたします。 基本的な使い方についてのあと、**具体的なユースケース**を紹介しておりますので是非ご参照ください！ 当ドキュメントはJavaScriptやDOMについての解説を行うものではありません。 ページがリロードされるとJSステップが失敗します この失敗は、ページのリロードによって現在の実行コンテキストが破棄され、JSステップの実行コンテキストが失われるために発生します。 ## JSステップをシナリオに追加する方法 1. JSステップを追加したいシナリオ詳細画面を開きます。 2. JSステップを追加したいステップの間にカーソルを移動させます。 ![Screen Shot 2022-07-21 at 18.15.00.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202022-07-21%20at%2018.15.00.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) 3. **＋**ボタンをクリックし、**ステップを挿入** をホバーします。表示されるメニューから **JSステップ**を選んでください。 ![Screen Shot 2022-07-21 at 18.15.23.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202022-07-21%20at%2018.15.23.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) 4. テキストエディタにJavaScriptのコードを入力します。コードは関数で囲ってありますから、シンタックスを入れる必要はありません。 ![Screen Shot 2022-06-13 at 5.56.28 PM.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202022-06-13%20at%205.56.28%20PM.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) 5. 任意でステップに名前を付けたり、メモを記入したりできます。ステップの説明などにお役立てください。 ![Screen Shot 2022-06-13 at 6.07.15 PM.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202022-06-13%20at%206.07.15%20PM.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) 6. **保存**をクリックします。 ## 「JSステップ」で取得・生成した値を他のステップで使う 「JSステップ」で取得・生成した値は、`return`をすることで後続のステップで使用することができます。実際に`return`した値は、テスト結果上で確認することができます。 ![return-value-ja](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/return-value-ja.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) JSステップ内で`return`していない場合は、この値は`null`になります。 ![not-return-ja](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/not-return-ja.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) 後続のステップで使用することができるのは **文字列と数値** です。 ### 操作ステップやアサーションステップで使用する 1. シナリオ詳細画面で`return`された値を使用するステップをクリックします 2. 入力値のドロップダウンから、「他のステップから取得」を選び、どのJSステップがreturnした値を使用するか選びます ![js-step-text-to-asign.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/other-step-value-ja.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) ### JSステップの引数として使用する JSステップが`return`した値は、他のJSステップの引数として使用することができます。詳しくはこの後の**JSステップで引数を使う**で説明します。 ## JSステップで引数を使う 1. 引数を追加したい**JSステップ**をクリックします 2. `function`の括弧内の**＋**アイコンをクリックします ![js-step-adding-arguments.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/js-step-adding-arguments.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) 3. 引数名を入力し、**追加**をクリックします ![js-step-arg-name.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/set-arg-ja.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) 4. **引数の値**で、使用したい値の種類を選択します - **値を指定** では、文字列を直接入力できます - [テストメールアドレス](https://help.autify.com/docs/ja/email-test)では、作成済みのテストメールアドレスを選択できます - [データ](https://help.autify.com/docs/ja/creating-data)では、シナリオに設定されているデータのカラムを選択できます - **他のステップから取得**では、先行する**JSステップ**でreturnされた値や[動的な値](https://help.autify.com/docs/ja/dynamic-value-generation)を使用できます - [変数](https://help.autify.com/docs/ja/passing-variables-between-tests)では、インポート変数に設定されているキーを選択できます ![ja-js-argument-value.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/ja-js-argument-value.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) 引数に設定した値は文字列型になります 引数の値にUI上で数値を設定しても、コード内では文字列型になります。文字列型に変更されることで計算処理等が意図通りにならないことがあります。数値型で処理する必要がある場合は、コード内で`Number()`等を使って数値型に変換してから処理を開始するようにしましょう。 1. 一度追加した引数を削除したり名前を変更したりしたい場合は対象の引数をクリックします。 ![rename-arg.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/rename-arg.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) ## JavaScriptスニペット JSステップを効果的にご利用いただくには、JavaScriptやDOM構造についての知識が必要になりますが、よくお問い合わせのある使い方についてはそういった知識があまりない場合でもご活用いただけるように [JavaScriptスニペット（雛形）](https://autify-javascript-snippets.netlify.app/ja/)の提供を行っています。ぜひご活用ください。 ### JavaScriptスニペットの使い方 1. シナリオにJSステップを追加します 2. JavaScriptスニペットから使用したいスニペットを選択します ![Screen Shot 2022-06-21 at 5.39.07 PM.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202022-06-21%20at%205.39.07%20PM.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) 3. JSスニペットにカーソルを合わせ、スニペット右上の「コピー」アイコンをクリックします ![Screen Shot 2022-06-21 at 5.40.44 PM.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202022-06-21%20at%205.40.44%20PM.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) 4. スニペットをJSステップに貼り付け、必要に応じてコードを変更してください ![Screen Shot 2022-06-21 at 5.44.10 PM.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202022-06-21%20at%205.44.10%20PM.png?sv=2026-02-06&spr=https&st=2026-11-02T03%3A57%3A59Z&se=2026-11-02T04%3A57%3A59Z&sr=c&sp=r&sig=pfoELt%2BmDCmMkmgXXNnyZUGn2DvKR4nIB6QNqqONrtw%3D) ## JSステップのユースケース JSステップは以下のようなケースで役立ちます。 - APIの実行 - Cookieの設定・削除 - カスタムアサーション