コード整形・圧縮ツール

コード整形・圧縮ツールとは？

HTML・CSS・JavaScript をブラウザ内だけで整形または圧縮できる、無料のオンラインコード整形・圧縮ツールです。まず言語を選び、「整形」を選べば雑然としたコードや 1 行のソースを 2 スペース・4 スペース・タブのインデントで再整形でき、「圧縮」を選べば小さくまとめられます。整形は js-beautify によるもので、JavaScript の圧縮は Terser を使って名前を短縮しサイズを削減し、CSS と HTML はコメントの削除と余分な空白の折りたたみで圧縮します。Web 開発者は、圧縮された外部コードを読みやすく整える、デプロイ前にスタイルシートやスクリプトを小さくする、ビルド出力から貼り付けたコード片を整理する、といった用途に活用しています。

コード整形・圧縮ツールの使い方

1. ソースの言語を選びます：HTML、CSS、または JS。
2. 操作を選びます：整形（見やすく）または圧縮（サイズ削減）。
3. 整形ではインデントを選びます：2 スペース、4 スペース、またはタブ。
4. 入力ボックスにコードを貼り付けるか入力します。出力は自動で更新されます。
5. コピーボタンで結果を取得するか、クリアをクリックして入力を空にし、最初からやり直します。

使用例

a{color:red;font-weight:bold}

a {
  color: red;
  font-weight: bold
}

function add(first, second) {
  return first + second;
}

function add(n,d){return n+d}

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

<ul><li>One</li><li>Two</li></ul>

よくある質問

私のコードはサーバーにアップロードされますか？

いいえ。整形も圧縮もすべてブラウザ内でローカルに処理されます。js-beautify と Terser はスクリプトとして読み込まれ、お使いの端末で実行されます。コードが端末の外に出ることはなく、オフラインでも動作します。

どの言語と操作に対応していますか？

HTML・CSS・JavaScript の 3 言語で、それぞれ整形（選んだインデントで見やすく）と圧縮（サイズ削減）の 2 つの操作があります。JavaScript は Terser で圧縮し、CSS と HTML はコメント削除と空白の折りたたみで圧縮します。

どのインデントを選べますか？

整形時は 2 スペース・4 スペース・タブ文字で再インデントできます。インデントは整形にのみ適用され、圧縮は空白を取り除くためこの設定は無視されます。

JavaScript を圧縮したらエラーが出たのはなぜですか？

Terser は圧縮の前に JavaScript を解析するため、構文エラーがあると中断され、メッセージが出力の上に表示されます。指摘された箇所（閉じ忘れのかっこ・文字列、余分なトークンなど）を直すと、結果が自動的に作り直されます。

出力は自動で更新されますか？

はい。入力・言語・操作・インデントを変えるたびに結果が作り直されるので、整形のためにボタンを押す必要はありません。仕上がったら出力をコピーするだけです。