JavaScriptを圧縮・難読化する時の注意点
こんにちは、アシアルの中川です。
JavaScriptの圧縮や難読化をしなければいけないような状況に遭遇する場面があると思います。
圧縮や、難読化のツールはググれば結構簡単に見つかりますが、
いざ、圧縮や難読化をしてみると、エラーの嵐でまともに 動かなくなるなんてことがよくあるのではないでしょうか。圧縮ツール使えねーなんて思う前に、そういった場合には、以下の点をチェックしてみて下さい。
※ツールによってはどうやってもエラーが出るものもありました。そんなときはあきらめて別のツールを試してみるほうがいいかもしれません。
１．各行の最後に「;」セミコロンをつける。
まず、これを一番に調べます。
よく、JavaScriptの入門等には、『命令行の行末の「;」は省略しても実行時に自動的に補完されるので問題ありません』なんてのを見かけますが、圧縮や難読化をすると、基本的に改行をガンガン削ってくれますので、行末に「;」を書いていないと、エラーが出まくるはめになります。
２．prototype定義の最後にも「;」を
命令の行末に「;」は基本的なものですが、たとえば、以下のようなprototype定義にも「;」が必要になる場合があります。
var Hoge = function() {}
Hoge.prototype.foo = function() {
//処理
}; //←これ
３．Objectのprototypeへのアクセスに変数を使用する場合
これは、圧縮時にはあまり問題にはならないと思いますが、難読化した場合にエライ痛い目に会いました。
以下のようなコードです。
var Hoge = function() {//初期化}
Hoge.prototype.foo = function() {
//処理1
}
Hoge.prototype.bar = function() {
//処理2
}
//実行
var hoge = new Hoge();
var methodName = "foo";
hoge[methodName](); //←変数名に代入した値での実行
上記のような場合、prototype.fooを定義したものが、難読化した場合、「foo」から変更されてしまう場合があり、変数にメソッド名を代入して使う方法では、hoge.foo()なんてないよーって言われてし まうことも。
難読化のツールのオプションで変更しないようにできる場合はいいのですが、そうでない場合、
if や、switch構文などでいちいち書き直す必要が出てきます。
４．難読化とは暗号化ではない（当たり前ですが・・・）
JavaScriptでは、難読化ツールはググれば結構な数が見つかるものですが、中には簡単に整形できてしまうものがあります。
知っているものでは、最終的にはeval(hogehoge....)、みたいにパッと見はなんだかわかんないようになっていても、evalをalertに変えると、きれいにもとに戻ったコードを一発でとれてしまうものがあります。
これとか→(http://www.phppro.jp/phptips/archives/vol32/#1)
あくまでも、圧縮や、難読化なので、暗号化ではないことを念頭に使用しましょう。
５．圧縮されたコードを整形する
圧縮されたコードであっても解析したいなんて気持ちになるのは技術者の性だと思います。
圧縮されたまま解析するなんて人は別ですが、いちいち手作業で改行をつけていったりしていませんか？そんなときは、JavaScript Code Improver(http://www.jcay.com/javascript-code-improver.html)を試してみてください。何個か試した中でも、このソフトは結構優秀なほうでした。（他のソフトは忘れてしまいましたが・・・）
６．難読化で速度が上がる場合、下がる場合。
難読化によって、eval関数なんかを使う場合、当然その分の処理が増えるので、速度的にはマイナスです。がしかし、ファイルをまとめたり、ソースが圧縮されたことにより、結構速度的にはアップする場合 が。(eval使った難読化は遅くなると思いますが。。。）
最近では大きなJSアプリを作る機会も増えてくると思いますので、JSファイルを圧縮する機会も増えてくるのではないでしょうか。
ごくごく基本的なことですが、参考になりましたらと思います。
