難読化(minify)したJavaScriptを整形

Question

難読化(minify)したJavaScriptを整形するためsublime text の HTML-CSS-JS Prettifyプラグインを用いています。
.jsbeautifyrc を設定をしていますが以下の2つがわかりません。

1: カンマ演算子を用いた式の連続を改行する設定

for (f = 0; f < 15; f++) e = {}, e.fac = 0, e.kiro = 0, e.reactance1 = 0, e.reactance2 = 0, e.name = 0, e.count = 0, e.doubletrack = 0, e.post = 0;

// カンマ演算子を用いた式の連続を改行する

for (f = 0; f < 15; f++) e = {},
                         e.fac = 0,
                         e.kiro = 0,
                         e.reactance1 = 0,
                         e.reactance2 = 0,
                         e.name = 0,
                         e.count = 0,
                         e.doubletrack = 0,
                         e.post = 0;

2: 三項演算子をif文にする設定

n > 0 ? count = 1 : count = 0;

// 三項演算子をif文にする↓

if (n > 0) {
    count = 1;
}
else {
    count = 1;
}

代替え方法があればお願いします。

Answer 1

簡単にできる方法は得られませんでしたが少し手間をかけた方法ならできましたのでコメントしてみます。
本回答は自分でツールのカスタマイズコードを書く方法ですので手軽とは言い難いです。もし解にならなさそうなら読み捨ててください。

お使いの方法はJavascriptのモジュールjs-beautifyを利用していると思います。ご存知かと思いますがjs-beautifyのオプションにはご質問のようなことをするオプションはないとおもいます。

難読化したソースを解析する記事をいくつか見ましたが基本的な整形ツールを使った後にIDEを使って手で整形するといったものを見かけました、自分はIDEでのjavascript整形について残念ながらコメントできる知識がありません。有償版のIntelliJだとできたりしないのかなと想像する程度です。

そこでjavascriptの構文解析が可能なesprimaとそれに基づく整形ツールescodegenを試してみました。
esprimaとescodegenはいずれもjavascriptでの実装でありnpmでインストールできます。

自分の戦略は以下です。

• escodegenで一旦基本的な整形をする(js-beautifyでもいいと思います)
• 整形後のソースに対してesprimaで構文解析しつつ一部のコードを置き換える

esprimaにはparse関数(AST「=抽象構文木」の生成)と、traverse関数(ASTをトラバースして興味のある構文要素についてのみ特定の処理を行う)があります。本件の処理対象の構文はSequenceExpressionとConditionalExpressionになるのでこの2つについてソースを整形する処理を書きました。

処理のポイントは

• estraverseへASTおよび興味のある構文に対する関数をオプションで渡す

SequenceExpression(カンマで区切られた式の並び)とConditionalExpression(cond ? e1 : e2)の2つについてそれぞれ指定関数を呼び出すようにオプションを渡します。

• SequenceExpression

無条件にカンマで折り曲げるとfor (i = 0, i = 2; i < N; i++, j++)といったものもi, jで改行されてしまいます。それはうまくないと感じたので上位構文がExpressionStatementのときだけ変換するようにしました。

• ConditionalExpression

javascriptはScalaなどと違いif文は式ではありませんので、値を必要とする場所にかかれたConditionalExpressionをif文に変更すると文法エラーになってしまいます。それに注意し上位がExpressionStatementのときだけ変換するようにします。

上記のコールバックが呼ばれた際に構文木の中に元のソース上文字範囲も入っていますので、無関係な部分は結果テキストへ単純マージし、興味のある範囲だけ編集した結果を結果へマージする感じです。

結果は以下の通りです。(ツールは単なるnodejsアプリとして作ってます)

// (1)escodegenの整形結果
for (i = 0, j = 1; i < 10; i++, j++)
    a = {}, a = 1 * 1, a = 2 * 2, a = 3 * 3, a = 4 * 4, a > 1 ? 1 : 2;
(n++, n > 0) ? count = 1 : count = 0;
while (i = 0, j > 1)
    a = 1, b = 2;
do {
    a = 1, b = 2;
    i == 1 ? 2 : 3;
} while (i = 1, j > 2);
a = 1, (b = 1, c = 2), c = 3;

// (2) (1)をesprimaカスタマイズで整形した結果
for (i = 0, j = 1; i < 10; i++, j++)
    a = {},
    a = 1 * 1,
    a = 2 * 2,
    a = 3 * 3,
    a = 4 * 4,
    a > 1 ? 1 : 2;
if (n++, n > 0) {
    count = 1
} else {
    count = 0
};
while (i = 0, j > 1)
    a = 1,
    b = 2;
do {
    a = 1,
    b = 2;
    if (i == 1) {
        2
    } else {
        3
    };
} while (i = 1, j > 2);
a = 1,
(b = 1, c = 2),
c = 3;

esprima/escodegenをうまく使えてないせいかコードは240行程度になってしまい、ここに挙げられるほど短くできてません。それなりに面倒で敷居は低くはないですが、構文まで意識した整形が自分の好きなようにできるという意味では使えるかなと感じました。(escodegenのverbatimオプションを使った方がもう少し短く書けるかも知れません。ちなみに自分のコードは若干配慮が足りてないので無駄なセミコロンが残ったりしてます。)

Comments

[hydra]

実用とするには開発、デバッグが必要でコスト的に難しいですね。

[KSwordOfHaste]

そんな気はしましたｗ；
ご質問のような整形を望む方が多くいらっしゃるのであれば誰かがしかるべきデバッグをしたものをOSSとしてgithubにupするといった動きがあっても不思議でない気がしたのですが、自分にはそうしたものは見つけられませんでした。何かのIDEでこういう整形が既に簡単にできるのではないのかなぁと想像しました。