11 言語: JavaScript、TypeScript、JSON、CSS、SCSS、Less、HTML、SQL、YAML、Markdown、GraphQL 13 種類の SQL 方言とキーワードの大文字・小文字設定 JS（Terser）、CSS、HTML、JSON、SQL を圧縮し削減量を表示インデント幅またはタブ、行幅、クォート、セミコロンを設定結果をコピー・ダウンロード、構文エラーもわかりやすく表示

コード整形・圧縮ツール - JS, TS, CSS, HTML, SQL

コードを整形・圧縮する理由

整形とは、インデント・改行・空白を統一してコードを書き直し、読みやすく、レビューや差分比較をしやすくすることです。圧縮されたコード片や自動生成された SQL、コピーした設定ファイルを読むときに役立ちます。圧縮はその逆で、空白とコメントを取り除き（JavaScript では Terser でローカル変数名も短縮）、ダウンロードサイズを減らします。このツールは多くの JavaScript プロジェクトで使われている Prettier と、MySQL・PostgreSQL・SQL Server・Oracle PL/SQL・BigQuery などの構文に対応した sql-formatter を使用しています。

機能

• 11 言語: JavaScript、TypeScript、JSON、CSS、SCSS、Less、HTML、SQL、YAML、Markdown、GraphQL
• 13 種類の SQL 方言とキーワードの大文字・小文字設定
• JS（Terser）、CSS、HTML、JSON、SQL を圧縮し削減量を表示
• インデント幅またはタブ、行幅、クォート、セミコロンを設定
• 結果をコピー・ダウンロード、構文エラーもわかりやすく表示

コードはローカルのまま

整形と圧縮はすべてブラウザ内で実行されるため、貼り付けた API キーや社内のクエリ、非公開のコードがアップロードされることはありません。

Prettier + sql-formatter、100% クライアントサイド。

コード整形の使い方

1
言語タブを選びます。JavaScript、TypeScript、JSON、CSS、SCSS、Less、HTML、SQL、YAML、Markdown、GraphQL に対応しています。サンプルで例を読み込めます。
2
入力欄にコードを貼り付け、インデント幅またはタブ、行幅、クォート、セミコロン、SQL なら方言とキーワードの大文字・小文字を設定します。
3
整形を押すと Prettier や sql-formatter でコードを整え、圧縮を押すと JavaScript、CSS、HTML、JSON、SQL を小さくします。削減量は出力欄の上に表示されます。
4
結果をコピーするか、ファイルとしてダウンロードします。構文エラーがある場合は、行と列がメッセージに表示されます。

活用例

圧縮されたコードを読む

サードパーティのスクリプトやバンドルされたファイルは1行にまとまっています。整形すれば構造が見え、デバッグしたい関数を見つけられます。

ログの SQL を整える

ORM はクエリを1行で出力します。PostgreSQL や MySQL の方言で整形すれば SELECT、JOIN、WHERE が別の行に分かれ、レビューや最適化がしやすくなります。

コミット前のスタイル統一

プロジェクトと同じ Prettier のルール（スペース2つ、80桁、ダブルクォート）で整形すれば、チャットやスニペットサイトから貼ったコードでも差分が小さく保てます。

手早く圧縮

メールテンプレート、CMS の入力欄、インラインの <script> タグ向けに、ビルドツールを用意せずに小さなスクリプトやスタイルシートを圧縮できます。

よくある質問

整形するとコードの動作は変わりますか？+

変わりません。整形で変わるのは空白、改行、選択した場合のクォートと省略可能なセミコロンだけです。Terser による JavaScript の圧縮ではローカル変数名も短縮されますが、動作は同じです。

一部の言語で圧縮が使えないのはなぜ？+

YAML、Markdown、TypeScript、GraphQL の圧縮はあまり役に立たないか、意味が変わってしまいます（YAML はインデントに依存します）。TypeScript は通常 JavaScript にコンパイルしてから圧縮します。

SQL の方言はどれを選ぶ？+

使っているデータベースを選んでください。方言によって引用符、関数、キーワードが異なり（MySQL のバッククォート、PostgreSQL の :: キャストなど）、正しく選べば整形エラーを防げます。

コードはサーバーに送られますか？+

いいえ。Prettier、sql-formatter、Terser はブラウザ内で動き、ボタンを押したときにだけ読み込まれます。非公開のコードや認証情報は端末から出ません。