JavaScript整形・圧縮ツールとは

JavaScript整形・圧縮ツールは、圧縮されて1行になったJavaScriptを読める形に戻したり、逆に配信用へ圧縮したりできるツールです。

公開されているサイトのJSファイルは、ほとんどが圧縮されていて変数名も1文字に置き換えられています。整形すれば構造は追えるようになり、どこで何をしているかを読み解けます（変数名そのものは元に戻りません）。

圧縮にはTerserを使います。空白を削るだけでなく、ローカル変数名の短縮、到達しないコードの除去、式の簡約まで行うため、実運用に耐える圧縮率が得られます。ライブラリは「圧縮する」を押した時点で読み込むので、整形だけならページは軽いままです。

JavaScript整形・圧縮ツールの使い方

戻せません。圧縮の過程で userName のような名前は a などに置き換えられ、元の名前はファイルに残っていません。ソースマップ（.map ファイル）が公開されている場合に限り、元のソースを復元できます。

圧縮は失敗し、エラーの内容と位置が表示されます。整形のほうは多少壊れたコードでも動くことがありますが、結果は信用しないでください。

オプショナルチェーン（?.）、Null合体演算子（??）、クラスフィールド、トップレベル await など、近年の構文に対応しています。JSXやTypeScriptの構文はそのままでは扱えません。

コードの書き方によりますが、整形済みのコードから40〜60%程度になることが多いです。長い変数名やコメントが多いコードほど効果が大きくなります。

いいえ。整形も圧縮もブラウザ内で完結します。圧縮ライブラリをCDNから取得しますが、コードそのものが外部に送られることはありません。

圧縮されたコードを整形すると、まず目に入るのは無数の1文字変数です。全体を読もうとせず、文字列リテラルやAPIのURL、fetch や addEventListener といった特徴的な呼び出しを手がかりに、関心のある箇所だけを追うと早く目的にたどり着けます。