AdobeのExtendScript Toolkit（ESTK）はすでに開発終了しており、今後はVisual Studio Code（VSCode）とExtendScript Debugger拡張機能の組み合わせが推奨されています。
この記事では、Photoshop向けの.jsxをVS Codeから実行する設定を説明します。ExtendScript Debuggerの現行V2系の設定と、旧TypeScript設定を分けています。今回の接続・ブレークポイント・ビルドの実機確認は未実施です。
Step1：Visual Studio Codeのインストールと基本設定
1. Visual Studio Codeのダウンロード
以下の公式サイトから最新版をダウンロードしてインストールしてください。
2. 日本語化（Japanese Language Packの導入）
- 左サイドバーの「拡張機能（Extensions）」アイコンをクリックします。
- 検索バーに「Japanese Language Pack for Visual Studio Code」と入力します。
- 表示されたパッケージをインストールします。再起動の案内に従ってVS Codeを再起動します。表示が英語のままなら、コマンドパレット（WindowsはCtrl+Shift+P、MacはCommand+Shift+P）で「Configure Display Language」を選び、「日本語（ja）」へ変更して再起動してください。表示言語の公式手順も参照できます。
3. ExtendScript Debuggerの導入
同じく拡張機能パネルで以下の拡張機能を検索してインストールします。
🔍 ExtendScript Debugger
配布元はAdobeです。ExtendScript Debuggerの公式配布ページで、拡張機能IDと対応条件を確認します。ESTKと同じアプリへ同時に接続しないでください。
Step2：ExtendScriptのデバッグ設定（launch.json）
1. 作業用フォルダーを作成
例：vscode-project など
VSCodeでこのフォルダーを開きます。
ドラッグ＆ドロップでも開けます。
2. デバッグ設定を開始
左サイドバーの「実行とデバッグ」アイコンをクリックし、歯車アイコンを選択します。
作業フォルダーの.vscode/launch.jsonへ次の設定を保存します。既存の設定がある場合はconfigurationsへ追加し、ほかの設定を消さないでください。V2系ではtypeがextendscript-debug、対象ファイルの項目はscriptです。
3. launch.jsonの編集
{
"version": "0.2.0",
"configurations": [
{
"type": "extendscript-debug",
"request": "launch",
"name": "Launch saved JSX in Adobe",
"script": "${file}"
}
]
}Step3：スクリプトを実行してみる（Photoshopを対象）
1. サンプルスクリプトの作成
#target photoshop
alert("CGM connection test / " + app.version);2. ターゲットアプリケーションの選択
Photoshopを先に起動し、sample.jsxを保存してVS Codeで開いた状態にします。次のlaunch設定では${file}がそのファイルを指します。launch.jsonを開いたまま実行しないでください。
hostAppSpecifierを省略した設定では、実行開始時に実行先の選択一覧が出ます。Photoshopの名前・版・識別子を確認して選びます。特定の版に固定する場合は、一覧で確認した識別子をhostAppSpecifierへ設定します。
3. スクリプトの実行
左側のデバッグパネルから「実行」ボタン（再生アイコン）をクリックします。
Photoshopに「CGM connection test」と版番号が出ることが期待値です。この例は文書を編集しません。接続確認後、alertの行にブレークポイントを置いて再実行し、停止・再開も別に確かめます。launchのセッションはスクリプトの処理が終わると終了するため、短いスクリプトでデバッグ表示がすぐ消えること自体は接続失敗とは限りません。アラートが出ただけでブレークポイント動作まで確認済みにはしません。script指定では保存済みファイルが実行されるため、変更後は保存してください。
旧TypeScript設定の問題点
以下は旧記事の設定記録で、現在そのまま実行する手順ではありません。TypeScript 5.5の変更によりES3ターゲットは従来どおりには使えず、最新版を指定せず導入する旧コマンドと両立しません。またCommonJSのrequire/exportsはExtendScriptが標準で提供する仕組みではありません。まず上の.jsxの最小例で接続を確認し、TypeScriptは別プロジェクトで変換系・型定義・出力構文を検証してください。
旧手順1：Node.jsの導入
旧手順2：依存関係の導入記録（そのまま実行しない）
# 初期化
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：そのままでは使えない設定例
{
"compilerOptions": {
"target": "es3",
"module": "commonjs",
"strict": true,
"noLib": true
},
"exclude": ["node_modules"]
}旧手順4：設定ファイルを読み込まないコマンド例
./node_modules/.bin/tsc sample.ts
./node_modules/.bin/tsc -w sample.tsPhotoshopの他の操作方法は、以下のリンクから確認できます。
ExtendScript Toolkitの使い方はこちらです。
旧記事のコードは、GitHubのMOTOKI-LLC/cg-method-codeにもまとめています。
ExtendScriptの開発環境は、ほかにも書いています。
まとめ
- ExtendScript Toolkitは非推奨となり、現在はVSCode + ExtendScript Debuggerの構成が標準的です。
- 対応するアプリを起動して実行先を選び、接続とブレークポイントを別々に確認します。launchは接続後に実行し、attachは接続だけです。
- TypeScriptは型補完に使えても、出力がExtendScriptで動くとは限りません。旧設定のES3・CommonJS・型定義参照を見直す必要があります。
よくある質問：ExtendScriptのVisual Studio Code開発環境
ExtendScript Toolkit（ESTK）は、今も使えますか？
ESTKは保守終了した旧ツールです。VS Code用のExtendScript Debuggerを検討し、対象OS・Adobeアプリ・拡張機能の対応条件を確認してください。
VS Codeの準備は、どうしますか？
VS CodeとAdobeのExtendScript Debuggerを導入します。日本語化は任意です。対象のPhotoshopを起動し、ESTKが同時接続していない状態で確認します。
launch.jsonは、どうやって作りますか？
作業フォルダーの.vscode/launch.jsonへ本文の設定を保存します。V2系ではtypeはextendscript-debug、対象ファイルはscriptです。旧program項目と混ぜず、既存のconfigurationsは保持してください。
スクリプトを実行して、接続を確かめるには？
sample.jsxを保存して開き、本文のlaunch設定で実行します。表示された一覧からPhotoshopを選び、CGM connection testと版番号を照合します。その後alert行のブレークポイントで停止・再開を確認します。これは期待値で、今回の実機成功記録ではありません。
TypeScriptでも、開発できますか？
型チェックには利用できますが、旧設定を現行TypeScriptへそのまま適用できません。ES3ターゲットの変更、CommonJSの実行環境、noLib時の基本型、Adobe型定義を明示的に確認します。またtsc sample.tsのように入力ファイルを指定するとtsconfig.jsonを使わないため、プロジェクトを検証する際は設定を読み込むビルド方法が必要です。今回、新しいTypeScript構成は検証していません。
Photoshop以外のAdobe製品でも、使えますか？
対応するExtendScriptホストが対象です。全製品の全バージョンに対応するとは限りません。hostAppSpecifierを省略して検出一覧を確認し、必要に応じて実際の識別子とエンジンを選びます。
記事の手順は、いつ時点のものですか？ 最新はどこで確認しますか？
今回は公式配布資料とTypeScriptの変更資料を本文と照合しました。VS Code/Adobeアプリへの接続・ブレークポイント・TypeScriptビルドの実機確認は未実施で、既存画像は今回の成功結果ではありません。旧GitHubコードも今回更新していません。
