extendscript-ts-template

複数の Adobe アプリ向け ExtendScript を TypeScript からトランスパイルして管理する軽量モノレポテンプレートです。

独自に調節したes5-shimとes6-shimを注入することで、 ES6相当のライブラリを使用できます。
TypeScriptからトランスパイルするため、文法は最新のものを使用できます。

ExtendScriptの制約により、Symbol Promiseなど、一部のライブラリはオミットされています。
詳細は docs/polyfills.md を参照してください。
また、shimの詳細な動作は各shimを参照してください。 shimの限界として、正しく動作しないものはeslintによってエラーとして表示されます。 また、一般的なprettierルールを同封しています。

型情報にはTypes-for-Adobeを使用しています。
これは有志によって作成されたもので、公式の情報ではないため、定義されていない情報がいくつもあります。足りない定義などがあればプルリクエストを検討してください。

対応アプリ

デフォルトで以下のアプリが設定済みです：

アプリ	ID	ディレクトリ
After Effects	aeft	src/aeft/
Illustrator	ilst	src/ilst/
Photoshop	phxs	src/phxs/

pnpm add-app -- --app=<appId> で新しいアプリを追加できます。 追加できるのは aeft, ilst, phxs, idsn, ppro, anmt, audt の正式対応アプリのみです。

環境 / Environment

• Node.js ^22.13.0 || >=24
• pnpm 11.17.0
• TypeScript 4.9.5（ES3 出力のため固定）

TypeScript 4.9.5 を固定する理由と、Babel 8・TypeScript 5 系を別移行とする判断は、 ADR 0001 に記録しています。

テスト環境 / Tested environment

• Node.js v22.13.0 / v24.13.0
• Windows 11
• AfterEffects 2025 / Illustrator 2025 / Photoshop 2025

インストール / Install

このリポジトリはテンプレートリポジトリです。Use this templateから自分用のリポジトリを作成してください。 テンプレート利用後は、AGENTS.md と .agents/ を自分の開発環境や運用ルールに合わせて調整して構いません。 リリース workflow や FUNDING などの運営用設定もコピーされるため、不要な設定は削除してください。 初期整理の詳細は テンプレート利用後の初期整理 を参照してください。

pnpm i
pnpm build

使い方 / Usage

各アプリの src/{appId}/ 内にスクリプトフォルダと index.ts を作成し、 es.config.mjs にエントリを登録します。

以下のコマンドで簡単にスクリプトを追加できます：

pnpm new -- --app=aeft --name=MyScript --license

ScriptUI パネル対応スクリプトを作る場合は --ui=scriptui を指定します：

pnpm new -- --app=aeft --name=MyPanel --license --ui=scriptui

対話式でも作成できます：

pnpm new

生成される説明コメントの規格と、生成後に TODO を完成させる手順は スクリプト説明コメントブロック を参照してください。

es.config.mjs

export default {
  scripts: {
    aeft: [
      {
        name: "example",      // src/aeft/example/index.ts がビルドされます
        version: "0.0.1",
        build: true,           // ビルドの可否
        license: true,         // LICENSE の内容を出力に挿入
      },
    ],
    ilst: [...],
    phxs: [...],
  },
  common: [
    {
      name: "tests",           // src/tests/index.ts がビルドされます
      version: "0.0.1",
      build: true,
      license: true,
    },
  ],
};

スクリプトのテンプレート

// src/aeft/example/index.ts
/**
 * @script example
 * @app aeft
 * @material-symbols TODO: 公式一覧を確認し、候補を3件カンマ区切りで記載
 * @description
 *   TODO: 対象・操作・得られる結果を1〜3文で記載
 *
 * @workflow
 *   1. TODO: 利用者から見た操作と結果を記載
 */

import "../../init";
import { entry } from "../../lib/lib";

entry("example", () => {
  // TODO: Implement example
});

ビルド / Build

pnpm build          # 変更のあるスクリプトをビルド
pnpm build --all    # 全スクリプトを強制ビルド
pnpm build --app=aeft  # 特定アプリのみビルド
pnpm build:aeft     # After Effects のスクリプトのみビルド

出力先は dist/{appId}/{ScriptName}/ です。

watchもあります。

pnpm watch

コマンド一覧

コマンド	説明
pnpm build	変更のあるスクリプトをビルド
pnpm build --all	全スクリプトを強制ビルド
pnpm build --app=aeft	特定アプリのみビルド
pnpm build:aeft	After Effects のみビルド
pnpm build:ilst	Illustrator のみビルド
pnpm build:phxs	Photoshop のみビルド
pnpm watch	ファイル変更を監視して自動ビルド
pnpm lint	ESLint でコード検査
pnpm format	Prettier でコード整形
pnpm new	新規スクリプト追加
pnpm add-app	新規アプリ追加
pnpm clean	ビルドハッシュをクリーンアップ
pnpm test	ビルド差分判定の回帰テスト

pnpm add-app -- --app=<appId> で正式対応アプリを追加すると、pnpm build:<appId> も自動で追加されます。

テスト / Test

src/tests/index.tsにテストを記述しています。 ビルドして実行すればダイアログが表示され、shimが想定通り動いているかが表示されます。

ビルド差分判定の回帰テストは pnpm test で実行できます。

ドキュメント

• プロジェクト概要
• スクリプト説明コメントブロック
• ポリフィル
• はじめに
• リリース手順
• テンプレート利用後の初期整理
• リポジトリ運営方針