処理はすべてブラウザ内のJavaScriptで実行され、コードは外部送信されません。文字列・正規表現・コメント、およびHTMLのpre/textareaの中身は保護します。本ツールはASTを完全解析する本格ミニファイアではなく軽量なテキストベース整形ツールのため、一般的なコードで安全に効く範囲の圧縮・整形を行います。
JS/CSS/HTML Minify・整形ツールの使い方
JavaScript・CSS・HTMLのコードを、ブラウザだけで圧縮(Minify)したり整形(Beautify)したりできる無料ツールです。まず「言語」で対象を選び、「モード」で圧縮か整形を選択したら、左の入力欄にコードを貼り付けるだけで、右の出力欄に結果がリアルタイムで表示されます。圧縮前後のバイト数と削減率も自動で計算されるので、どれだけ軽量化できたかがひと目で分かります。
圧縮(Minify)はコメントや改行・インデントといった動作に不要な空白を取り除き、ファイルサイズを小さくして通信量を減らします。整形(Beautify)は逆に、1行に詰まったコードや乱れたコードへ改行とインデントを付け直し、人が読みやすい形に整えます。整形モードではインデント幅をスペース2・4・タブから選べます。処理結果は「出力をコピー」でクリップボードにコピーでき、「サンプル読込」で各言語の見本を読み込んで動作を試せます。
安全性への配慮
圧縮では文字列の中身までうっかり削ってしまう事故が起きがちですが、本ツールはJavaScriptの文字列・テンプレートリテラル・正規表現リテラルを解析して保護し、その内側にある波かっこや「//」「/* */」のようなコメント風テキストはそのまま維持します。CSSの文字列、HTMLのpre・textarea・script・styleブロックの中身も保護対象です。これにより、コメント除去や空白圧縮によってコードの意味が変わってしまうことを防いでいます。
MinifyとBeautifyの違い
| 項目 | Minify(圧縮) | Beautify(整形) |
| 目的 | ファイルサイズ削減・高速化 | 可読性の向上・レビュー |
| コメント | 除去する | 基本的に残す |
| 空白・改行 | 不要分を除去し1行に | インデントを付けて整える |
| 主な用途 | 本番配信前の下ごしらえ | 難読化・圧縮コードの解読 |
圧縮でどれくらい軽くなる?
圧縮の効果はコードの書き方によりますが、コメントやインデントが多いソースほど削減率は大きくなります。一般的な手書きのCSSやJavaScriptでは、コメントと空白の除去だけで数十パーセント程度サイズが縮むことも珍しくありません。本ツールは処理後に入力・出力それぞれのUTF-8バイト数と削減率(%)を表示するので、軽量化の目安として活用してください。
よくある質問
Minify(圧縮)とBeautify(整形)は何が違う?
Minifyはコメントや改行・インデントなどの不要な空白を取り除き、コードのファイルサイズを小さくする処理です。動作は変えずに通信量を減らして表示を高速化する目的で使います。逆にBeautifyは圧縮された1行のコードや乱れたコードに改行とインデントを付け直し、人が読みやすい形に整える処理です。本ツールは同じ入力に対してワンクリックで両方を切り替えられます。
コードは外部サーバーに送信される?
いいえ。圧縮・整形の処理はすべてお使いのブラウザ内のJavaScriptだけで実行され、入力したコードが外部のサーバーやAPIに送信されることはありません。外部CDNの読み込みもなく、社内コードや未公開のソースでも安心してお試しいただけます。
文字列やコメントに見える中身は壊れない?
本ツールはJavaScriptの文字列・テンプレートリテラル・正規表現リテラルを解析して保護し、その内側にある波かっこや「//」「/* */」のようなコメント風のテキストは中身をそのまま維持します。CSSの文字列やHTMLのpre・textarea内のテキストも保護されるため、コメント除去や空白圧縮によって文字列内容が壊れることはありません。
インデントの幅は変えられる?
はい。Beautify(整形)モードではインデント幅をスペース2・4・タブから選べます。整形は選んだ言語(JS/CSS/HTML)の波かっこやタグの入れ子に応じて自動でインデントを付け直します。チームのコーディング規約に合わせて幅を調整してご利用ください。
本格的なMinifierと同じ結果になる?
いいえ。本ツールは構文木(AST)を完全に解析する本格的なミニファイア(terser や cssnano など)ではなく、軽量なテキストベースの整形・圧縮ツールです。コメント除去や空白圧縮など一般的なコードで安全に効く処理を中心に行い、変数名の短縮やデッドコード削除などの高度な最適化は行いません。ビルドの前処理や下書きの整形には十分ですが、本番の最終ビルドには専用ツールの併用をおすすめします。