JavaScript整形・圧縮
圧縮されたスクリプトの中身を読みたいとき、インデントが崩れたコードを直したいときに。整形と簡易圧縮を同じ画面で切り替えられます。
🔒 入力内容はお使いのブラウザ内だけで処理され、サーバーには送信されません。
圧縮はコメント削除と空白の圧縮だけを行う簡易なものです。変数名の短縮などを含む本格的な圧縮は、terser や esbuild などのビルドツールで行ってください。
使い方
- 上の欄に JavaScript のコードを貼り付けます。
- 「整形」を押すと、インデントと改行をそろえた読みやすい形になります。インデントの種類、空行の扱い、波括弧の位置は上の選択肢で変えられます。
- 「圧縮(簡易)」を押すと、コメントを削除し、空白を圧縮した形になります。入力と出力のサイズ、削減率が数値で出ます。
- 結果は「結果をコピー」でクリップボードへ、「.js をダウンロード」でファイルに保存できます。
変換の決まり
| 項目 | 整形 | 圧縮(簡易) |
|---|---|---|
コメント // /* */ |
残す | 削除。/*! で始まるものは「残す」がオンなら残す |
文字列 "..." '...' |
そのまま | そのまま |
テンプレートリテラル `...` |
そのまま | そのまま(${} の中も含む) |
正規表現リテラル /.../ |
そのまま | そのまま。割り算との区別は前後の文脈から推定 |
| 改行 | 文ごとに改行。元の空行は「空行の保持」の設定まで残す | { ; , ( [ の後ろと } ) ] の前だけ削除。それ以外の改行は残す(セミコロン省略時の動作を変えないため) |
| 空白 | 演算子の前後などに1つ入れる | 識別子どうしの間(var x など)と + +、- - の間だけ1つ残す |
| 変数名・関数名 | そのまま | そのまま(短縮しない) |
| 未使用コード | そのまま | そのまま(削除しない) |
整形には js-beautify(オープンソースのライブラリ)を使い、圧縮はこのツール独自の処理です。
こんな時に
- 圧縮されて1行になったスクリプトを読んで、何をしているか確認したいとき
- インデントが崩れたコードを整えてから修正に取りかかりたいとき
- ブログやドキュメントにコードを載せる前に、スペース幅や波括弧の位置をそろえたいとき
- 小さなスクリプトのコメントを取り除いて、ページに直接埋め込みたいとき
注意
このツールの圧縮は「読みやすさのための空白を取り除く」範囲にとどめています。変数名の短縮、未使用コードの削除、構文の書き換えといった本格的な圧縮は、terser や esbuild などのビルドツールで行ってください。また、正規表現と割り算の区別を文脈から推定しているため、a = b\n/re/.test(c) のような書き方ではまれに判断を誤ります。圧縮したコードは必ず動作確認をしてから使ってください。
よくある質問
圧縮しても思ったほど小さくなりません
このツールの圧縮は、コメントの削除と空白の圧縮だけを行います。変数名の短縮や未使用コードの削除はしないため、本格的な圧縮ツール(terser、esbuild など)と比べると削減率は小さくなります。本番サイト向けの圧縮はビルドツールで行ってください。
圧縮したコードが動かなくなることはありますか?
セミコロンを省略したコードでも動作が変わらないよう、改行は構文上安全と判断できる箇所({ ; , の後ろなど)だけ削除し、それ以外の改行は残しています。文字列、テンプレートリテラル、正規表現の中身は変更しません。ただし正規表現と割り算の区別は前後の文脈から推定しているため、ごくまれに判断を誤ることがあります。圧縮後は必ず動作確認をしてください。
整形したらコードの意味が変わることはありますか?
整形(js-beautify)は空白と改行だけを変更し、コードの意味は変えません。ただしセミコロンを省略したコードで、( や [ で始まる行がある場合、元のコードの時点で意図しない解釈になっている可能性があります。
JSX や TypeScript にも使えますか?
整形ライブラリは一部の JSX を扱えますが、TypeScript の型注釈やデコレータは想定していません。崩れた場合は、コンパイル後の JavaScript でお試しください。