JavaScript 整形の仕組み
ビューティファイアはコードを 1 文字ずつ読み取り、各ステートメントのネスト深度を追跡しながら、一貫した間隔で再出力します。コードの動作は一切変えず、見た目だけを整えます。
- トークナイズ. ライブラリはキーワード・識別子・文字列・演算子・句読点というトークンのストリームに入力をスキャンします。文字列リテラル・テンプレートリテラル・正規表現リテラルは単一の単位として認識されるため、文字列内のブレースがブロック区切り記号と誤解されることはありません。
- ネストの追跡. トークンストリームを走査しながら、ビューティファイアはインデントレベルをリアルタイムで管理します。開き括弧（波括弧・角括弧・丸括弧）が現れるとレベルが深くなり、対応する閉じ括弧でレベルが戻ります。この深度が各行の先頭に付くインデント数を決めます。
- オプションの適用. インデントの選択（スペース 2 つ・スペース 4 つ・タブ）が 1 レベルの幅を決めます。ブレーススタイルは開き括弧を直前のステートメントに続けるか独立行に置くかを決めます。空行の上限設定は、連続した空行をあなたが指定した数以下に折り畳みます。
- 再出力. 最後にフォーマッターが、計算済みのインデントと改行でトークンを出力します。必要に応じて、自動セミコロン挿入（ASI）が実行時に補う予定のセミコロンを追加する選択もできます。結果は同じプログラムが人が読める形に整えられたものです。
JavaScript を整形する理由
- 圧縮コードを読む. 本番バンドルは一行で出荷され、変数名は一文字です。整形すれば改行とインデントが復元され、ソースマップがなくてもバグを引き起こしたステートメントまで追いかけることができます。
- 不揃いなファイルを整頓. 複数人が触れたコードはインデントとブレーススタイルが混在しがちです。一度整形するだけでファイル全体を統一レイアウトに揃えられ、次回の差分では空白の乱れではなくロジックの変化だけが見えるようになります。
- このツールはページを重くしません. 多くのオンラインフォーマッターはページを開いた瞬間にライブラリ全体を読み込みます。このツールは「整形」をクリックするかライブモードをオンにしたときだけ js-beautify を遅延ロードします。そのため初回表示は数百 KB ではなく数 KB で済み、初期レンダリングが速く保たれます。
- コードはブラウザーの外に出ません. ビューティファイアはあなたのデバイス上で完結します。コードはサーバーへ送信されません。点検するスクリプトがクライアントのものであったり、内部 API のパスを含んでいたり、秘密保持契約の対象であったりする場合に重要なポイントです。
主な用途
可読性を前提とせず書かれたコードを読む必要があるとき、いつでも JavaScript の整形が役立ちます。
- 本番デバッグ：Network タブから取得した圧縮バンドルを貼り付け、スタックトレースだけでは特定できない関数を見つける。
- コードレビュー準備：インデントが不揃いな貢献者のファイルを PR 提出前に整形し、レビュアーが空白の乱れではなくロジックを見られるようにする。
- セキュリティ・コンプライアンス監査：サードパーティの分析スクリプトや広告スニペットを展開し、本番適用前に正確な動作を確認する。
実践的な例
圧縮された一行コードを試してみましょう：function f(a){if(a){return a*2}else{return 0}}。インデントをスペース 2 つ・ブレーススタイルを「同行（Collapse）」に設定して上に貼り付け、整形ボタンを押してください。読みやすいブロックが返ってきます：function f(a) {、その下にインデントされた if (a) {、さらに一段深い return a * 2;、そして整列した閉じ括弧。ブレーススタイルを「改行（Expand）」に切り替えると、各開き括弧が独立行に移ります。インデントをタブに変えると、スペース 2 つがタブ文字に置き換わります。構造はまったく同じで、レイアウトだけが変わります。
FAQ
これはブラウザーで動きますか？
はい。js-beautify ライブラリは「整形」をクリックするかライブモードを有効にした最初の 1 回だけ遅延ロードされ、その後はキャッシュされます。コードはページを離れません——サーバーへの通信もアップロードもありません。
整形とアンミニファイは同じですか？
可読なフォーマット（インデント・改行・間隔）は復元できますが、ミニファイ時に失われた元の変数名やコメントは取り戻せません。ソースマップがあれば、ブラウザーの DevTools が元の名前を復元できます。ビューティファイア単体では、ファイルに残っている情報だけを処理します。
整形するとコードの動作が変わりますか？
変わりません。整形は空白と改行の追加・削除のみを行い、プログラムはまったく同じように動作します。トークンに触れる唯一のオプションは「セミコロンを補完」で、ASI が実行時に自動追加するはずのセミコロンを挿入するため、後で再ミニファイするときに安全です。
ブレーススタイルのオプションとは何ですか？
「同行（Collapse）」は開き括弧をステートメントと同じ行に置きます（if (x) {）——JavaScript では一般的なスタイルです。「改行（Expand）」はすべての開き括弧を独立した行に置きます（Allman スタイル）。「末尾改行（End-expand）」は開き括弧をステートメントに続けながら、else と catch を閉じ括弧の後ろの新しい行に置きます。
ブラウザーサイドの JavaScript 整形は、ビルドステップやアップロードなしで可読なコードを提供します。圧縮または雑然としたスクリプトを貼り付け、インデントとブレーススタイルを選び、結果をコピーまたはダウンロードしてください。コードはデバイスの外に出ず、アカウントも不要で、ライブラリはあなたが要求したときだけ読み込まれます——このページを開くコストは数キロバイトであり、数メガバイトではありません。