--- title: "Autify JavaScriptスニペット活用ガイド | Autify Guide" slug: "reusable-js-steps" description: "Autifyで再利用可能なJavaScriptステップ（スニペット）を使う方法を学びましょう。シームレスな自動化テストを開始しましょう！" updated: 2024-07-17T08:28:44Z published: 2024-07-17T08:28:44Z canonical: "help.autify.com/reusable-js-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ステップ（JavaScriptスニペット） 頻繁に使うJavaScriptのコードスニペットがある場合、Autifyに 「JavaScriptスニペット」を保存するとシナリオに挿入しやすくなります。 ### ワークスペースにJSスニペットを作成する **ワークスペース設定**を開くと、**JavaScriptスニペット**というセクションがあります。JavaScriptスニペットはすべてここに保存されます。スニペットを新規作成するには、「**追加**」をクリックしてください。 ![add-new-snippet.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/add-new-snippet.png?sv=2026-02-06&spr=https&st=2026-11-02T21%3A58%3A46Z&se=2026-11-02T22%3A58%3A46Z&sr=c&sp=r&sig=wzOwNlJay1GB6YuDGn25cpRujfX5H0y26YaSc%2Fk4Tjc%3D) JavaScriptスニペットエディタが表示されます。まず、これから作成するスニペットに名前を付けましょう。 ![js-snippet-editor.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/js-snippet-editor.png?sv=2026-02-06&spr=https&st=2026-11-02T21%3A58%3A46Z&se=2026-11-02T22%3A58%3A46Z&sr=c&sp=r&sig=wzOwNlJay1GB6YuDGn25cpRujfX5H0y26YaSc%2Fk4Tjc%3D) ここでは、後で再使用したいコードを入力します。コードは関数で囲ってありますから、エディタの中で関数を定義する必要はありませんが、必要があれば追加で関数を定義しても構いません。 ![js-snippets-editor-code-block.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/js-snippets-editor-code-block.png?sv=2026-02-06&spr=https&st=2026-11-02T21%3A58%3A46Z&se=2026-11-02T22%3A58%3A46Z&sr=c&sp=r&sig=wzOwNlJay1GB6YuDGn25cpRujfX5H0y26YaSc%2Fk4Tjc%3D) また、関数に引数を追加したい場合、括弧内の「**＋**」をクリックしてください。画面右側で引数の値を入力できます。引数を活用することで、よりダイナミックで柔軟なコードスニペットを作成できます。引数について詳しくは、Autify Universityの[JSステップ](/v1/docs/ja/javascript-steps)をご覧ください。 ご注意 一度保存した引数の名前の変更と削除は、既存のシナリオを壊す可能性があり許可されていません。 引数の名前を変更または削除したい場合は、新たにJavaScriptスニペットを作成する必要があります。 ![js-snippet-code-editor-args.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/js-snippet-code-editor-args.png?sv=2026-02-06&spr=https&st=2026-11-02T21%3A58%3A46Z&se=2026-11-02T22%3A58%3A46Z&sr=c&sp=r&sig=wzOwNlJay1GB6YuDGn25cpRujfX5H0y26YaSc%2Fk4Tjc%3D) 完了したら、画面下部の「**追加**」をクリックします。 ![js-snippet-editor-add.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/js-snippet-editor-add.png?sv=2026-02-06&spr=https&st=2026-11-02T21%3A58%3A46Z&se=2026-11-02T22%3A58%3A46Z&sr=c&sp=r&sig=wzOwNlJay1GB6YuDGn25cpRujfX5H0y26YaSc%2Fk4Tjc%3D) ### テストシナリオにJSスニペットを挿入する方法 保存したスニペットは、**シナリオ詳細画面**から任意のシナリオに追加できます。まず、スニペットを挿入する位置で、ステップ間の「**＋**」をクリックします。次に、「**スニペットからJSステップを挿入**」を選択します。挿入したいスニペットを選んだら完了です。 ![insert-js-snippet.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/insert-js-snippet.png?sv=2026-02-06&spr=https&st=2026-11-02T21%3A58%3A46Z&se=2026-11-02T22%3A58%3A46Z&sr=c&sp=r&sig=wzOwNlJay1GB6YuDGn25cpRujfX5H0y26YaSc%2Fk4Tjc%3D) 【重要】JSスニペットが特定の要素と作用する場合、ウェブページ上でその要素が利用可能になった時点にスニペットを追加してください。 スニペットを選択すると、テストシナリオにJSステップが挿入されます。他のJSステップと同様に、returnされた値を後続のステップで使用できるようになります。 ![Screen Shot 2022-05-13 at 4.35.03 PM.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202022-05-13%20at%204.35.03%20PM.png?sv=2026-02-06&spr=https&st=2026-11-02T21%3A58%3A46Z&se=2026-11-02T22%3A58%3A46Z&sr=c&sp=r&sig=wzOwNlJay1GB6YuDGn25cpRujfX5H0y26YaSc%2Fk4Tjc%3D) ### Autify JavaScriptスニペット Autify の JS ステップでよく利用される JavaScript スニペットは[Autify JavaScript Snippets](https://javascript-snippets.autify.com/ja/)で提供しています。 各スニペットはテンプレートになっていますので、コードを適宜編集してご利用ください。 またご意見やご要望などありましたら、Autifyのチャットウインドウよりご連絡をお願いいたします！