HTML 整形の仕組み
ビューティファイアはマークアップをタグごとに読み取り、各要素のネスト深度を追跡しながら、一貫したインデントで再出力します。ページのレンダリングは一切変えず、ソースのレイアウトだけを整えます。
- タグを解析. ライブラリは入力を開きタグ・閉じタグ・テキストコンテンツ・コメント、そして script ブロックと style ブロックの内容というトークンのストリームにスキャンします。クォートされた属性値と pre・textarea 要素の本体は単一の単位として扱われるため、その内部の空白はそのまま保たれます。
- ネストを追跡. トークンストリームを走査しながら、ビューティファイアはインデントレベルをリアルタイムで管理します。自己閉じではない開きタグが現れるとレベルが深くなり、対応する閉じタグでレベルが戻ります。この深度が各行の先頭に付くインデント数を決めます。
- オプションの適用. インデントの選択（スペース 2 つ・スペース 4 つ・タブ）が 1 レベルの幅を決めます。折り返し列数の値は、属性やテキストが指定した列を超えたときに長い行を分割します。空行の上限設定は、連続した空行をあなたが指定した数以下に折り畳みます。
- マークアップを再出力. 最後にフォーマッターが、計算済みのインデントと改行でタグを出力します。インライン整形をオンにした場合は、各 style ブロックの内容が CSS フォーマッターを通り、各 script ブロックの内容が JS フォーマッターを通るため、埋め込みコードが周囲のマークアップと揃って出力されます。
HTML を整形する理由
- 圧縮ページを読む. 本番 HTML は改行を取り除いてバイトを節約しています。整形すれば構造が復元され、目的のセクションを探したり、閉じ忘れのタグを見つけたり、ドキュメントの実際のネストを追ったりできるようになります。
- 不揃いなテンプレートを整頓. 複数人が触れたマークアップはインデントとタグの位置が混在しがちです。一度整形するだけでファイル全体を統一レイアウトに揃えられ、次回のコミットで空白の乱れではなく実際の変更だけが見えるようになります。
- このツールはページを重くしません. 多くのオンラインフォーマッターはページを開いた瞬間にライブラリ全体を読み込みます。このツールは「整形」をクリックするかライブモードをオンにしたときだけ js-beautify を遅延ロードします。そのため初回表示は数百 KB ではなく数 KB で済み、初期レンダリングが速く保たれます。
- マークアップはブラウザーの外に出ません. すべてあなたのデバイス上で完結します。マークアップはサーバーへ送信されません。点検するページがクライアントのものであったり、内部 URL を含んでいたり、秘密保持契約の対象であったりする場合に重要なポイントです。
主な用途
可読性を前提とせず書かれたマークアップを読む必要があるとき、いつでも HTML の整形が役立ちます。
- 本番ページの調査：「ページのソースを表示」で取得した圧縮ソースを貼り付け、ローカルで再現できないレイアウトバグの原因となるマークアップを見つける。
- CMS 出力のクリーンアップ：ページビルダーが 1 行に書き出したテンプレートを再フォーマットしてからリポジトリにコミットする。
- アクセシビリティ・SEO 確認：ドキュメントを展開して、見出し順序・ランドマーク構造・alt 属性が実際の DOM 通りかどうかを確かめる。
実践的な例
圧縮されたスニペットを試してみましょう：<div><p>hi</p><span>x</span></div>。インデントをスペース 2 つに設定して上に貼り付け、整形ボタンを押してください。読みやすいブロックが返ってきます：<div> が独立行に、<p>hi</p> と <span>x</span> がそれぞれ 1 段インデントされ、対応する </div> がその下に揃います。インデントをタブに切り替えると、各レベルがスペース 2 つからタブ文字に変わります。<style>a{color:red}</style> ブロックを追加して「インライン CSS と JS も整形する」をオンにすると、ルールが 1 行に押し込まれた状態から各自インデントされた行に展開されます。
FAQ
これはブラウザーで動きますか？
はい。js-beautify ライブラリは「整形」をクリックするかライブモードを有効にした最初の 1 回だけ遅延ロードされ、その後はキャッシュされます。マークアップはページを離れません——サーバーへの通信もアップロードもありません。
整形するとページのレンダリングが変わりますか？
変わりません。ビューティファイアはタグ間の空白と改行の追加・削除のみを行います。ブラウザーはページを構築する際にその空白を無視するため、レンダリング結果はまったく同じです。pre・textarea・インライン要素の内部にある空白に敏感なコンテンツは、フォーマッターが意図的に手を付けません。
インライン CSS と JS のトグルは何をしますか？
オフのとき、style ブロックと script ブロックの内容は貼り付けたままの状態で保たれます。オンにすると、各 style ブロック内の CSS が CSS フォーマッターを通り、各 script ブロック内の JavaScript が JS フォーマッターを通るため、埋め込みコードのインデントが周囲のマークアップと揃います。
「折り返し列数」とは何ですか？
多くの属性を持つタグや長いテキストが、指定した列数を超えたときに複数行に分割されるラインの長さを設定します。0 に設定するとどれだけ長くても 1 行のままです。80 または 120 に設定すると、その列を超えた部分が折り返され、幅の広い要素も狭いエディターで読めるようになります。
ブラウザーサイドの HTML 整形は、ビルドステップやアップロードなしで可読なマークアップを提供します。圧縮または雑然としたページを貼り付け、インデントと折り返し列数を選び、インライン CSS と JS を整形するかどうかを決めたら、結果をコピーまたはダウンロードしてください。マークアップはデバイスの外に出ず、アカウントも不要で、ライブラリはあなたが要求したときだけ読み込まれます——このページを開くコストは数キロバイトであり、数メガバイトではありません。