JSミニファイアー

JSミニファイアーは、JavaScriptから不要な文字を取り除き、圧縮前後の文字数を表示する無料ツールです。

JavaScriptを圧縮すると何が改善されますか？

JavaScriptを圧縮すると、ブラウザがダウンロードするソースコードの量を減らせます。一般には、JavaScriptの構文上不要なインデント、改行、空白などの書式が削除されます。

スクリプトを小さくすれば、特に複数の大きなバンドルを配信するサイトで、転送量や解析処理を減らせます。ただし、BrotliやgzipなどのHTTP圧縮も引き続き重要です。ミニファイと転送時の圧縮では、解決する問題が異なります。ミニファイはソースコードから文字を削除し、転送時の圧縮は繰り返されるデータをよりコンパクトに符号化します。

通常、ミニファイはデプロイ前のビルド工程で行います。未圧縮のサードパーティ製スクリプトを確認する場合、バンドルサイズを比較する場合、ビルドパイプラインのないサイト向けに単独ファイルを用意する場合にも便利です。

ミニファイが成功しても、JavaScriptが正しく動くとは限りません。不正なAPI呼び出し、参照できない変数、実行時にしか発生しないエラーが残っている可能性があります。

JSミニファイアーの使い方は？

JavaScriptをJS欄に貼り付けてツールを実行し、圧縮済みJSに返された内容をコピーします。読みやすい元のソースを置き換えるのではなく、元ファイルはバージョン管理に残し、圧縮版をデプロイしてください。

1. まず、元のソースコードに対して構文チェック、リンター、自動テストを実行します。
2. そのファイルに含まれるモジュールのimport文やラッパー関数も含め、スクリプト全体をJSに貼り付けます。
3. JSの文字数と圧縮済みJSの文字数を確認し、文字数がどの程度変わったかを比較します。
4. 圧縮後のJavaScriptが、本番ファイルと同じブラウザおよびデプロイ環境で正しく実行されることをテストします。
5. 圧縮版と読みやすい版を一緒に保存する場合は、app.min.jsのように判別しやすいファイル名を使います。

処理はサーバー上で行われます。入力内容はHTTPS経由でサーバーへ送信され、保存されません。ただし、処理のためにサーバーがJavaScriptを受信する必要があります。所属組織の規定で外部サービスへの送信が禁止されているソースコードは入力しないでください。

圧縮結果には何が含まれますか？

結果には、圧縮されたJavaScriptと2つの文字数が含まれます。JSの文字数は入力の長さ、圧縮済みJSの文字数は返された圧縮済みJSの長さです。

文字数はPHPのmb_strlen関数で算出されます。この関数は単純なバイト数ではなく、マルチバイト文字列の長さを測ります。そのため、文字数と最終的なネットワーク転送量は同じではありません。UTF-8文字は1文字が複数バイトになることがあり、gzipやBrotliを使えば転送ファイルをさらに小さくできます。

このツールには、独立した検証結果や診断結果の欄はありません。閉じ括弧の不足、不正な正規表現、未対応の言語機能をすべて検出できるわけではありません。特に、プロパティ名を引用符で囲んでいない、末尾にカンマがあるといったJSON関連のエラーは、JavaScriptのチェックには適しません。JavaScriptのオブジェクトリテラルとJSONでは構文が異なるためです。JSONデータにはJSONバリデーター＆整形ツールを使用してください。

簡単な例と注意が必要な入力

単純に空白を整理する場合は、次のようになります。

入力

function add(a, b) { return a + b; }

圧縮後

function add(a,b){return a+b;}

オブジェクトのプロパティ値を変えずに、その周囲の書式を削除することもできます。

入力

const settings = { theme: "dark", retries: 2 };

圧縮後

const settings={theme:"dark",retries:2};

具体的な整形結果はミニファイアーによって異なり、特に省略可能なセミコロンの扱いには差があります。すべての空白や改行を削除するだけでは、JavaScriptを安全に圧縮できません。安全なミニファイでは、字句や構文の前後関係を考慮し、単なる書式とプログラムの動作に影響する文字を区別する必要があります。

• 文字列内の空白: 空白もデータです。"Newcastle upon Tyne"に含まれる空白は残す必要があります。
• 記号: 構文の一部になることがあります。a + +bから空白を削除すると、異なるトークン列になる可能性があります。
• 改行: return、break、continueの後に続くコードなどでは、自動セミコロン挿入に影響することがあります。throwの式は同じ行で始める必要があるため、throwの直後に改行を入れることはできません。
• アクセント付き文字や非ラテン文字: 文字列に含められるほか、JavaScriptの識別子規則で許可されていれば識別子にも使用できます。バイト数と文字数が異なる場合があります。
• 数値: 文字数を指定するものではなく、ソースコードのトークンです。より短い同等の表記を選ぶ場合でも、ミニファイアーは数値としての意味を維持しなければなりません。

JavaScriptを圧縮してもあまり意味がないのはどんな場合ですか？

すでに圧縮済みのファイルを再度ミニファイしても、通常は大きな効果がありません。2回目の処理ではほとんど、またはまったくサイズを減らせない一方で、ビルド出力の追跡が難しくなり、既存のソースマップに支障を来す可能性があります。

機械だけが読み取るJavaScriptを、いったん読みやすく整形してから再び圧縮する理由もほとんどありません。保守用には人が読みやすいソースを残し、そこからデプロイ用の成果物を生成してください。既存のアプリケーションでは、モジュールのバンドルやソースマップの生成を自動化できるesbuild、Rollup、webpackなどのビルドツールが一般に適しています。ミニファイ機能が組み込まれている場合もあれば、設定やプラグインで追加する場合もあります。Terserはミニファイ専用のツールです。

ミニファイを難読化やアクセス制御の代わりに使わないでください。関数名や変数名がそのまま残ることがあり、文字列リテラルも読み取れます。また、ブラウザの開発者ツールを使えば圧縮コードを再整形できます。秘密情報、秘密鍵、特権認証情報をクライアント側のJavaScriptに埋め込んではいけません。

ページ内の静的アセットをまとめて準備する場合は、CSS圧縮ツールとHTML圧縮ツールを使って、それぞれの形式に対応する処理を行えます。形式ごとに解析方法や空白の規則が異なるため、必ず個別のツールを使用してください。

よくある質問

ソースマップも生成できますか？

いいえ、ソースマップの出力欄はありません。本番環境のスタックトレースを元のファイルに対応付ける必要がある場合は、圧縮スクリプトと対応する.mapファイルを同じビルド工程で生成してください。別のビルドで作成したソースマップをデプロイすると、行番号や列番号が正しく対応しない可能性があります。

JavaScriptを圧縮すればコピーを防げますか？

いいえ。ブラウザは実行可能なクライアント側コードを受信する必要があるため、訪問者はそのコードをダウンロードして調べられます。ミニファイするとソースは読みにくくなりますが、機密性の確保、ライセンスの強制、埋め込まれた秘密情報の実質的な保護にはなりません。

APIキーを含むコードを貼り付けても大丈夫ですか？

秘密のAPIキー、トークン、非公開の認証情報は貼り付けないでください。入力内容はHTTPS経由で送信され、保存されませんが、処理自体はサーバー上で行われます。すべての訪問者へ意図的に配布する公開ブラウザキーでも、利用先のサービスが対応している場合は、ドメイン、オリジン、クォータ、権限による制限が必要です。

文字数が減れば、ページは必ず速く表示されますか？

いいえ。効果は、元のファイルサイズ、キャッシュ、接続状況、サーバー圧縮、ブラウザが解析して実行するJavaScriptの量によって変わります。合計文字数だけでなく、圧縮後の転送量と実行時の動作も確認してください。

圧縮後も拡張子は.jsのままでいいですか？

はい。圧縮後のJavaScriptでも通常は.js拡張子を使います。両方の版を用意する場合は、圧縮版を.min.jsとするのが一般的な命名規則です。デプロイ前に、サーバーが適切なJavaScriptのコンテンツタイプを送信していること、HTMLまたはモジュールのimport文が目的のファイルを参照していることを確認してください。