テキストやコードを整形・クリーンアップする方法
JSON、JavaScript、HTML、CSS、SQLをワンクリックでビューティファイ／ミニファイします。すべてブラウザ内で、リンターが期待する慣例に沿った妥当な既定値付きです。
なぜ重要か
バックエンドエンジニアがサポートチケットから4 KBのJSONペイロードを貼りますが、1行の塊です。ひと目で問題がフィールド欠落か列挙値の typo か判断できません。フォーマッターに30秒かけるだけで構造が見え、currrency（rが3つ）という typo がバグだと気づけます。整形とは、読めないブロブを人間が推理できる姿にすることの日常です。
整形はまたスタイルの基準点にもなります。全員が同じビューティファイ既定を使えば、コードレビューは空白の論争ではなくロジックに集中できます。
実際の3つのシーン
1行のJSONレスポンスを貼り、2スペースインデントでビューティファイすれば異常フィールドがすぐ目に入ります。
瞬時に診断
手編集のHTML/CSSブロックを入れてMinifyをクリックし、よりタイトな成果物として出荷します。
より小さい成果物
平坦な1行のSELECTチェーンを貼り、SQLプロファイルで整形するとJOINキー・フィルタ・集約が一目で読めます。
レビューしやすい分析
手順
フォーマッターは/content-tools/text-formatterです。入力から言語を推測しますが、ツールバーで上書きできます。
言語プロファイルを選ぶ
JSON、JavaScript/TypeScript、HTML、CSS、SQLです。適切なプロファイルを選べば、JSONフォーマッターがJSのアロー関数の波括弧をバランスしようとして失敗する、といった齟齬を防げます。
ソースを貼る
エディタは任意サイズを受け付けます。貼った内容はブラウザセッション内に留まります。
ビューティファイかミニファイ
Formatでインデントと折り返し。Minifyで空白とコメントを削除します。設定変更に応じて右ペインがリアルタイム更新されます。
インデント、行幅、末尾カンマを調整する
2か4スペース、最大行幅、末尾カンマの有無でチームのスタイルガイドに合わせます。
コピーまたはダウンロード
コピーボタンでIDEへ戻すか、そのままファイルをダウンロードします。
Input
{"orderId":"o-7711","items":[{"sku":"A1","qty":2},{"sku":"B2","qty":1}],"currrency":"USD"}Output
{
"orderId": "o-7711",
"items": [
{ "sku": "A1", "qty": 2 },
{ "sku": "B2", "qty": 1 }
],
"currrency": "USD"
}
実践テクノ
- まず整形、次にdiff。 2つの設定を比較する前に両方フォーマットし、ホワイトスペースとクォート差を中和します。テキスト比較のチュートリアルも参照してください。
- 改行を許可しないJSON設定欄（Slackのウェブフック、一部のk8sアノテーションなど）へ貼る前にMinifyします。
- タブ対スペースはインデント設定をフォーマット前に合わせます。しないとエディタの保存時再整形でdiffがノイズだらけになります。
- JSON5的な入力: 手書き設定にコメントがある場合は、まずJSプロファイルでコメントを取り除き、その後に厳密JSONで再整形します。
よくある落とし穴
よくある誤り
JSONのビューティファイが拒否される
末尾カンマ、シングルクォート、キー無クォートなどで無効になっています。ツールバーの構文エラーを修正（問題行が示されます）してから再試行してください。
よくある誤り
ミニファイ後のJSが実行時に壊れる
ミニファイはASIに敏感な行を詰めます。オプショナルチェイニングやトップレベルawaitを含む現代的コードでは、ランタイムが対応しているか確認するか、先にバンドラーでトランスパイルします。
よくある誤り
SQL整形で別名が壊れた
レガシー方言では識別子に二重引用符を使います。SQLプロファイルでPostgreSQL、MySQL、T-SQLなど該当方言を選び、引用符規則を保持させます。
向いていない用途
- 自動修正するリント: ESLint、Stylelint、
dotnet formatなど、ルール駆動の修正が向いています。 - リファクタリング（リネーム、関数抽出）はIDEのリファクタエンジン向きです。
- スキーマ検証: このフォーマッターは構造的可否のみです。意味はJSON Schema検証ツールへ。
FAQ
クォート内の空白も変わりますか？
いいえ。引用符内の空白はそのままです。書き換わるのはインデントやトークン間の構造的空白のみです。
YAMLはサポートされていますか？
直接YAMLはロードマップ上です。現状はJSONへ変換→整形→戻す、の流れを使ってください。
Minifyのあとコードコメントが消えた
Minifyはサイズ削減のため既定でコメントを落とします。必要ならツールバーでPreserve commentsをオンにしてください。
次のステップ
- 整形済み出力を参照版とテキスト比較で突き合わせます。
- HTMLやJSONへ埋める前はエスケープツールでエスケープします。
- Markdown原稿はMarkdown to HTMLで表示確認します。