IllustratorやInDesignなど用にExtendScriptを書いていると、だんだんコード量が肥大化してくることがあります。
そんなときはキリのいい区切りでファイルを分割し、//@includeや//@includepathで読み込むと開発・管理がしやすくなります。1ファイルあたりの情報量（行数）が減って、内容を把握するのが楽になるのです。
|
1 |
//@include 'external.jsx' |
最終的にVisual Studio Codeの機能拡張 ExtendScript Debugger か ExtendScript Toolkit でバイナリとして書き出すと、外部ファイルから読み込んだコードも含めて1つのファイルにまとめられます。
しかしバイナリとして書き出しは、自ら能動的に操作して毎回実行する必要があります。修正するたびに同じ操作をするのはなかなか負担が大きいのです。
WebpackやViteなどモジュールバンドラーを利用したフロントエンドの開発では、ファイルを保存したタイミングでまとめ処理を自動的に実行できます。ExtendScriptでもそうできたら嬉しいですね。
そこで今回は、RollupとBabelを使い、モジュールごとに別ファイルに切り分けたExtendScriptを自動で1つにまとめる方法 を紹介します。これをすると、テンプレートリテラルやArray.filterなどES5やES2015（ES6）以降に追加された機能を利用してコードを書けるようになります。こちらがメインでも良いくらいですね。
TypeScriptの導入は行わないので、Adobeアプリ用スクリプトにTypeScriptは大げさなんだよなー、というかたに特におすすめです。
初回のこの記事では、前提知識や技術選定理由を中心にお送りします。
目次
RollupとかBabelって何？
Rollupとは、複数のファイルに分割されているJavaScriptを設定に基づいて1つにまとめるツールです。こういったジャンルの道具をモジュールバンドラーや、あるいは単にバンドラーと呼びます。似た製品にwebpack・Vite・esbuildなどがありますが、今回はRollupを採用します。
バンドラーは大抵buildとwatchの機能があります。それぞれ自分が能動的に1回成果物を生成するものと、バンドラーがソースコードの変更を監視してファイルの保存のたびに自動的に成果物を生成するものです。デバッグ中はwatchで成果物を自動生成すると大幅に手間を減らせます。
Babelは、新しいバージョンで書かれたJavaScriptを古い環境でも動くように変換するツールです。
JavaScriptを複数のファイルに分割するときにはESModules、import文やexport文を利用しますが、それはES2015（ES6）で追加された機能です。それより古いバージョンES3をもとにしたAdobeアプリのスクリプト（ExtendScript）の環境ではエラーが出て動かないので、動くようBabelによってコードを変換します。
これはバンドラー内で実行する仕組みになっているので、別々に実行する必要はありません。
簡単に言うと何するの？
Node.jsの開発環境でRollup＋Babelの構成でフォルダ・設定ファイルを作り、ExtendScriptを生成できるようにします。
Node.jsはすでに使えるようになっている前提です。package.jsonとrollup.config.jsにどのような内容を書くか、なぜそうするのか、という部分が主要なポイントになります。
何やらたくさんファイルがあって複雑に見えますが、実際のところしたたか企画の用意したテンプレートをダウンロードしてnpm installのコマンドを実行するだけで準備ができます。
TypeScriptは使わないの？
普段アプリ開発などでTypeScriptを日常的に使用していますが、今回は使いません。
というのも、IllustratorスクリプトAPIはTypeScriptを使うほど複雑ではなく、補助がなくても十分効率的に書けるからです。したたか企画では、Illustratorスクリプトを大抵バンドラーさえ使わない単なるES3のExtendScriptとして書いています。
それにTypeScriptの生産性の高さは、公式に型を公開しメンテナンスしてくれる他者の存在に支えられています。しかしIllustratorスクリプト用の公式の型は存在しません。
Types-for-Adobe などサードパーティ製や自作の型を使うなら、結果的に道を開拓するだけでなく街道として整備し後進を導くような働きが必要になってしまうのです。
それならもっと簡素なものにしたほうが現実的でしょう。その解決策の1つがRollupの使用です。
何でRollup？
普段UXPプラグインの開発にはwebpackを使っているので、当初はそれを踏襲しようとしました。しかしwebpackの生成するコードは特別な後処理をしないとAdobeアプリ用ExtendScriptでは動かないようで、少々ハードルが高そうでした。
調べた結果、複数の記事でRollupの生成するコードが素朴にファイル同士をつないだものに近いという情報があります。ExtendScriptではそういった素直なコードなら動く可能性が高く、出力結果も見やすいため、Rollupを採用することにしました。
実際に見てみないとどんなものか想像しにくいでしょう。生成されるコードやもとのコードをお見せします。こんな感じです。
生成されるコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/** * @file ファイル説明 * @version 1.0.0 * @author 作者名 * @copyright © 2026 example.com */ //@target 'illustrator' //@targetengine 'エンジン名' (function () { 'use strict'; /** * 外部ファイルのfunctionをバンドルするための見本 */ function doSomething() { alert('外部functionからのalert'); $.writeln('doSomething'); } (function () { doSomething(); var inlineVariable = 'テンプレートリテラル展開'; alert("\u8907\u6570\u884C\u306E\u30C6\u30AD\u30B9\u30C8\n" + inlineVariable + "\u3082\u53EF\u80FD"); })(); })(); doSomething = null ; $.gc() ; |
もとのコード
|
1 2 3 4 5 6 7 8 9 |
import { doSomething } from './external.js' ; (function() { doSomething() ; const inlineVariable = 'テンプレートリテラル展開' ; alert(`複数行のテキスト ${inlineVariable}も可能`) ; })() ; |
|
1 2 3 4 5 6 7 |
/** * 外部ファイルのfunctionをバンドルするための見本 */ export function doSomething() { alert('外部functionからのalert') ; console.log('doSomething') ; } |
プロジェクト全体はGitHubにあるのでご参照ください。
どうやって生成するの？
次の手順でExtendScriptを生成できます。手順1から3は初回のみの事前準備です。次からは4だけで済みます。
1. プロジェクトフォルダを作る
sttk3/sample-build-extendscript-rollupをZIPとしてダウンロードするなどして、専用フォルダを作ります。これをプロジェクトフォルダと呼びます。
2. 展開したプロジェクトフォルダをCurrent Directoryにする
ここからターミナル.appでの作業です。ターミナル.appを開き、コマンドを打ってください。
例えばダウンロードフォルダにプロジェクトフォルダを展開した場合、コマンドは次のようになります。
|
1 |
cd ~/Downloads/sample-build-extendscript-rollup-main |
3. プロジェクトフォルダに必要なツールをインストールする
ターミナル.appで次のコマンドを打ってください。必要なツール一覧はpackage.jsonに書いてあり、インストールはそれをもとに自動で進みます。
|
1 |
npm install |
インストールが終わったら事前準備は完了です。もうExtendScriptを生成できます。
4. ExtendScriptを生成（build）する
ターミナル.appで次のコマンドを打ってください。ExtendScriptを生成します（この生成する動作をbuildやcompileと呼びます）。
|
1 |
npm run build |
できたExtendScript（jsxファイル）は、同じ階層にあるdistフォルダにあります。ご参照ください。
コマンドbuildをwatchに変えると、ソースコードのファイルの変更を監視し、保存ごとにExtendScriptを生成できます。
|
1 |
npm run watch |
監視を止めるには、ターミナル.appのwatch中のウインドウでcontrol+Cのショートカットを押してください。中止できます。
設定内容などは次回【解決】モジュール化したExtendScriptを自動で1つにまとめたい！（2）に続きます。
作者に感謝を伝えたい！
Buy me a coffeeは、クレジットカード払いなどでクリエイターにコーヒーをおごれるサービスです。ツール・情報が役に立った！ 感謝の気持ちを表現したい！ というかた、おごっていただけましたら嬉しいです☕️
