Minifier

JS / CSS Minifier + Beautifier

JavaScript または CSS を貼り付けて、Minify をクリックすれば本番用に空白とコメントを削除、Beautify をクリックすれば難読化された / 1 行のコードを読みやすい形に再インデント。言語の自動判定、すべてブラウザ内で動作。

保守的です。コメントを削除し空白を圧縮しますが、識別子のマングル(foo は foo のまま)も、デッドコード除去も、文の並べ替えも行いません。目的は安全で予測可能なバイト削減です。最大限の圧縮が必要な場合は、最終ステップとして Terser や esbuild に通してください。

ありません。トークナイザーは文字列、テンプレートリテラル、正規表現を認識します。"..."、'...'、\`...\`、/regex/flags 内の空白やコメントに見えるシーケンスはそのまま保持されます。ライセンスバナーコメント (/*! ... */) もデフォルトで保持されます。

入力
出力

日々の JS + CSS ワークフローのために

本番用に Minify、デバッグ用に Beautify — そして使うのが楽しくなる、ちょっとした工夫を加えました。

2 つの言語、2 つの変換

JavaScript または CSS を、minify でも beautify でも、1 つのツールで。自動判定がコンテンツの手がかりから言語を選択 — または 言語 ドロップダウンで上書き可能です。

保守的な minify

コメントを削除し空白を圧縮します — ただし識別子のマングルや並べ替え、インライン化は一切行いません。文字列、テンプレートリテラル、正規表現、ライセンスバナーコメント (/*! ... */) はそのまま保持されます。出力はバイト単位で安全です。

難読化 / minify されたコードを整形

1 行に圧縮されたバンドルを貼り付けて Beautify をクリックすれば、読みやすくインデントされたバージョンが得られます — サードパーティスクリプトの調査、本番のスタックトレースのデバッグ、巧妙なコードからの学習に便利です。

サイズ差分を一目で

minify するたびに入力バイト数 → 出力バイト数の差分と削減率を表示。CSS バンドルが本当に小さくなっているか迷う必要はありません。

設計段階からプライバシー重視

コードはあなたの端末から外に出ません。トークナイザー、minifier、beautifier はすべて JavaScript としてローカルで動作します。DevTools → Network を開いて、外部リクエストがゼロであることを確認できます。

小さくて速い

純粋な JavaScript、フレームワークのランタイムなし。コールドロードは gzip 圧縮で 25 KB 未満。200 KB の JS バンドルは普通のノート PC で 50 ms 以内に minify できます。

JS / CSS を minify / beautify する方法

生のコードから本番対応の出力まで、3 ステップ。

  1. 1

    コードを貼り付ける

    入力 ペインに JavaScript または CSS を貼り付けます。ツールがどちらの言語かを自動判定します — または、ソースが曖昧な場合(小さな断片など)は 言語 ドロップダウンから選択してください。

  2. 2

    Minify か Beautify を選ぶ

    Minify をクリックすれば本番用にコメントと空白を削除。Beautify をクリックすれば難読化された / 1 行のコードを適切なインデントで展開します。クリックするたびに即座に再実行されるので、行き来して比較できます。

  3. 3

    コピーまたはダウンロード

    コピーアイコンで出力をクリップボードに送るか、ダウンロードアイコンで output.min.js / output.min.css / output.beauty.js / output.beauty.css として保存できます。サイズ差分(入力 → 出力のバイト数、削減率)が、どれだけ圧縮できたかを正確に示します。

日々の Web 開発作業のために

プライバシーファーストのブラウザツールが、無作為のオンライン minifier にコードを貼り付けるよりも優れている 4 つの一般的なシナリオ。

HTML メールや静的サイト内のインラインスクリプト

静的ページ、トランザクショナルメールテンプレート、埋め込みスニペットでは、1 行のインラインスクリプトやスタイルシートが必要になることがよくあります。読みやすいソースを貼り付けて minify し、結果を <style> や <script> タグに貼り付ければ完了です。

信頼できないサードパーティスクリプトの確認

ベンダーのトラッキングピクセル、広告ネットワークのビーコン、怪しい拡張機能 — これらはすべて minify された 1 行で配布されます。貼り付けて Beautify をクリックし、本番に組み込む前に実際に何をしているのかを読み取れます。

CMS テーマの素早い CSS 監査

WordPress / Shopify / Ghost / Webflow のテーマは、肥大化した CSS が配布されることがよくあります。スタイルシートを貼り付けて beautify し、重複したルールや未使用のセレクターをスキャンします。終わったら、整理したバージョンを再び 1 行に minify します。

サードパーティに渡せない機密コード

API キー、機密情報、ビジネスロジックを含む内部スクリプト — クラウド minifier に貼り付けられないものすべて。ブラウザ完結型のツールなら、すべてのバイトをノート PC 内に保ちます。DevTools → Network を開いて、何も外に出ていないことを確認できます。

100% プライベート — ブラウザ内で動作

コードがあなたの端末から出ることはありません。DevTools → Network を開けば、minify や beautify の実行中に外部リクエストがゼロであることが確認できます。

  • トークナイザー、minifier、beautifier はすべてあなたのマシン上の JavaScript として動作します — Terser も esbuild も、サードパーティ API も使用しません。
  • ライセンスバナーコメント (/*! ... */) はデフォルトで保持されるので、オープンソースライブラリのライセンスで義務付けられている帰属表示を誤って削除してしまう心配はありません。
  • ログイン不要、コード内容のテレメトリーなし。Cookie は同意状態用に 1 つ、言語設定用に 1 つだけ使用しています。

関連ガイド

JS / CSS の minify、コード整形、バンドルサイズ管理に関する厳選記事。

よくある質問

minifier はどのくらい積極的ですか?

保守的です。コメントを削除し空白を圧縮しますが、識別子のマングル(foo は foo のまま)も、デッドコード除去も、文の並べ替えも行いません。目的は安全で予測可能なバイト削減です。最大限の圧縮が必要な場合は、最終ステップとして Terser や esbuild に通してください。

文字列、テンプレートリテラル、正規表現が壊れることはありますか?

ありません。トークナイザーは文字列、テンプレートリテラル、正規表現を認識します。"..."、'...'、\`...\`、/regex/flags 内の空白やコメントに見えるシーケンスはそのまま保持されます。ライセンスバナーコメント (/*! ... */) もデフォルトで保持されます。

CSS minifier はネストされたルールや @media クエリに対応していますか?

対応しています。ネストされたルール、@media、@keyframes、@font-face、@layer、@container、@supports、CSS カスタムプロパティ (--var) はすべて安全に minify できます。カンマ区切りのセレクターリストは保持され、意味のない空白だけが圧縮されます。

1 行に minify されたバンドルを beautify できますか?

それこそ Beautify の用途です。minify された JS / CSS を貼り付けて Beautify をクリックすれば、再インデントされたバージョンが得られます。beautifier はセマンティクスを変えず、ブラケットの深さに基づいて改行とインデントを追加するだけです。どのように minify されたかに関わらず、有効な入力であれば動作します。

サーバーに何か送信されますか?

いいえ。トークナイザー、minifier、beautifier はすべてあなたの端末上の JavaScript で動作します。DevTools → Network を開けば、minify や beautify の実行中に外部リクエストがゼロであることを確認できます。API キー、機密情報、独自コードを貼り付けても — 何もあなたの PC から出ていきません。