簡単！JavaScriptコードをミニファイする方法7選

●JavaScriptのミニファイとは？

コードの最適化やWebサイトのパフォーマンス改善に興味はありませんか？

今回は、JavaScriptのコードを圧縮・難読化する「ミニファイ（Minify）」について、その方法や効果、そしてミニファイされたコードを元に戻す方法などを詳しく解説していきます。

JavaScriptのミニファイとは、簡単に言うとJavaScriptのコードを圧縮・最適化することです。

具体的には、コード内の不要な空白やコメントを削除したり、変数名を短くしたりすることで、ファイルサイズを小さくし、Webサイトのロード時間を短縮することができます。

またミニファイによってコードが難読化されるため、ソースコードの保護にもつながります。

○ミニファイの効果と目的

ミニファイの主な目的は、JavaScriptファイルのサイズを減らすことです。

ファイルサイズが小さくなれば、当然Webサイトのロード時間も短くなります。

特にモバイルデバイスでは、通信速度が遅かったり、データ通信量に制限があったりするため、ファイルサイズの削減は重要です。

また、ミニファイによってコードが難読化されることで、ソースコードの解読を困難にし、不正なコピーや改変を防ぐ効果もあります。

知的財産の保護という点でも、ミニファイは有効な手段と言えるでしょう。

○コード圧縮と難読化の違い

ミニファイには、大きく分けて「コード圧縮」と「難読化」の2つの側面があります。

コード圧縮は、不要な空白やコメントを削除し、変数名を短くすることでファイルサイズを減らすことが目的です。

一方、難読化は、コードの構造を変更したり、変数名を意味のない文字列に置き換えたりすることで、コードを読みにくくすることが目的です。

ただし、難読化されたコードは、デバッグがしにくくなるなどの欠点もあります。

そのため、コード圧縮と難読化のバランスを考えながらミニファイを行うことが大切です。

// ミニファイ前
function calculateSum(numArray) {
  let sum = 0;
  for (let i = 0; i < numArray.length; i++) {
    sum += numArray[i];
  }
  return sum;
}

// ミニファイ後（コード圧縮）
function calculateSum(r){let n=0;for(let t=0;t<r.length;t++)n+=r[t];return n}

// ミニファイ後（難読化）
function a(r){let n=0;for(let t=0;t<r.length;t++)n+=r[t];return n}

上記のコード例を見ると、ミニファイ前に比べて、コード圧縮では不要な空白が削除され、変数名が短くなっています。

さらに難読化されたコードでは、変数名が意味のない文字列に置き換えられています。

●オンラインツールでミニファイ

さて、JavaScriptのコードをミニファイする方法として、まず手軽に使えるのがオンラインツールです。

ブラウザ上で簡単にコードを圧縮・難読化できるので、特別なソフトウェアをインストールする必要がありません。

ただ、オンラインツールを使う際は、機密性の高いコードを扱う場合はセキュリティ面に注意が必要ですね。

アップロードしたコードがツールの運営者に見られる可能性があるからです。

とは言え、オープンソースのJavaScriptライブラリなどをミニファイするぶんには問題ないでしょう。

それでは、代表的なオンラインツールをいくつか紹介していきましょう。

○JSCompress

JSCompressは、シンプルで使いやすいオンラインのJavaScriptミニファイツールです。

コードをテキストエリアに貼り付けて「Compress」ボタンを押すだけで、瞬時にミニファイされたコードが表示されます。

圧縮率の設定はできませんが、高速に処理してくれるのが魅力ですね。

また、URLを入力すれば、外部のJavaScriptファイルを直接ミニファイすることも可能です。

実際にJSCompressでコードを圧縮してみましょう。

// 圧縮前
function reverseString(str) {
  if (str === "") {
    return "";
  } else {
    return reverseString(str.substr(1)) + str.charAt(0);
  }
}

これをJSCompressで圧縮すると、次のようになります。

// 圧縮後
function reverseString(a){return a===""?"":reverseString(a.substr(1))+a.charAt(0)}

見ての通り、スペースや改行が取り除かれ、変数名も短くなって、コードがコンパクトになりましたね。

○JavaScript Minifier

JavaScript Minifierは、もう少し高機能なオンラインミニファイツールです。

圧縮レベルを「Normal」「Agressive」の2段階から選べるのが特徴です。

「Agressive」モードでは、より積極的な圧縮が行われます。

また、コードの文字セットや、セミコロンの扱いなどのオプションも指定できるので、細かい設定が可能です。

処理速度も速く、大きなファイルでも問題なくミニファイできます。

先ほどのreverseString関数を、JavaScript Minifierの「Agressive」モードで圧縮してみましょう。

function reverseString(s){return s===""?"":reverseString(s.substr(1))+s.charAt(0)}

「Agressive」モードでは、変数名がさらに短くなり、イコールの前後のスペースも削除されています。

同じコードでも、ツールによって圧縮の度合いが変わるのが面白いポイントですね。

○Closure Compiler

Closure Compilerは、Googleが開発したオープンソースのJavaScriptミニファイツールで、オンライン版とコマンドライン版があります。

最適化機能が非常に強力で、単なるコードの圧縮だけでなく、踏み込んだコード変換を行います。

たとえば、Closure Compilerはデッドコードの削除や、インライン展開、定数畳み込みなどの最適化を施してくれます。

そのため、コード品質の向上にも役立ちます。

圧縮レベルも「WHITESPACE_ONLY」「SIMPLE」「ADVANCED」の3段階から選べます。

先ほどのコードを、Closure Compilerの「SIMPLE」モードで圧縮すると、こうなります。

function reverseString(a){return""===a?"":reverseString(a.substr(1))+a.charAt(0)};

イコールが3つになるなど、他のツールとは少し違った圧縮になるのがわかりますね。

「ADVANCED」モードでは、さらにアグレッシブな最適化が行われます。

●VSCodeの拡張機能でミニファイ

オンラインツールに続いて、今度はVSCodeの拡張機能を使ったミニファイの方法についてお話ししましょう。

VSCodeは、多くのWeb開発者に愛用されているコードエディタですよね。

その拡張機能を使えば、より本格的で効率的なミニファイが可能になります。

私自身、JavaScriptの開発に日々VSCodeを使っているので、拡張機能の恩恵は十分に実感しています。

コードを書く画面で、すぐにミニファイができるのは本当に便利ですから。

それでは、VSCodeでおすすめのミニファイ拡張機能を2つ紹介しましょう。

○Minify

Minifyは、VSCodeで最も人気のあるミニファイ拡張機能の1つです。

HTML、CSS、JavaScriptのコードを、ワンクリックで簡単に圧縮できるのが魅力ですね。

使い方はとってもシンプルです。

まずはVSCodeの拡張機能から「Minify」を検索してインストールしましょう。

そして、ミニファイしたいコードを開いて、右クリックメニューから「Minify」を選択するだけ。

あっという間にミニファイされたコードが生成されます。

実際に、先ほどのreverseString関数をMinifyで圧縮してみると、こうなります。

function reverseString(t){return""===t?"":reverseString(t.substr(1))+t.charAt(0)}

オンラインツールと同等の圧縮率ですね。

Minifyには、ファイル保存時に自動的にミニファイを実行する機能もあります。

設定で「Minify on save」をオンにしておけば、保存のたびにミニファイされた別ファイルが生成されるので便利ですよ。

ただし、Minifyにはコードの難読化機能はないので、機密性の高いコードには向きません。

あくまでファイルサイズの削減が主な目的と言えるでしょう。

●コマンドラインツールでミニファイ

さて、ここまでオンラインツールとVSCodeの拡張機能を使ったミニファイの方法を見てきましたが、今度はもっと本格的なミニファイ方法として、コマンドラインツールを使った方法について解説しましょう。

コマンドラインツールを使えば、より細かい設定でミニファイができるようになります。

自動化も簡単なので、大規模なプロジェクトの最適化に役立ちますよ。

ただ、コマンドラインに慣れていない方にはちょっとハードルが高いかもしれませんね。

初心者の方でも、基本的な使い方をマスターすれば、コマンドラインツールのメリットを十分に活用できるはずです。

それでは、代表的なコマンドラインのミニファイツールを2つ紹介していきましょう。

○UglifyJS

UglifyJSは、Node.js用の有名なJavaScriptミニファイツールです。

コード圧縮と難読化の両方に対応しており、豊富なオプションを備えています。

UglifyJSを使うには、まずNode.jsをインストールする必要があります。

インストールが済んだら、npmコマンドでUglifyJSをグローバルインストールしましょう。

npm install uglify-js -g

インストールが完了したら、uglifyjs コマンドでミニファイを実行できます。

基本的な使い方は、次のようになります。

uglifyjs input.js -o output.js

input.jsは圧縮元のファイル、output.jsは圧縮後のファイルを指定します。

このコマンドを実行すると、input.jsがミニファイされて、output.jsに出力されます。

先ほどのreverseString関数を、UglifyJSでミニファイしてみましょう。

uglifyjs reverseString.js -o reverseString.min.js

圧縮後のコードは、次のようになります。

function reverseString(n){return""===n?"":reverseString(n.substr(1))+n.charAt(0)}

変数名がaからnに変わっていますね。

これはUglifyJSのマングル機能によるものです。

マングルとは、ローカル変数名を短い名前に置き換えることで、ファイルサイズを削減する機能のことです。

UglifyJSには、このマングル機能のほかにも、デッドコードの削除や定数の畳み込みなど、様々な最適化オプションがあります。

プロジェクトに合わせて、適切なオプションを選択することが大切ですね。

○Terser

TerserはUglifyJSから派生した、より新しいJavaScriptミニファイツールです。

ECMAScript 2015以降の構文にも対応しており、パフォーマンスも向上しています。

Terserのインストールと基本的な使い方は、UglifyJSとほぼ同じです。

npmコマンドでグローバルインストールしましょう。

npm install terser -g

そして、terserコマンドでミニファイを実行します。

terser input.js -o output.js

先ほどのreverseString関数を、Terserでミニファイするとこうなります。

function reverseString(t){return""===t?"":reverseString(t.substr(1))+t.charAt(0)}

UglifyJSとほぼ同じ結果ですが、Terserのほうがわずかにファイルサイズが小さくなるケースが多いです。

TerserもUglifyJS同様、様々な最適化オプションを備えています。

例えば、コメントを残したい場合は、–commentsオプションを使います。

terser input.js --comments -o output.js

このように、コマンドラインツールを使えば、細かい設定でミニファイを実行できます。

ビルドツールと組み合わせれば、開発工程に簡単に組み込むこともできるでしょう。

ただし、コマンドラインツールで高度な圧縮を行うと、デバッグが難しくなる場合があります。

過度な圧縮は避け、必要に応じてソースマップを活用するなど、賢明な使い方を心がけましょう。

●ミニファイしたコードを元に戻す

JavaScriptのコードをミニファイすると、ファイルサイズが小さくなって、Webサイトの表示速度が上がるのは嬉しいですよね。

でも、圧縮・難読化されたコードはデバッグがしにくいのが悩みの種だったりします。

そんな時に役立つのが、ミニファイされたコードを元の状態に戻す「アンミニファイ」ツールです。

これを使えば、圧縮前のコードを復元できるので、デバッグもラクになります。

とは言え、完全に元通りになるわけではありません。

変数名やコメントなどは復元できないので、あくまで限定的な効果だと覚えておきましょう。

それでも、構文エラーの特定などには十分役立ちます。

それでは、代表的なアンミニファイツールを2つ紹介しましょう。

○Dirty Markup

Dirty Markupは、ミニファイされたHTML、CSS、JavaScriptのコードを整形・復元してくれるオンラインツールです。

コードをテキストエリアに貼り付けて、「Clean」ボタンを押すだけで、見やすく整形されたコードが表示されます。

例えば、先ほどTerserでミニファイしたreverseString関数のコードを、Dirty Markupで整形すると、こうなります。

function reverseString(t) {
    return "" === t ? "" : reverseString(t.substr(1)) + t.charAt(0)
}

スペースや改行が適切に入って、とても読みやすくなりましたね。

変数名（t）は元に戻りませんが、コードの構造は理解しやすくなります。

Dirty Markupには、整形オプションもいくつか用意されています。

例えば、インデントをタブにするか、スペースにするか選べます。

また、「Teach me」ボタンを押すと、整形のルールを学ぶこともできますよ。

○Unminify

Unminifyは、もう少し本格的なアンミニファイツールです。

オンライン版とコマンドライン版の両方があり、JavaScriptだけでなく、CSS、JSONなども扱えます。

オンライン版の使い方は、Dirty Markupとほぼ同じです。

ミニファイ済みのコードを入力エリアに貼り付けて、「Unminify」ボタンを押します。

先ほどのコードをUnminifyで処理すると、このようになります。

function reverseString(t) {
    return "" === t ? "" : reverseString(t.substr(1)) + t.charAt(0)
}

Dirty Markupとほぼ同じ結果ですね。Unminifyのメリットは、コマンドライン版があることです。

コマンドラインなら、大量のファイルを一括処理できます。

コマンドライン版をインストールするには、まずNode.jsが必要です。

インストール済みなら、npmでunminifyをグローバルインストールします。

npm install -g unminify

そして、unminifyコマンドで、ミニファイ済みのファイルを指定します。

unminify input.min.js > output.js

input.min.jsはミニファイ済みのファイル、output.jsは復元後のファイルです。

これで、input.min.jsが整形されて、output.jsに出力されます。

このように、アンミニファイツールを使えば、圧縮されたコードを復元して、デバッグを楽にすることができます。

完璧とは言えませんが、エラーの特定には十分役立つでしょう。

ただし、アンミニファイはあくまで一時的な方便だと心得ておきましょう。

ソースコードの管理は、必ず圧縮前のオリジナルで行うべきです。

アンミニファイしたコードに変更を加えるのは、避けたほうが賢明ですよ。

●ミニファイのベストプラクティス

JavaScriptのコードをミニファイする方法はいろいろありますが、やみくもに圧縮率を上げればいいというものではありません。

過度な圧縮は、かえってコードの可読性を損ない、メンテナンス性を下げてしまうことがあるのです。

ですから、ミニファイを行う際は、適度なバランスを保つことが大切です。

可読性と圧縮率のトレードオフを考慮しながら、プロジェクトに適したベストプラクティスを見つけていきましょう。

ここからは、私がこれまでの経験から学んだ、ミニファイのベストプラクティスを3つ紹介していきます。

○可読性を保ちつつ圧縮する

ミニファイの目的は、ファイルサイズを減らすことでWebサイトのパフォーマンスを改善することです。

しかし、それと同時に、コードの可読性も重要な要素です。

特に、チームで開発を行う場合、他のメンバーがコードを理解しやすいことが求められます。

そこで、ミニファイのレベルは適度に抑えめにすることをおすすめします。

例えば、UglifyJSやTerserの圧縮オプションでは、コメントや空白を残すオプションがあります。

これらを活用して、ある程度の可読性を維持するのが賢明でしょう。

具体的には、こんな感じです。

uglifyjs input.js --compress --mangle --comments --output output.js

–compressと–mangleで圧縮と難読化を行いつつ、–commentsでコメントを残しています。

これなら、ある程度の可読性を保ちながら、ファイルサイズを削減できます。

完全な圧縮よりも、少し冗長でも構わないと考えています。

可読性が損なわれると、バグの発見が難しくなったり、コードの再利用が困難になったりします。

長期的に見れば、適度な圧縮が開発効率につながるでしょう。

○ソースマップを活用する

ミニファイしたコードは、デバッグが難しくなるというデメリットがあります。

特に、本番環境で問題が起きた時、ミニファイ済みのコードからエラーの原因を特定するのは一苦労です。

そんな時に役立つのが、ソースマップです。

ソースマップとは、ミニファイ済みのコードと元のコードを対応づける情報のことです。

ソースマップがあれば、ブラウザの開発者ツールでミニファイ前のコードを参照できるので、デバッグがとてもラクになります。

多くのミニファイツールは、ソースマップの生成オプションを持っています。

例えば、UglifyJSではこのようにします。

uglifyjs input.js --compress --mangle --source-map output.js.map --output output.js

–source-mapオプションで、ソースマップファイル（output.js.map）を指定しています。

これで、output.jsと一緒にソースマップが生成されます。

本番環境でエラーが発生した場合、ソースマップを使って元のコードを特定し、素早く問題を解決できます。

ただし、ソースマップにはオリジナルのコードが含まれているので、機密情報が漏洩しないよう注意が必要ですね。

○圧縮前後でテストする

JavaScriptのコードをミニファイすると、予期せぬエラーが発生することがあります。

特に、UglifyJSやTerserの高度な最適化オプションを使った場合、コードの動作が変わってしまう可能性があります。

ですから、ミニファイ後のコードは、必ず動作確認をすべきです。

単体テストやE2Eテストを実行して、機能に問題がないことを確かめましょう。

もしテストがない場合は、少なくとも主要な機能を手動でチェックすることをおすすめします。

形だけのミニファイでは意味がありません。正しく動作することが何より大切です。

実際に、こんな経験をしたことがあります。

あるプロジェクトで、ミニファイ後のコードが原因で、特定のブラウザでエラーが発生したのです。

事前にテストをしていれば防げた問題でした。それ以来、ミニファイ前後のテストは欠かせない習慣になりましたね。

このように、ミニファイには適切なベストプラクティスがあります。

可読性と圧縮率のバランス、ソースマップの活用、ミニファイ後のテスト。

これらを意識することで、効果的なミニファイができるはずです。

チーム内でベストプラクティスを共有し、全員が同じ方針でミニファイできると理想的ですね。

ミニファイの設定をプロジェクトのビルドプロセスに組み込んでおくのもいいアイデアだと思います。

●ミニファイによくあるエラーと対処法

JavaScriptのコードをミニファイすると、時として予期せぬエラーが発生することがあります。

特に、高度な圧縮オプションを使った場合、コードの動作が変わってしまうことも。

でも、エラーは怖がらなくて大丈夫です。

ミニファイツールの特性を理解し、適切に対処すれば、問題なくミニファイを活用できるはずです。

そこで、ここではミニファイによくあるエラーと、その対処法を3つ紹介しましょう。

○構文エラー

ミニファイツールは、JavaScriptの構文に沿ってコードを解析し、圧縮・最適化を行います。

ですから、もとのコードに構文エラーがあると、ミニファイ処理自体が失敗してしまいます。

例えば、こんなコードがあったとします。

function greet(name) {
  console.log("Hello, " + name)

最後のカッコ（}）が抜けていますね。

これをUglifyJSでミニファイしようとすると、このようなエラーが発生します。

ERROR: Unexpected token: eof (undefined)

“Unexpected token: eof”は、”予期せぬ終端”という意味です。

つまり、UglifyJSが関数の終わりを示すカッコを期待していたのに、ファイルが終わってしまったということですね。

このようなエラーが出た場合は、まずオリジナルのコードを見直し、構文エラーがないか確認しましょう。

IDEの構文チェック機能などを使えば、エラーの特定は簡単です。

エラーを修正したら、再度ミニファイを実行します。構文が正しければ、エラーなくミニファイが完了するはずです。

○未定義の変数

JavaScriptでは、変数を使う前に宣言するのが基本ルールです。

しかし、うっかり宣言を忘れて変数を使ってしまうことがありますよね。

未定義の変数を使おうとすると、通常は”ReferenceError”が発生します。

ところが、ミニファイツールは、未定義の変数をエラーとして扱わない場合があります。

代わりに、未定義の変数を”undefined”として圧縮してしまうのです。

例えば、こんなコードがあったとします。

function showMessage() {
  console.log(message);
}

“message”変数は宣言されていませんね。

これをTerserでミニファイすると、こうなります。

function showMessage(){console.log(void 0)}

“message”が”void 0″（つまり”undefined”）に置き換えられています。

これでは、本来の意図とは違う動作になってしまいます。

未定義の変数によるエラーを防ぐには、”use strict”ディレクティブを使うのが効果的です。

関数の先頭や、ファイルの先頭に”use strict”を追加すると、未定義の変数の使用がエラーになります。

"use strict";
function showMessage() {
  console.log(message);
}

このコードをミニファイしようとすると、”message is not defined”というエラーが発生します。

未定義の変数が、あらかじめエラーとして検出されるわけですね。

“use strict”は、コードの品質を高める良い習慣だと思います。ミニファイとの相性も抜群ですよ。

○デバッグの難しさ

ミニファイされたコードは、空白や改行が削除され、変数名も短くなります。

そのため、コードの可読性が下がり、デバッグが難しくなるのが悩ましいところです。

特に、本番環境でエラーが発生した時、ミニファイ済みのコードからエラーの原因を特定するのは一苦労ですよね。

でも、ソースマップを活用すれば、デバッグはだいぶ楽になります。

ソースマップとは、ミニファイ済みのコードと元のコードを対応づける情報のことです。

ソースマップがあれば、ブラウザの開発者ツールで、ミニファイ前のコードを参照できるようになります。

多くのミニファイツールは、ソースマップの生成オプションを持っています。

例えば、UglifyJSではこのようにします。

uglifyjs input.js --compress --mangle --source-map output.js.map --output output.js

–source-mapオプションで、ソースマップファイル（output.js.map）を指定しています。

これで、output.jsと一緒にソースマップが生成されます。

あとは、ソースマップをブラウザの開発者ツールで有効にするだけ。

Chromeなら、開発者ツールの設定で”Enable JavaScript source maps”をオンにします。

これで、開発者ツールのソースタブに、オリジナルのコードが表示されるようになります。

コードにブレークポイントを設定したり、ステップ実行したりできるので、デバッグがとてもスムーズになりますよ。

ただし、ソースマップにはオリジナルのコードが含まれているので、機密情報が漏洩しないよう注意が必要ですね。

まとめ

JavaScriptのミニファイは、Webサイトのパフォーマンスを改善するために欠かせない技術です。

オンラインツール、VSCodeの拡張機能、コマンドラインツールなど、さまざまな方法でミニファイを実践できます。

ミニファイを効果的に活用するには、可読性と圧縮率のバランス、ソースマップの活用、圧縮前後のテストなど、ベストプラクティスを押さえることが大切です。

また、ミニファイ特有のエラーにも適切に対処する必要があります。

JavaScriptのミニファイは、ファイルサイズの削減とWebサイトのパフォーマンス改善という2つのメリットをもたらします。

今回学んだテクニックを活かして、開発現場でミニファイを積極的に活用していきましょう。