決定版はこれだ！ JavaScriptの圧縮、難読化ツール 比較検討

JavaScript(jsファイル）の圧縮、難読化のツールを、いろいろ試し、比較検討しました。注意点やいろいろなツールの簡単なレビューを紹介します。最終的には、packerに決めました。

JavaScriptを圧縮、難読化する理由

自分の書いたJavaScriptのソースコードを、秘密にしたい。公開したくない。真似されたくない。恥ずかしいから隠したい。というのが大きな理由です。

JavaScriptのソースコードを、完全にわからなくすることは不可能です。 それは、JavaScriptが、ブラウザ側（クライアントサイド）で実行し、誰でもソースコードを見ることができ、簡単に読めてしまうからです。
しかし、コードを読みにくくすることで、解読のハードルを少し高くすることができます。 また、圧縮化、難読化には、JavaScriptファイルの読み込み時間を短くする効果もあり、とても有効です。 今回のご紹介は、JavaScriptだけですが、CSSの圧縮、難読化のツールもたくさんあります。

JavaScriptの圧縮、難読化での注意

JavaScriptの圧縮、難読化ツールは、海外製が多いため、日本語には注意が必要です。 特に、ソースコードそのものではなく、JavaScript(.jp)のファイル名に、日本語を使わない方が良いと思います。これは、圧縮、難読化をしなくても、いろいろな問題を回避するために、半角英数字にしておくことをお勧めします。

その他、注意としては、

• 元のソースコードをバックアップしておく
• 圧縮、難読化したJavaScriptコードの動作テストをする
• 「}」（中カッコ）のあとに「;」（セミコロン）がないとエラーになる場合がある

元のJavaScriptコードをバックアップしておかないと、改良や編集をするのが大変になってしまいます。

特に大事なのは、圧縮、難読化したJavaScriptコードを、きちんと動作テストする事です。動かなくなっては意味がないので。できれば動作スピードも確認するといいと思います。圧縮率が高くても処理が遅くなってしまう場合があります。また、余計な広告コード等が埋め込まれていないかもチェックするといいですね。

「;」（セミコロン）については、特に、prototypeによるメソッド定義をする場合は、必ず最後に「};」と書かないと、圧縮、難読化したコードの実行でエラーになります。

JavaScriptの圧縮、難読化ツールの種類

JavaScriptの圧縮、難読化のツールが、Web上に、たくさん公開されてます。単にコメントを省くだけのものから、疑似暗号化するものなど、さまざまです。 その中で、簡単に使えて、効果の高いツールを見つけるため、いろいろ使って比較検討してみました。

大きく分けて、Web上で圧縮、難読化できるオンライン版と、ダウンロードして使うアプリケーション版（コマンドライン版）に分けられます。
コマンドライン版は、Javaで動作するものが多く、導入や環境設定に手間がかかってしまいます。念のためですが、JavaとJavaScriptは同じものではありません。 JSC (JavaScript Compressor)という実行系（exe形式)のツールもあります。しかし、使ってみると、エラーになり、使えませんでした。 そこで、今回は、Web上でJavaScriptを圧縮、難読化できるオンライン版のツールを選んで、比較検討しました。

Web上で圧縮、難読化できるオンライン版ツールの選定

たくさんの種類がありますが、私は、Googleのページランクも高く、使いやすい/packer/を選びました。
そして、いろいろ試したい場合には、The JavaScript CompressorRaterがお勧めです。これは、JSMin, Dojo ShrinkSafe, YUI Compressor, Packer, gzipで、それぞれ圧縮、難読化し、オプションをいろいろ変えて、圧縮率を比較表示してくれます。 もちろん、JavaScriptコードを圧縮、難読化したコードも取得できます。

以下、私が検討した、Web上でJavaScriptを圧縮、難読化できるオンライン版のツールです。

• /packer/
• お勧め
• わかりやすくて、使いやすい
• Shrink variablesのチェックボックスをオンにすると、変数名も圧縮してくれる
• Base62 encodeのチェックボックスをオンにすると、圧縮率が高くなる
• The JavaScript CompressorRater
• いろいろなツールを試し、圧縮率を比較できる
• Online Javascript compressor
• わかりやすくてよい
• About.com Javascript Compressor
• よいが、コードを貼り付けるエリアが小さい
• Creativyst CSS & JavaScript Compressor(JSC)
• スペースが単語の間に入る
• CSSの圧縮も可能
• Bookmarklet Builder
• コメントが残る
• Script-Compression for JavaScript and CSS
• secure compressionをしても、コメントがなくなるだけで、見やすいまま
• secure compressionのチェックを外すとよい
• CSSの圧縮も可能
• Compress javascript and css. Amazing code compression.
• うまく動かない

圧縮、難読化とは逆に、Online javascript beautifierや、JsDecoder - javascript decoder - decode obfuscated scriptのような、ブラウザ上で、圧縮、難読化されたJSコードを可読化し、見やすくするツールもあります。