HTML/CSS/JS整形・Minify
HTML・CSS（SCSS・Less）・JavaScript（JSX）・TypeScriptのコードを、Prettierで読みやすく整形したり、terser・csso・html-minifier-terserでMinify（圧縮）したりできるツールです。インデントや引用符などの整形オプション、変数名の短縮などの圧縮オプション、gzip後のサイズ比較に対応し、処理はすべてブラウザ内で行われます。
使い方
- コードを入力欄に貼り付けるか、ファイルをドラッグ＆ドロップします。言語がわからない場合は「言語を自動判定」を押します。
- 上部のタブで言語（HTML・CSS・JavaScript・TypeScript）を、右側で「整形」または「Minify」を選びます。CSSではSCSS・Lessも選べます。
- インデントや1行の最大幅（整形）、コメントの削除や変数名の短縮（Minify）などのオプションを調整します。変更はすぐに出力に反映されます。
- 出力欄の下でサイズと削減率（gzip後の概算を含む）を確認し、「クリップボードへコピー」または「ダウンロード」で保存します。構文エラーがある場合は行番号が表示されます。
このツールについて
HTML/CSS/JS整形・Minifyツールは、Webサイトのコードを読みやすく整えたり、公開用に小さく圧縮したりするツールです。圧縮されて読めないコードを調べたいとき、コードの書き方を揃えたいとき、ビルドツールを使わずに手早くファイルを小さくしたいときに役立ちます。SQL整形ツールのWeb版のような感覚で使えます。
整形には広く使われているPrettier（MIT）を、MinifyにはJavaScriptにterser（BSD-2-Clause）、CSSにcsso（MIT）、HTMLにhtml-minifier-terser（MIT）を使っています。動作が変わる可能性のある積極的な最適化（console の削除、属性の引用符や閉じタグの省略）は既定でオフにし、注意書きを表示しています。
ライブラリは選んだ言語とモードに必要なものだけを、処理するときに初めて読み込みます。処理はWeb Workerで行うため大きなファイルでも画面が固まりにくく、入力したコードがサーバーへ送信されることはありません。
よくある質問
TypeScriptやSCSSもMinifyできますか？
TypeScript・SCSS・Lessは整形のみに対応しています。Minifyする場合は、コンパイル後のJavaScript・CSSを入力してください。JSXを含むJavaScriptも整形はできますが、Minifyはできません。
gzip後のサイズとは何ですか？
多くのWebサーバーはファイルをgzipなどで圧縮して配信します。実際に転送されるサイズの目安として、入力と出力をそれぞれgzip（最大圧縮）で圧縮したサイズを表示しています。
Minifyでコードが動かなくなることはありますか？
既定の設定は安全な最適化のみですが、eval や関数名に依存するコードでは変数名の短縮が影響する場合があります。問題があれば「変数名を短縮する」をオフにしてください。注意書きのあるオプションは、影響を理解したうえで使用してください。
入力したコードは送信されますか？
送信されません。整形・Minifyはすべてブラウザ内で行われます。