JavaScript フォーマッター & ミニファイア

選んだインデントで JavaScript を整形したり、転送サイズを減らすために圧縮できます。Prettier と Terser はブラウザ内で動作し、貼り付けたコードは端末から送信されません。

ブラウザ内でローカルに実行

ブラウザで JavaScript を整形・圧縮する手順

Format は人が読みやすいように書き直し、Minify はサーバーが送るバイト数を減らすように書き直します。整形は Prettier 3.9.6、圧縮は Terser 5.44.0 が担当し、どちらもこのサイトの /static/vendor から配信されて、タブ内のテキストだけを扱います。

インデントの選択は Format だけに効きます(タブ、2・4・8 スペース、既定は 4 スペース)。整形は引用符・空白・改行を変えるだけで、プログラムの内容は変わりません。圧縮は式の畳み込みやローカル名の短縮まで行うため、書き換えられたコードとして動作確認が必要です。

  1. 上の入力欄にスクリプトを貼り付けます。先頭の可視文字が < の場合は、このページの HTML フォーマッターが処理します。
  2. インデント(タブ、2、4、8 スペース)を選び、Format を押すと読みやすいコードになります。
  3. Minify を押すと圧縮結果が得られます。結果の下の行に「128 → 77 文字 · 40% 削減」のようにサイズが出ます。
  4. Copy で結果を取得し、Clear で入力欄を空にします。解析できない場合はエンジン自身のエラーが結果の位置に表示され、行と列を示します。

2 つのボタンが使うエンジンと、コードに加わる変更

Format がコードに加える変更

Prettier はスクリプトを解析し、決まったスタイルで出力し直します。文字列は二重引用符になり、抜けていたセミコロンが補われ、選んだインデントが適用され、80 桁を超える行は分割されます。300 文の関数を入れると、コメントも含めて 1 文ずつそのまま返ってきました。変わったのはレイアウトだけです。

解析器を通して出力するため、結果は他の環境でも予測できます。ここで整形できるコードは Node.js やバンドラーでも解析でき、失敗するコードは同じ理由で失敗します。エラーは解析器の文言そのままで、const x: number = 1 は該当行を示す「Unexpected token (1:8)」になります。整形に使う babel 解析器に TypeScript プラグインが入っていないためです。

Minify が変えるもの、確認すべきこと

Terser は圧縮を 1 回行い、関数内の名前を短縮します。最上位の名前はそのまま残るので、エクスポートした関数は他のモジュールが読み込む名前を保ちます。コメントは削除されますが、/*! で始まるバナーや @license を含むものは残ります。定数畳み込みは名前の短縮より踏み込み、299 個の定数を足す 300 行の関数は「function longName(n,e){return n+e+299}」になり、11,534 文字が 38 文字になりました。

つまり圧縮後のコードは元のコードそのものではありません。文字列とテンプレートの中身は保たれ、クラスのプライベートフィールド、オプショナルチェーン、BigInt リテラルも正しく通りますが、置換のないテンプレートは通常の文字列になることがあります。配布前に圧縮後のファイルを一度実行してください。結果の下のサイズ行が効果を示します。

モダンな構文と解析器の限界

整形は JSX、シバン行、import data from "./d.json" with { type: "json" } のようなインポート属性、トップレベル await を扱えます。圧縮はまず古典的なスクリプトとして解析し、失敗すると ES モジュールとして再試行するため、import・export・トップレベル await は圧縮でき、with のような非 strict モード専用の構文はスクリプトの経路を通ります。両方失敗した場合は、より深くまで読めた方のエラーを表示します。

貼り付ける前に知っておきたい限界が 2 つあります。TypeScript の型注釈は解析対象外で、const x: number = 1 は整形結果ではなく構文エラーになります。また Terser は JSX を解析できないため、JSX コンポーネントは整形できても圧縮は拒否され、最初のタグを示す「Unexpected token: operator (<) (line 1, column 19)」が返ります。トランスパイル後のビルドを圧縮してください。

ダウンロード、速度、プライバシー

Format を最初に押すとこのサイトから 3 つのファイル(Prettier standalone と babel・estree プラグイン、合計約 600 KB)を、Minify を最初に押すと Terser のバンドル(約 1 MB)を読み込みます。以降はブラウザーのキャッシュから読み込むため追加のリクエストは発生せず、ネットワークを切った状態でも動作します。

500 個の関数をエクスポートする 68 KB のモジュールは、デスクトップ版 Chrome で整形が約 250 ミリ秒、圧縮が約 230 ミリ秒でした。貼り付けた内容は送信されません。ツールが行うリクエストはエンジン自身のファイルだけで、入力テキスト・構文木・結果はタブ内にとどまります。

最近使ったツール: