CSS/JS圧縮＆整形ツール

整形は逆の操作です。コンパクトな、あるいは最小化されたコードを取り込み、一貫したインデント、宣言間の改行、および適切なスペースを伴って再フォーマットします。サードパーティの最小化されたライブラリをデバッグする場合（最小化されたコードをコピーし、整形してから読み取る）、フォーマットのない生成された、または結合されたCSS/JSを扱う場合、適切にフォーマットされていないレガシーコードをレビューする場合、またはコードレビューで読みやすい差分（diff）が必要な場合に必要です。これはコメントを追加したり元の変数名を復元したりするものではなく、フォーマットのみを再構築します。

このツールの最小化ツールは保守的な設計です。セマンティックな意味を持たない空白とコメントのみを削除します。文字列リテラル（単一引用符、二重引用符、およびJSのテンプレートリテラル）、正規表現、CSSセレクターおよびプロパティ値はすべて正確に保持されます。一般的な落とし穴として：JavaScriptが自動セミコロン挿入（ASI）に依存しており、コードが曖昧な構造になっている場合、複数のステートメントを一行に配置する最小化が理論的に問題を引き起こす可能性があります。最も安全なアプローチは、常に明示的にセミコロンを使用し、ターゲットとなるブラウザで最小化された出力をテストすることです。

開発ワークフローを備えた本番用プロジェクトの場合：ビルドパイプラインに最小化を統合するビルドツール（Webpack, Vite, Rollup, esbuild, または Parcel）を使用してください。これらのツールは、ツリーシェイキング、モジュールバンドリング、コード分割、ソースマップ、ポストプロセッシングなど、より高度な最適化を提供します。このオンラインツールは以下の場合に最適です：ビルドシステムを持たないレガシーファイルの単発の最小化、ビルドパイプラインの変更をコミットする前の最小化サイズの迅速な確認、整形による他人の最小化されたコードの読み取り、またはビルドシステムの構築が過剰になるような小規模なプロジェクト。

1ファイルあたり最大5MBまでの.cssまたは.jsファイルをアップロードできます。ツールはファイルの拡張子に基づいてモードを自動検出します。テキスト入力（貼り付けモード）にはサイズ制限はありませんが、非常に大きなファイルは処理に時間がかかる場合があります。出力は.cssまたは.jsファイルとしてダウンロード可能です。SCSS、TypeScript、およびその他のプリプロセス形式は、最小化の前にプレーンなCSSまたはJavaScriptにコンパイルする必要があります。

最小化は冗長な文字を取り除くことでファイルサイズを削減します。その後、Gzip圧縮（Webサーバーによって転送時に適用される）によって最小化されたファイルがさらに圧縮されます。重要なポイントは、最小化されたコードは文字のバリエーションが少ないため、元のコードよりも効率的に圧縮されることです。最小化とGzipの組み合わせでは通常、合計で60-85%の削減が達成されます。100KBのCSSファイルを配信する場合：オリジナル + Gzip ≈ 25KB、最小化 + Gzip ≈ 15KBとなります。最小化によってGzip後のサイズがさらに10KB節約されます。サーバーでGzipを設定していない場合、最小化による絶対的な節約量は多くなりますが、相対的な利点は小さくなります。

いいえ。すべての最小化および整形処理は、JavaScriptを使用してブラウザ内で行われます。独自のロジック、APIエンドポイント、または機密性の高い設定を含む可能性のあるあなたのCSSおよびJavaScriptコードが、デバイスから外に出ることはありません。

直接はできません。ツールはCSSとJavaScriptの構文規則が異なるため、これらを個別に処理します。HTMLファイル内に埋め込まれた<style>および<script>ブロックがある場合は、各セクションを抽出して個別に最小化した後、再度挿入する必要があります。HTML+CSS+JSを一括で最小化するには、埋め込みコードブロックを処理できるHTMLミニファイアを使用するか、すべての資産タイプを一緒に処理するビルドツールを使用してください。