JavaScriptの整形 — JSコードのフォーマットとプリティプリント

JavaScriptの整形の仕組み

JavaScriptの整形（beautification、プリティプリント）は圧縮の逆のプロセスです。コンパクトで読みにくいコードを、適切なインデント、改行、スペースを持つ人間にとって読みやすいフォーマットに復元します。

ビフォー・アフター

// 圧縮された入力
function greet(e){if(!e)return"Hello, stranger!";const t=e.charAt(0).toUpperCase()+e.slice(1);return"Hello, "+t+"!"}

整形後：

function greet(e) {
  if (!e) return "Hello, stranger!";
  const t = e.charAt(0).toUpperCase() + e.slice(1);
  return "Hello, " + t + "!";
}

整形で復元できないもの

整形は空白と構造を追加しますが、以下を元に戻すことはできません：

• 変数名のマングリング — eとtは圧縮時に元の名前が失われているため、短縮されたままです。
• 除去されたコメント — ドキュメントとインラインの説明は永久に失われます。
• 簡素化された式 — 定数畳み込みされた値や統合された文は最適化された形式のままです。

圧縮コードの完全なリバースエンジニアリングには、ソースマップ（利用可能な場合）または手動分析が必要です。

ASTベース vs. 正規表現ベースのフォーマット

• ASTベースのフォーマッター（Prettier、js-beautify）はコードを抽象構文木に解析し、フォーマットルールに従って再出力します。複雑な構文でも正確で一貫した出力を生成します。
• 正規表現ベースのフォーマッターはパターンマッチングを適用して改行とインデントを挿入します。高速ですが、テンプレートリテラル、正規表現パターン、ネストされた三項演算子などのエッジケースで誤ったフォーマットを生成する場合があります。

フォーマットオプション

ほとんどの整形ツールでは以下を設定できます：

• インデントスタイル — タブ vs. スペース（2スペースまたは4スペースが最も一般的）
• ブレーススタイル — 同一行（collapse）または次の行（expand）
• セミコロン — 末尾のセミコロンを挿入するか省略するか
• 引用符スタイル — シングル vs. ダブルクォート
• 最大行幅 — 指定された列で長い行を折り返す

整形を行うタイミング

• ソースマップが利用できない場合のプロダクション問題のデバッグ
• サードパーティライブラリコードのレビュー
• リンターを適用する前の不統一なコードの再フォーマット
• コピー&ペーストされたコードスニペットの読みやすさの向上