JavaScriptの圧縮：何が削除され、どれだけ節約できるか

ウェブではすべてのバイトが重要です。パフォーマンスブログでよく見かける言葉ですが、私は何度も痛い目を見てきたので本当にそう思っています。数年前、シンプルなはずのマーケティングページがなぜかもっさりしている原因を調べていたら、圧縮されていないjQueryプラグイン3つで合計340KBになっていたことが判明しました。圧縮したら98KBになりました。高速な接続では劇的な差ではありませんが、モバイルでは？天と地の差でした。

JavaScriptの圧縮について話しましょう——実際に何が起きるのか、何が起きないのか、そしてシンプルなオンラインツールで十分な場合とビルドパイプラインを構築すべき場合を解説します。

ミニファイが実際に削除するもの

ミニファイはJavaScriptエンジンがコードを実行するために必要のない文字をJSファイルから除去します。最も一般的に削除されるもの：

コメント。 単一行（// ...）と複数行（/* ... */）の両方。コメントが多いコードでは最も大きな節約になります。

空白と改行。 インデントに使われるスペース、関数間の空行、=や+などの演算子周りのスペース。

省略可能なセミコロン。 一部のミニファイヤは、JavaScriptの自動セミコロン挿入（ASI）によって冗長になるセミコロンを削除します。コードがASIルールのギリギリのところにある場合、これが稀に問題を引き起こすことがあります——詳しくは後述。

高度な処理：変数のリネーム。 より強力なミニファイヤ（Terser、UglifyJS）はローカル変数をcurrentUserIndexのような説明的な名前からaのような1文字にリネームします。文字数を減らすだけでなく、コードのリバースエンジニアリングも困難にします。

JSミニファイヤのオンラインツールは基本的な処理を行います：コメントの削除と空白の圧縮。変数はリネームされませんが、ほとんどの簡単な作業ではそれで十分です。

実際にどれくらいのサイズを節約できるか？

コードの種類によって大きく異なります。現実的な数値を示しましょう：

コメントが多いユーティリティコード： 200KB → 95KB（52%削減）——コメントがファイルの半分を占めることもあるため節約が大きい。

フレームワークのソースコード（既に最適化済み）： 150KB → 130KB（13%削減）——すでに無駄がなく、削除できるものが少ない。

一般的なアプリケーションコード： 50KB → 32KB（36%削減）——妥当な目安。

本当の問題は：あなたの状況においてファイルサイズが重要かどうかです。3KBのユーティリティスクリプトを配信しているなら、圧縮しても1KB程度の節約にしかなりません。それも無意味ではありませんが、ビルドシステムを構築する価値はないかもしれません。500KBのアプリケーションロジックを配信しているなら、圧縮は絶対に重要です。

ファイルサイズ以外にも隠れた利点があります：パース時間。テキストが少なければJavaScriptエンジンはファイルをより速くパースできます。ローエンドのAndroidデバイスでは、これがインタラクティブになるまでの時間に顕著な差をもたらすことがあります。

基本的な圧縮の限界

正直なところを話しましょう。JSミニファイヤツールやほとんどの基本的なregexベースのミニファイヤには本当の限界があります：

すべてを安全に処理できるわけではありません。 JavaScriptには構文的なエッジケースがあります。正規表現ベースのコメント削除は、//や/*パターンを含むテンプレートリテラルや、コメントのようなシーケンスを含む文字列を誤って破壊することがあります。

変数のリネームなし。 空白の削除でファイルは小さくなりますが、変数名は長いままです。徹底した最適化にはTerserが必要です。

デッドコードの除去なし。 高度なツールは関数をインポートしても一度も呼び出さないことを検出してそれを丸ごと削除できます。基本的なミニファイヤにはそれができません。

ツリーシェイキングなし。 モダンなバンドラーは使用されていない場合にバンドル全体からモジュールを除去できます。これは厳密にはミニファイではありませんが、関連しており、はるかに強力です。

では、基本的なオンラインミニファイヤはいつ使うべきでしょうか？

• 小さくて自己完結したスクリプト（アナリティクススニペット、ウィジェットの埋め込みコード）を持っている場合
• ビルドプロセスのない静的なHTMLページで作業している場合
• 特定のスニペットに対してミニファイしたコードがどう見えるかを素早く確認したい場合
• ビルドツールのないレガシープロジェクトを引き継いで、今日はそれを追加しない場合

ビルドプロセスがあるもの——Reactアプリ、Vue、Svelte、シンプルなWebpackの設定でも——は、ビルドツールに自動的に圧縮を任せましょう。CI/CDパイプラインの一部としてコードをオンラインツールにコピー&ペーストするべきではありません。

問題が起きる場合

基本的な圧縮がコードを壊すケースをいくつか見てきました：

ASIへの依存。 次のようなコード：

return
  {
    value: 1
  }

JavaScriptではASIにより（エンジンがreturnの後にセミコロンを挿入するため）undefinedが返されます。積極的に改行を削除するミニファイヤはreturn{value:1}に変換するかもしれません——これは実際には問題なくオブジェクトを返します。しかし他のASI敏感なパターンでは逆の方向に行く可能性があります。

EvalやFunctionコンストラクタ。 実行時に関数文字列を構築して評価するコードは変数のリネームとの相性が悪いです（実行時の文字列は元の名前を使い続けるため）。基本的な空白の圧縮は通常安全ですが、注意が必要です。

正規表現リテラルと除算。 正規表現ベースのミニファイヤは/pattern/flagsと除算演算子を混同することがあります。良いミニファイヤはこれを適切に処理しますが、単純なものは正規表現を破壊するかもしれません。

経験則：圧縮後はテストを実行してください。何か壊れたら、壊れた部分の周辺の圧縮済み出力を確認してください。

圧縮と他の最適化の組み合わせ

圧縮はより広いパフォーマンス戦略の一部として最も効果を発揮します：

Gzip/Brotli圧縮。 ウェブサーバーはファイルを送信前に圧縮するべきです。圧縮されたJavaScriptも繰り返しパターンのために良く圧縮されます。ミニファイ+圧縮の組み合わせは通常、元のファイルサイズを60〜80%削減します。

バンドリング。 複数の小さなJSファイルにはHTTPリクエストのオーバーヘッドがあります。esbuildやWebpackのようなツールで1つのファイルにバンドルすることは、ミニファイだけより大きな効果をもたらすことがあります。

コード分割。 50KBしか必要としないユーザーに500KBのJSを提供しないでください。ダイナミックインポートによるレイジーローディングとコード分割は、現在のページに必要なものだけを配信することを可能にします。

defer/asyncローディング。 <script>タグにdeferまたはasyncを追加すると、JSがHTMLのパースをブロックするのを防ぎます。適切にdeferされた200KBのスクリプトは、ブロッキングな50KBのものよりも良いUXです。

CSSも圧縮するなら、CSSミニファイヤツールを確認してください。HTMLにはHTMLミニファイヤがあります。組み合わせることで、ページの総転送サイズをかなり削減できます。

オンラインJSミニファイヤの使い方

JSミニファイヤツールはシンプルです：

1. JavaScriptを入力フィールドに貼り付ける
2. 圧縮をクリックしてコメントと空白を削除する
3. またはフォーマットをクリックして既に圧縮されたコードを整形する（どこかから圧縮済みバンドルを入手して読みたい場合に便利）
4. バイト数の前後サイズと節約されたパーセントを確認する
5. 出力をコピーする

すべてブラウザ内で実行されます——あなたのコードはマシンから外に出ません。APIキーやビジネスロジックが含まれるコードをランダムなサードパーティサービスに貼り付けたくない場合に重要です。

難読化についての注意

圧縮と難読化を混同する人もいます。両者は関連していますが異なります：

• **圧縮（ミニファイ）**はコードを小さくして転送を速くする
• 難読化はコードを読みにくく理解しにくくする

Terserの変数リネームは圧縮の副作用としての軽度な難読化です。本格的な難読化ツールはさらに踏み込みます——すべてを_0x1a2bにリネームし、デッドコードを挿入し、文字列をエンコードします。これはパフォーマンスを改善せず（多くの場合コードが大きくなります）、本気のリバースエンジニアリングを防ぎません。必要な労力を増やすだけです。

クライアントサイドのコードを保護しようとしているなら、難読化はスピードバンプであって壁ではありません。本当の答えは：クライアントサイドのJavaScriptに秘密を入れないことです。

まとめ

圧縮は小さいながらも本物の効果があります——ユーザーが実際にダウンロードするコードには実施する価値があります。素早い作業にはオンラインツールが本当に適切な選択です：セットアップなし、依存関係なし、貼り付けるだけで完了。プロダクション品質のビルドプロセスがあるものには、ビルドツールに自動的に処理させましょう。

JSミニファイヤツールは一般的なケースをうまく処理します。深い最適化——変数のリネーム、ツリーシェイキング、デッドコードの除去——にはTerserかモダンなバンドラーが必要です。両者にはそれぞれの役割があります。

最後に一つ：常に圧縮前のソースを保持してください。圧縮されたコードを読みやすい形式に戻すことはできません（フォーマットボットは空白を追加できますが、a、b、cにリネームされた変数名は復元できません）。ソースを保持し、バージョン管理にコミットし、ビルドプロセスに圧縮済みの出力を生成させてください。