整形とミニファイは、いつでも切り替えられ、結果は入力に合わせて更新されます。乱れたHTML、CSS、JavaScriptを整えたり、より高速なWebサイトのために小さくしたりできます。ブラウザ上で動作し、無料で、プライバシーも守られます。
コードを整形またはミニファイする方法
- 「整形」または「ミニファイ」を選んでください。
- 言語を選んでください：HTML、CSS、JavaScript。
- 整形では、インデントを選びます：スペース2つ、スペース4つ、またはタブ。
- コードを入力ボックスに貼り付けるか、「例」を押して動作を確認してください。
- 「整形済み」で結果を確認して、「コピー」を押してください。
- 「クリア」で入力が空になります。
整形でできること
整形が変更するのは、空白だけです。CSSは、1行に1つの宣言になり、ルールは空行で区切られ、メディアクエリと入れ子のルールはインデントされます。JavaScriptは、波括弧に従って再インデントされ、1行に1つの文になり、文字列、テンプレートリテラル、正規表現、for (;;)ヘッダーは、書かれたとおりに残されます。HTMLは、入れ子に従ってインデントされ、ページの表示が変わらないよう、インライン要素はテキストと同じ行に保たれ、インラインの<script>と<style>のブロックは、JavaScriptとCSSのフォーマッターで整形されます。
ミニファイでできること
ミニファイは、コメントと、ブラウザが必要としないすべてのスペースを削除します。/*!で始まるコメントは、ライセンスが書かれていることが多いため、残されます。JavaScriptは、自動セミコロン挿入が改行に依存する箇所では改行を保つため、セミコロンなしで書かれたコードも動作します。名前は短縮されず、コードも書き換えられないため、結果は元とまったく同じように動作します。HTMLでは、preとtextareaの中身には一切触れず、インライン要素の間の空白は、単語がくっつかないよう、1つのスペースとして保たれます。
知っておくべき制限
フォーマッターは、検索と置換ではなく、本物のトークナイザーでコードを読みますが、完全には構文解析しないため、すべての構文エラーを検出するわけではありません。閉じられていない文字列、コメント、括弧などの問題を見つけた場合は、その行をお伝えします。TypeScript、JSX、テンプレート言語には対応していません。HTMLのミニファイは、リスト項目などのブロック要素の間の隙間を取り除きます。レイアウトがインラインブロックの項目間の空白に依存している場合は、ミニファイ後に確認してください。
ヒント
- 元のファイルを残してください。ミニファイしたコードは読みにくく編集しにくいため、公開用のコピーをミニファイしてください。
- ミニファイ後はページをテストしてください。特に、レイアウトが要素間のスペースに依存している場合は重要です。
- 自分で書いていないコード、たとえばコピーしたスニペットや圧縮されたファイルを読むために、整形を使います。
- チームで使っているものと同じインデントを選ぶと、変更が小さく保てます。
- 前後を差分チェッカーで比較します。
こんな方に
コードの読み方を学ぶ学生、クライアントのサイトを整理するフリーランサー、高速化のためにページの重さを減らす小さなお店。JSONファイルには、JSONツールをお使いください。
設計段階からプライベート
コードは、このページでブラウザ上で整形されます。何もアップロードされないため、非公開のものや未公開の作業でも安全です。
よくある質問
ミニファイするとコードが壊れますか？
コメントと不要なスペースを削除するだけで、コードは書き換えないため、動作は変わりません。結果は必ずテストしてください。
TypeScriptやJSXに対応していますか？
いいえ。HTML、CSS、JavaScriptに対応しています。
コメントが残ったのはなぜですか？
/*!で始まるコメントは、ライセンスが書かれていることが多いため、残されます。