メインコンテンツへスキップ

TypeScriptコードを実行コマンド

  • 更新

本機能は以下のプランをご契約のユーザに提供しています 。

  • エンタープライズプラン
  • 新スタンダードプラン2025 (参考)

目次

 

概要

「TypeScriptコードを実行」コマンドは、テストケース内で任意のJavaScriptまたはTypeScriptコードを実行し、結果を変数に保存するコマンドです。

下記のようなケースに利用することができます。

  • ランダムな値の生成
  • 計算や文字列操作
  • 日付や時刻の計算、整形

 

使い方

MagicPod Autopilotを使用すると「TypeScriptコードを実行」コマンドを簡単に設定することができます。

詳細はこちらを参照してください。

 

ここでは、手動でステップを作成する方法を説明します。

1. 「TypeScriptコードを実行」コマンドを追加します

2. 「編集」ボタンをクリックし、TypeScript コード編集画面を開きます

3. JavaScriptまたはTypeScriptコードの記述と、関数の入力・出力値の設定を行います

コードエディタには、空の magicpodCustomStep 関数が作成されています。この関数内に、必要な処理を記述してください。

⚠️関数名magicpodCustomStepは変更せずに使用してください。なお、別の関数を定義し、magicpodCustomStep 関数の中で呼び出すことは可能です。

function magicpodCustomStep(args: Args): Output {
  return [];
}

編集画面の「入力」エリアでは、magicpodCustomStep関数の入力値 (args 変数) を設定できます。

上記のように設定した場合、コード内でargs.nameやargs.emailとして使用することができます。

⚠️入力値は文字列として扱われます。数値に変換したい場合、Number 関数を使用してください。

例：Number(args.number)

 

「出力」エリアでは、magicpodCustomStep 関数の出力値を保存する変数を設定します。

 

設定例

ここでは、具体的な設定例をご紹介します。なお、説明のためシンプルな例を使用していますが、このような簡単な計算には「四則演算」コマンドが便利です。

1. a+bの合計を出力する

最も簡単な例として、入力値 a, b の合計を出力するステップを作成します。

 

入力値 (args 変数) を編集画面から設定します。

args.a, args.b の値を設定

 

上記で設定した入力値を使い、コードを記述します。

function magicpodCustomStep(args: Args): Output {
  const sum = Number(args.a) + Number(args.b);
  return [];
}

args.a, args.b の和を計算するコード

⚠️入力値 (a, b) は文字列です。数値に変換する際は Number 関数をご利用ください。

同様に、編集画面から関数の出力値を設定します。

出力を「合計」変数に保存する

 

合計を返却するコードに更新します。

function magicpodCustomStep(args: Args): Output {
  const sum = Number(args.a) + Number(args.b);
  return [sum];
}

return [sum]に更新

  • 出力値は配列です。
  • 配列の要素は数値 (number), 文字列 (string) または 真偽値 (boolean) 型の変数です。

 

2. x÷100の商と余りを出力する

2 つ目の例として、 ${変数} を入力に取り、複数の値を返却するステップを作成します。

x: 1234 を入力として、商: 12, 余り: 34 を取得

 

編集画面から入力・出力を設定

 

コードは以下の通りとなります。

function magicpodCustomStep(args: Args): Output {
  const x = Number(args.x);
  const q = Math.floor(x / 100);
  const r = x % 100;
  return [q, r];
}

複数の値を返却

 

利用可能なライブラリ・モジュール

コードからは、 date-fns (v4.1.0) の一部のモジュールを利用できます。

  • 'date-fns'
  • 'date-fns/locale'

 

使用例:

function magicpodCustomStep(args: Args): Output {
  // "今日は 木曜日 です"
  return [format(new Date(), '今日は eeee です', {locale: ja})];
}

 

生成AIを利用する

生成AIを利用し、「TypeScriptコードを実行」ステップを作成する方法を紹介します。

 

MagicPod Autopilot

MagicPod Autopilot を用いると、「TypeScriptコードを実行」ステップを生成することができます。

入力、出力の設定も行なってくれるため、簡単に利用できるおすすめの方法です。

プロンプト例：

TypeScriptコードを実行コマンドを用いて、ランダムなファイル名を生成するステップを挿入してください

 

その他の生成 AI

その他の AI を使用する場合は、以下のようなプロンプトにより「TypeScriptコードを実行」コマンドで使用できるTypeScriptコードを生成することができます。

この場合、「TypeScriptコードを実行」ステップの挿入や入力、出力の設定は手動で行う必要があります。

以下の magicpodCustomStep 関数を拡張します。

 - Args 型は string 型のプロパティを持つことができます。
 - Output 型は string | number | boolean 型のタプルです。
 - Args 型、 Output 型は自動的に定義されます。

```ts
function magicpodCustomStep(args: Args): Output {
  return [];
}
```

ランダムなファイル名を生成する関数を作ってください。

 

Q&A

Q.コードの確認のため、TypeScriptコードのみを実行することはできますか

テストステップの部分実行機能をご利用ください。

なおコード内に console.log() を記述すると、任意の値や処理結果を実行ログに出力することができます。コードの動作確認やデバッグにご活用ください。

 

Q.作成したTypeScript コードを複数箇所で使用することはできますか

「TypeScriptコードを実行」ステップをコピーまたは、共有ステップをご利用ください。

 

Q.「TypeScriptコードを実行」コマンドを共有ステップの中で使用することはできますか

現時点では、共有ステップのコネクタを「TypeScriptコードを実行」の入力値と接続できません。

お手数をおかけしますが、「固定値を保存」コマンドを経由してご利用ください。

 

 

制限事項

UI 要素へのアクセス

現時点では、「TypeScriptコードを実行」コマンドから UI 要素にアクセスできません。 UI 操作 (DOM 操作) を含まない計算にご利用ください。

UI要素へのアクセスを希望する方はこちらに投票をお願いします：

TypeScriptコードを実行コマンドでUI要素 (DOM)を操作したい

関連記事