![[アップデート] Visual Studio Code 拡張機能の AWS Toolkit で Step Functions の Workflow Studio が利用できるようになりました](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-5f8ac6d1392d52f09eefb00a5ad1b303/fceee02f9b8607d60014a828933bc45b/aws-step-functions)
[アップデート] Visual Studio Code 拡張機能の AWS Toolkit で Step Functions の Workflow Studio が利用できるようになりました
2025.03.10Visual Studio Code(以降 VS Code) 拡張機能の AWS Toolkit を使って、ローカル環境で Step Functions の Workflow Studio を利用できるようになりました。
Whats'New
リリースブログ
Workflow Studio はビジュアルエディタを使ってグラフィカルに Step Functions を構築できる機能になります。
Step Functions を使ったことがある方であれば、一度はお世話になったであろうあの機能です。
Step Functions Workflow Studio でのワークフローの開発 | AWS Step Functions
似たような機能として、 VS Code 拡張を用いて Application Composer を扱う機能があります。
上記機能では CloudFormation や SAM のテンプレートを生成していましたが、今回はローカルに存在する ASL ファイルを読みこんだり、ビジュアルエディタ経由で作成することが可能になりました。
試してみる
AWS Toolkit のバージョンが 3.49.0 以上で本機能を利用することが可能です。
その状態で拡張子が asl.json もしくは asl.yaml(yaml) であれば自動で Workflow Studio で開くはずです。
デザインモードを確認するとこんな感じです。
コードモードも利用できます。
ASL としては Step Functions での JSONata を使用したデータの変換 | AWS Step Functions で紹介されている、JSONata を利用したフィルタリングの例をそのまま利用します。
{
"Comment": "Filter products using JSONata",
"QueryLanguage": "JSONata",
"StartAt": "FilterDietProducts",
"States": {
"FilterDietProducts": {
"Type": "Pass",
"Output": {
"dietProducts": "{% $states.input.products[calories=0] %}"
},
"End": true
}
}
}
こちらは、JSON の配列を受け取って、calories が 0 の場合に抜き出す処理になります。
また、今回は CDK で ASL を読み込んでステートマシンをデプロイする形としました。
ASL をビジュアルエディタで編集した上で、それを CDK から呼び出してデプロイするイメージです。
// ASLファイルの読み込み
const aslFile = fs.readFileSync(`lib/step-functions/sample.asl.json`, "utf-8");
// Step Functionsの作成
const batchStateMachine = new sfn.CfnStateMachine(this, "SampleStateMachine", {
stateMachineName: "sample-state-machine",
definitionString: aslFile.toString(),
roleArn: sampleStateMachineRole.roleArn,
});
ビジュアルエディタを用いた開発を行いつつ、ASL ファイルも Git 管理しやすくて良さそうなので、この構成にしました。
VS Code 拡張から TestState API を呼び出して各ステートの入力と出力をチェックすることも可能なので、AWS 上でのテスト回数も減らせそうです。
VS Code 拡張からの TestState API 呼び出しを活かして開発してみる
VS Code の中で完結する動作確認は、AWS にデプロイまでせずにサクッと開発していきたいです。
TestState API を利用して、ステート単位の動作確認と開発を行ってみます。
デザインモードで、「テスト状態」を記載されている部分をクリックします。
入力として、下記 JSON の配列を渡してテストを実行します。
{
"products": [
{
"calories": 140,
"flavour": "Cola",
"name": "Product-1"
},
{
"calories": 0,
"flavour": "Cola",
"name": "Product-2"
},
{
"calories": 160,
"flavour": "Orange",
"name": "Product-3"
},
{
"calories": 100,
"flavour": "Orange",
"name": "Product-4"
},
{
"calories": 0,
"flavour": "Lime",
"name": "Product-5"
}
]
}
すると、calories 属性が 0 の要素のみを抽出できていることがわかります。
「状態の定義」を編集して calories 属性が 100 以下の際に抜き出すように変更してみます。
テスト結果を確認すると、calories 属性が 100 の要素も抜き出せています。
「変更を保存して閉じる」をクリックすると、ASL 側に反映されます。
AWS の API を利用した TestState
Pass 属性の際は不要でしたが、AWS の権限を持たせて API をコールするアクションについてもテストすることが可能です。
その際、下記権限と実際にテストする API の権限を states.amazonaws.com に許可する IAM ロールを作成する必要があります。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": ["states:TestState", "states:RevealSecrets", "iam:PassRole"],
"Resource": "*"
}
]
}
TestState API を使用するための IAM アクセス許可 | AWS Step Functions
実際に API コールを行いつつ、テストは実行できたのですが、AWS リージョンとして us-east-1 しか利用できませんでした...
profile の default region や VS Code の AWS: Show Region 設定では解決せず、一旦諦めました。
下記 re:Post も未解決のようなので、改めてソースコード側を確認してみようと思います。
変数について
現時点ではどうしても変数を渡した TestState API を実行できませんでした。
Unexpected key 'variables' found in params
コードを詳細に追えていないですが、恐らく SDK for JavaScript の v3 移行が完了しておらず、直近追加された機能である変数を含めた形で TestState API を実行できないのだと思います。
JSONata を利用した開発を考えると、是非変数を渡しつつテストしたい所ですが、現在はマネジメントコンソールを利用してこの部分のテストを行う形が良さそうです。
まとめ
JSONata をサポートしたことで Step Functions の表現力は大きく高まりました。
一方で Step Functions で様々なことができるようになった分、Step Functions の開発やテストをいかに効率的に行うかは以前より重要になると思っています。
今回の VS Code 拡張に関するアップデートは、より効率的に開発していくためのとても良いアップデートだと思いました！
変数を活用した TestState やリージョンの選択など課題もあったのですが、OSS として公開されているので、別の機会に深堀ってみようと思います。
