ExtendScript│Visual Studio Codeでの開発環境構築ガイド│ExtendScript Debugger

AdobeのExtendScript Toolkit（ESTK）はすでに開発終了しており、今後はVisual Studio Code（VSCode）とExtendScript Debuggerプラグインの組み合わせが推奨されています。

この記事では、PhotoshopなどのAdobe製品でスクリプト開発を行うためのVSCode環境構築手順を解説します。

Step1：Visual Studio Code のインストールと基本設定

1. Visual Studio Codeのダウンロード

以下の公式サイトから最新版をダウンロードしてインストールしてください。

▶ Visual Studio Code 公式サイト

2. 日本語化（Japanese Language Packの導入）

1. 左サイドバーの四角アイコン「拡張機能（Extensions）」をクリック
2. 検索バーに「Japanese Language Pack for Visual Studio Code」と入力
3. 該当パッケージをインストール

3. ExtendScript Debuggerの導入

同じく拡張機能パネルで以下のプラグインを検索してインストールします。

🔍 ExtendScript Debugger
開発元：Adobe Systems Inc.

Step2：ExtendScriptのデバッグ設定（launch.json）

1. 作業用フォルダを作成

例：vscode-project など

VSCodeでこのフォルダを開きます（ドラッグ＆ドロップでもOK）。

2. デバッグ設定を開始

左の「デバッグ」アイコン（虫のマーク）をクリック → 歯車アイコンを選択
デバッガとして 「ExtendScript Debugger」 を選択すると、launch.json が自動生成されます。

3. launch.json の編集

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "extendscript",
      "request": "launch",
      "name": "Run current script",
      "program": "${file}"  // 現在開いているスクリプトファイルを実行対象に
    }
  ]
}

Step3：スクリプトを実行してみる（Photoshopを対象）

1. サンプルスクリプトの作成

#target photoshop

function test() {
  try {
    alert("成功！");
  } catch (e) {
    alert("失敗！");
  }
}
test();

2. ターゲットアプリケーションの選択

上部メニュー → 「表示」→「コマンドパレット」
ターゲットアプリケーションを選択 を検索し、Photoshop を選択

3. スクリプトの実行

左側のデバッグパネルから「▶」実行ボタンをクリック

Photoshop上で「成功！」というダイアログが表示されれば、接続成功です！

おまけ：TypeScriptでのExtendScript開発（途中まで）

今後TypeScriptを使って開発することも可能です。以下はその初期設定手順のメモです。

1. Node.js のインストール（公式サイトから）

2. PowerShellでパッケージをインストール

# 初期化
npm init -y

# TypeScriptの導入
npm install -D typescript

# Adobe用の型定義ファイル（外部リポジトリ）
npm install -D ten-A/types-for-adobe

# tsconfig.json を作成
./node_modules/.bin/tsc --init

3. tsconfig.json（例）

{
  "compilerOptions": {
    "target": "es3",
    "module": "commonjs",
    "strict": true,
    "noLib": true
  },
  "exclude": ["node_modules"]
}

4. TypeScriptのビルドコマンド

./node_modules/.bin/tsc sample.ts
./node_modules/.bin/tsc -w sample.ts

まとめ

• ExtendScript Toolkitは非推奨、今後はVSCode + ExtendScript Debuggerが主流
• launch.jsonを設定することで、Adobeアプリへ直接デバッグ実行可能
• TypeScript環境も整えると、型補完や構文チェックが強化されて便利！