ExtendScriptで書いたコードをビルドしたら日本語が文字化けした件

TL;DR

• extendscriptで書いたコードをparcelやwebpackでビルドしたら、alertの日本語が盛大に文字化けした。
• ビルドツールを挟まなければ文字化けしなかった。
• webpackのpluginでutf8-bomを付与したら文字化けしなくなった。

はじめに

Adobe系ツール¹を操作するスクリプト（ExtendScript）を書くなら、現代っ子らしく（？）やっぱり型定義は欲しい！

というわけで、TypeScriptでAdobe系ツールの開発をできるように環境を整えました。
せっかくなので、webpackじゃなくてparcelも使いました。
そうしたら、文字化けしました。

文字化けしましたが、その前段階までの環境構築で参考にしたのは以下の記事になります。

• TypeScriptでAfterEffects等のAdobeアプリを操作したい - Qiita
• typescriptでExtendScriptを書いてみた - Qiita

環境

macOS High Sierra (10.13)
IntelliJ IDEA

文字化け発見

適当にスクリプトを作って、parcelでビルドして、Photoshopでスクリプトを起動したところ、アラートで表示した日本語が文字化けしていました。

検証

原因の切り分けのためにいくつか試します。

ビルドせずにJSファイルから起動

ただAlertを出力するだけのjsファイルを作ります。

test.js

alert("日本語は文字化けしますか？");

文字化けしないようです。

parcelでビルドしたjsファイルから起動

今度はtsファイルをparcelでビルドしたファイルから起動します。

test.ts

alert("日本語は文字化けしますか？");

tsconfigは以下の通り

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es3",
    "strict": true,
    "sourceMap": false,
    "allowJs": false,
    "jsx": "preserve",
    "lib": [
      "es5"
    ],
    "types": [
      "types-for-adobe/Photoshop/2015.5"
    ]
  }
}

文字化けしました。

webpackでビルドしたjsファイルから起動

画像が同じになるので載せませんが、文字化けしました。

ちなみに、tsconfig.jsonはそのままで、webpack.config.jsは以下の通りです。

webpack.config.js

const config =
	{
		mode: "development",
		context: __dirname + "/",
		entry: './src/test.ts',
		output: {
			path: __dirname + '/.dist',
			filename: "test.js"
		},
		resolve: {
			extensions: [".ts"]
		},
		devtool: "#inline-source-map",
		module: {
			rules: [
				{
					test: /\.ts$/,
					use: "ts-loader",
					exclude: /(node_modules)/
				}
			],
		}
	};
module.exports = config;

解決

「文字化けの仕方から判断するに、この文字化けは、SJISをUTF8にした時の文字化けや！」
ということで、それとなく調べたところ　ExtendScript Toolkit CS6自動化作戦　なるサイトの「08. JavaScript実行時の注意点」にて以下の記述を発見しました。

UTF-8でもUTF-8であることを示すBOM (Byte Order Mark : バイトオーダーマーク) が付加されている方が安定して動作させることができます。BOMなしでも動作しますが、もし日本語が含まれていてUTF-8なのにうまく動作しない場合は、BOM付きのUTF-8にしてください。

この記述に従って「webpack utf8 bom」で検索したところ、そのものずばりのパッケージがありましたのでインストールします。

$ yarn add webpack-utf8-bom --dev

npm なら次の通り。

$ npm install --save-dev webpack-utf8-bom

そして、公式のUsageに従ってwebpack.config.jsに次のようにpluginsに追記します。

webpack.config.js

const BomPlugin = require('webpack-utf8-bom');

const config =
	{

...
		plugins: [
			new BomPlugin(true)
		]
	};
module.exports = config;

あとはwebpackを実行した結果は・・・

文字化けしませんでした！

さいごに

この記事を作成していてふと疑問に思いました。
「私はIntelliJを使って開発をしていて発生しましたが、使うエディタによっては起きないのかな」と。
そこまでの検証はしていませんが、ともあれ解決できてよかったです。

1. PhotoshopやらInDesignやらIllustratorやら。 ↩