Terser で JavaScript を圧縮します — コメントと空白を取り除き、ローカル変数名を短くし、式を単純化します。逆に圧縮済みのコードを読みやすく整形することもでき、実際のパーサーを使うのでアロー関数・クラス・オプショナルチェーンなどの最新構文も正しく扱い、構文エラーがあれば壊れた出力ではなく位置を示すメッセージを返します。
圧縮と整形の違い
圧縮はJavaScriptを動作する最小サイズまで縮小します。コメントと空白を取り除き、ローカル変数名を短縮し、式を簡略化します。本物のJavaScriptパーサーであるTerserを使用しているため、モダンな構文(アロー関数、テンプレートリテラル、クラス、オプショナルチェーン)も単純な置換で壊されることなく正しく処理されます。コードに構文エラーがある場合は、その箇所を示すわかりやすいメッセージが表示されます。整形はその逆で、圧縮済みや乱れたコードを再インデントして再び読みやすくします。
JavaScript圧縮ツールの使い方
- 貼り付け — 圧縮または整形したいJavaScriptを上の入力欄に貼り付けます。
- インデントを選択 — スペース2つ・4つ・タブから選びます(整形結果にのみ適用され、圧縮には影響しません)。
- 実行 — 「圧縮」または「整形」ボタンを押します。圧縮を初めて押すと、Terserライブラリを一度だけ取得してから実行されます。
- コピー — 削減されたサイズ表示を確認し、「コピー」ボタンで結果をクリップボードに入れます。
モダンな構文(アロー関数・クラスなど)も安全に圧縮されますか?
はい。圧縮は本物のJavaScriptパーサーであるTerserで行われるため、アロー関数、テンプレートリテラル、クラス、オプショナルチェーン、分割代入といったモダンなES構文も正確に理解して処理します。正規表現リテラルや文字列内のコメントのように見えるテキストなど、単純な置換方式では壊れていた箇所もそのまま保持されます。
圧縮するとコードの動作は変わりますか?
変わりません。Terserはコードの動作をそのまま維持する変換だけを行います。ローカル変数名の短縮、デッドコードの除去、式の簡略化などはすべて結果が同じになるよう安全に行われます。ただし、グローバル変数名や関数名など外部に公開される識別子は、他のコードから参照される可能性があるため勝手には変更しません。
構文エラーがあるとどうなりますか?
Terserはコードを実際にパースするため、括弧の対応が合わない、または不正なトークンといった構文エラーがあると圧縮を中断し、問題が発生した位置(行・列)を示すわかりやすいエラーメッセージを表示します。黙って誤った結果を出すのではなく、どこを直せばよいかを教えてくれるので、メッセージが示す箇所を修正してからもう一度試せば済みます。
コードはアップロードされますか?最初の圧縮で少し待つのはなぜですか?
何もアップロードされません。すべてブラウザ内で動作します。Terser圧縮ライブラリは大きいため、このページを高速に読み込めるよう、最初に圧縮を押したときにのみ取得されます(一度だけ短い「圧縮中…」の待ち時間が表示されることがあります)。その後はキャッシュされます。整形は即座に実行されます。完了すると、サイズ表示で圧縮によって何バイト削減できたかがわかり、コピーで結果をクリップボードに貼り付けられます。