コード整形・圧縮ツール

コード整形ツール — HTML・CSS・JavaScript・SQLを整形または圧縮

更新日：2026年9月29日 · 著者：サマン

1行に詰め込まれたコードや、そのまま本番に出せる状態のコードを貼り付けて、必要な形に変えましょう。きれいにインデントされた読みやすいコードにも、バイト数を最小限にした圧縮済みのコードにもできます。HTML、CSS、JavaScript、SQLに対応し、貼り付けたのがどの言語かを自動で見分けます。処理はすべてブラウザー内で行われるため、ソースコードも、テーブル名を含むクエリも、クライアント案件のコード片も、端末の外に出ることはありません。

整形は人のためのものです。プルリクエストのレビュー、圧縮されたバンドルの読解、誰かが1行の長い文で書いたクエリのデバッグに役立ちます。圧縮は機械のためのものです。ファイルが小さければ読み込みが速くなり、帯域も節約できます。1つのツールでどちらの方向にも対応します。

使い方

1. コードを貼り付けます。言語は自動検出に設定されています。判定が違う場合は、HTML、CSS、JavaScript、SQLから選んでください。
2. 整形を押すとインデントされ、圧縮を押すと小さくなります。
3. インデントをスペース2つ、スペース4つ、タブから選びます。SQLの場合はSQL方言と、キーワードの書き方も選びます。
4. コピーかダウンロードを押します。ツールの下の行に、処理前後のサイズと、圧縮で削減できた量が表示されます。

言語ごとに使われるライブラリ

3つのライブラリはいずれもオープンソースで、その言語を初めて使ったときにだけ読み込まれるため、ページ自体は軽いままです。

SQLの整形

1行で書かれた長いクエリはレビューしにくいものです。SQLの整形では、SELECT、FROM、WHERE、GROUP BY、そして各JOINをそれぞれ独立した行に置き、その下の列や条件をインデントします。データベースによって構文が異なるため、方言の選択は重要です。バッククォートで囲んだ名前はMySQL、角かっこはSQL Server、::によるキャストはPostgreSQLの書き方です。標準SQL、MySQL、MariaDB、PostgreSQL、SQLite、SQL Server、Oracle PL/SQL、BigQuery、Snowflakeから、使っている方言を選んでください。キーワードは大文字、小文字、入力のままから選べます。テーブル名や列名が変更されることはありません。

安全な圧縮

圧縮したコードは、元のコードとまったく同じように動かなければなりません。それを確実にする安全な方法は、やみくもに文字を削るのではなく、コードを理解したうえで処理することです。そのため、JavaScriptの圧縮にはTerserを使います。Terserはまずコードを構文木に解析するので、構文エラーがある場合は、壊れた出力の代わりに行と列が示されます。CSSの圧縮では意味を持つスペースを残し、HTMLの圧縮では<span>a</span> <span>b</span>のようなインライン要素の間に1つのスペースを残します。これを消すと、ページ上で2つの単語がくっついてしまうからです。

圧縮は、サーバー側での圧縮の代わりにはなりません。gzipやBrotliは、ミニファイした後のテキストファイルをさらに70%以上小さくすることが多く、両者は組み合わせて使うのが効果的です。

よくある使い道

• 圧縮されたファイルを読む：デバッグ中に、サードパーティのライブラリや本番のバンドルを読みたいとき。
• HTMLを整理する：メール作成ツールやCMSが書き出したHTMLを、手で編集する前に整えたいとき。
• クエリをレビューする：ログ、ORMのデバッグ出力、同僚のチャットメッセージからコピーしたクエリを確認したいとき。
• コード片を小さくする：CSSやJavaScriptをページやメールテンプレートに直接埋め込む前に。

関連ツール

JSONなら、JSON整形ツールで検証とインデントができ、JSON変換ツールでYAML、CSV、XMLに変換できます。整形で何が変わったかを正確に確かめたいときは、前後のコードをテキスト比較ツールに貼り付けてください。1つの作業だけなら、このツールを目的に合わせて開くタスクページが便利です：HTML整形、SQL整形、CSS圧縮、JavaScript圧縮、JavaScript整形。