アップロードなし, 100%ローカル, アカウントなし

圧縮 / 整形

コードを圧縮または整形します。すべてブラウザ内で完結します。

圧縮 / 整形の仕組み

ミニファイ/ビューティファイはHTML、CSS、JavaScriptからコメント、不要な空白、冗長な文字を削除して圧縮するか、最小化されたコードを読みやすいインデント形式に展開します。すべての処理はバンドルされたパーサーを使ってブラウザで行われます。貼り付けたものはどこにも送信されません。入力したものはデバイスの外に出ることはありません。

ミニファイはページの読み込みパフォーマンスに直接影響します。小さなファイルはより速く転送され、パースが速く、帯域幅の消費も少ないです。本番デプロイメントでは最小化されたアセットが標準です。このツールは、読む必要がある最小化されたファイルを受け取ったとき(ビューティファイ)、最小化ツールがコードスニペットに何をするかビルドパイプラインに統合する前に確認したいとき、またはビルドツールを設定せずに一度きりのミニファイが必要なときに役立ちます。

圧縮 / 整形の使い方をステップごとに解説

  1. HTML、CSS、またはJavaScriptコードを入力エリアに貼り付けます。
  2. ドロップダウンから言語タイプを選択します(HTML、CSS、またはJavaScript)。
  3. 「ミニファイ」をクリックして圧縮バージョンを生成するか、「ビューティファイ」をクリックしてコードを展開してインデントします。
  4. コピーボタンを使って出力エリアから結果をコピーします。
  5. 必要に応じて別のコードを貼り付けて繰り返します。

よくある使用例

  • フロントエンド開発者がファーストビューのパフォーマンスのためにHTMLのheadにインライン化する重要なCSSスニペットをミニファイしたい場合。
  • 開発者がセキュリティレビュー中にロジックを理解するために最小化されたサードパーティスクリプトをビューティファイする必要がある場合。
  • テクニカルライターがドキュメントに含めるために最小化されたJSON-LDスクリプトタグのプリティファイされたバージョンが必要な場合。
  • Web開発者がビルドステップを追加する前にCSSファイルをミニファイするバイト節約量を確認する場合。

よくある質問

貼り付けたコードはミニファイのためにサーバーに送信されますか?

いいえ。ミニファイとビューティファイは、サードパーティのミニファイアーを使うのではなく、このツールのために書かれたページ自体のコードによって実行されます。すべての処理はブラウザタブ内に留まります。ここに貼り付けたものはSunastyやサードパーティには送信されません。

JavaScriptミニファイはコードの元の動作を維持しますか?

適切なミニファイアーは、空白のみを削除し、制御されたスコープ内で変数名を短縮し、コメントを削除するという安全な変換のみを行うことで動作を維持します。このツールは安全な変換を対象としています。デッドコード除去や関数インライン化などの積極的な最適化は、完全なプログラム分析が必要なため一般的には適用されません。

ミニファイ後に結果をビューティファイして確認できますか?

はい。まずコードをミニファイし、最小化された出力を入力に貼り付け直して「ビューティファイ」をクリックします。ビューティファイされたバージョンは元のソースとは異なります(変数名が短縮され、コメントが削除される場合があります)が、構造的には同等です。

HTMLミニファイはすべてのコメントを削除しますか?

ツールはミニファイ中に標準のHTMLコメント(<!-- ... -->)を削除します。古いIEバージョンで使用された条件付きコメント(<!--[if IE]...-->)は常に保持されるため、コメントの削除によってそれに依存するレガシーの動作が壊れることはありません。

ミニファイできるコードのサイズ制限はありますか?

制限はブラウザタブの利用可能なメモリです。数百KBまでのコードはすばやく処理されます。大きなJavaScriptバンドル(MBサイズ)には、esbuild、Terser、Lightning CSSなどの専用ビルドツールがより速く本番用途に適しています。