Code Beautifier
コードを読みやすく整形してフォーマットします ファイルをサーバーへ送らずブラウザ内で処理する、無料のオンラインツールです。
使い方
- 右上のセレクタからコード種別を選びます（HTML / CSS / JavaScript / JSON）
- テキストエリアにコードを貼り付けます。ミニファイされたbundle.jsや、改行が崩れた他人のスニペットでも構いません
- インデント設定を確認します。社内標準に合わせて2スペース・4スペース・タブから選択できます
- 「コードを整形」ボタンを押すと、即座にブラウザ内で整形されます（コードは外部送信されません）
- 右側に整形結果が表示されるので、「コピー」ボタンでクリップボードへ転写し、エディタやレビュー資料にそのまま貼り付けます
- JSONの場合は同時にバリデーションも行われ、構文エラーがあれば該当行が分かるメッセージが表示されます
すべての処理はブラウザで行われ、ファイルがサーバーに送信されることはありません。
よくある質問
本ツールは「読みやすさの即時確認」に特化したブラウザ完結型の整形ツールです。チームの一貫したコーディング規約を強制したい場合はPrettierやeslint --fix（CI連携）が必須です。逆に「ライブラリのminifiedソースを一時的に読みたい」「同僚から受け取った貼り付けコードをサクッと整形したい」場面では本ツールが最速です。
HTML、CSS、JavaScript、JSONの4種類に対応しています。TypeScript / JSX / TSXもJavaScriptモードで概ね正しく整形されますが、型注釈の改行ルールはPrettier標準とは異なる場合があります。Vue SFCやSvelteなどのマルチセクション形式は、各ブロックを個別に整形してください。
はい、すべて切り替え可能です。社内のJavaScript標準が2スペース、Goやサーバー側Javaが4スペース、レガシーHTMLがタブ、というケースを想定し、3つのモードを用意しています。設定はブラウザに保存されるので、次回開いた時も前回の設定が維持されます。
送信されません。整形処理はすべてブラウザ内のJavaScriptで完結し、社内の業務コード・APIキー入りのスニペット・未公開製品の実装などをそのまま貼り付けても外部に漏れません。社内ネットワークの厳しいセキュリティポリシー下でも利用可能です。
可能です。GitHub PRに上げる前に「読みやすい状態」を一度確認したい時、IDEを開かずにブラウザだけで整形できます。ただし、コミット時の最終整形はリポジトリのPrettier設定に従う必要があるため、CIで自動整形する運用がおすすめです。
ブラウザのJavaScriptヒープに依存しますが、数MB程度のJSONなら問題なく整形できます。それを超える本番のAPIレスポンスログなどは、jqコマンドやエディタの整形機能を使う方が安定します。本ツールはあくまで「目で確認したいサイズ」のコード向けです。
JavaScriptモードで整形すれば改行とインデントが復元され、変数名はそのまま（minifyによりa、bなどに短縮）ですがロジック追跡が大幅に楽になります。本格的なリバースエンジニアリングにはsourcemap付きのChrome DevToolsが最適ですが、本ツールは「ざっくり構造を把握する」用途に十分です。