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

このツールとは？

JavaScriptミニファイアは、動作を変えずにコードをできる限り小さく書き換えます。安全な範囲で変数名や関数名を短縮し、コメントや空白を削除し、定数を畳み込み、到達不能なコードを除去します。

このツールはTerserを基盤としています。Terserはwebpack、Vite、Rollupなど、ほとんどの最新JavaScriptビルドツールで使われているASTベースのミニファイアです。テキストパターンマッチングではなくコードを実際に解析するため、除算演算子と正規表現リテラルを正しく区別し、//に似たシーケンスを含むテンプレート文字列を壊さず、外側のスコープにある何かと衝突する名前に変数を変更することもありません。

なぜこれを使うのか？

• 主要なバンドラーでも使われているのと同じエンジンによるASTベースのミニファイ（Terser） — 正規表現リテラル、テンプレート文字列、クロージャでも安全。
• 単なる空白除去ではなく、変数名を短縮することで実質的なサイズ削減を実現。
• 何バイト、何パーセント削減できたかを正確に確認できます。
• フォーマットモードでは、難読化された1行のミニファイ済みJSを読みやすいインデント付きコードに戻せます。サードパーティスクリプトの理解にも便利です。
• 処理は100%ローカル — 独自コードがブラウザの外に出ることはありません。

使い方

1. 入力欄にJavaScriptを貼り付けるか、「例を読み込む」をクリックして正規表現リテラルとテンプレート文字列を含むサンプルを試してください。
2. 「ミニファイ」をクリックして圧縮するか、「フォーマット」をクリックして2スペースインデントで整形します。
3. 入力欄の下のメッセージを確認してください — ミニファイモードではサイズ削減量が表示され、コードに構文エラーがある場合は、壊れた結果を黙って出力する代わりに明確なメッセージが表示されます。
4. 「コピー」をクリックして結果を取得します。

例

入力

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

出力

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

変数名が短縮され、コメントとif文は式に折りたたまれますが、正規表現リテラルとテンプレート文字列はそのまま保持され、動作は変わりません。

実用的なヒント

• ミニファイは手作業ではなくビルド時に行いましょう — 読みやすいソースをバージョン管理下に置き、ビルドステップとしてミニファイ済みバンドルを生成します。
• ミニファイされた出力が予期しない動作をする場合は、Function.prototype.nameやリフレクションに依存しているコードがないか確認してください。名前の短縮によって関数がリネームされ、まれなエッジケースで表面化することがあります。
• サードパーティスクリプトを読む前にフォーマットすると、2000文字の1行を目で追うよりもはるかに速く理解できます。
• デプロイ用の静的バンドル一式を準備している場合は、下記のHTML・CSSミニファイアと組み合わせて使用してください。

実際のワークフローにおける位置づけ

JavaScriptは通常、ページ上で最もレンダリングやパースをブロックするリソースであるため、ミニファイすることで読み込み時間に実際に測定可能な効果があります。バイト単位で比較すればHTMLやCSSよりも影響が大きいです。ほとんどの最新フレームワークはビルド時に自動でこれを行いますが、手書きのスクリプト、ブラウザ拡張機能、ブックマークレットは、誰かがこのようなツールにかけない限りミニファイされずに出荷されることが多いです。

フォーマット方向は逆の用途でもよく使われます。ミニファイされたスタックトレースから本番のエラーをデバッグする作業は、元の変数名がなくても周囲のコードを整形して読みやすくするだけで大幅に楽になります。

→ HTMLミニファイア · CSSミニファイア

一般的な利用例

• 公開前に単体のスクリプトやブックマークレットを縮小する。
• 本番サイトから取得したミニファイ済みスクリプトを整形して、その内容を理解する。
• フォーラムの投稿やAI生成のスニペットから貼り付けたJavaScriptを、じっくり読む前にクリーンアップする。
• 手書きのJSスニペットに構文エラーがないかを素早く確認する。解析エラーは明確なメッセージとして表示されます。

よくある質問