HTMLフォーマッター

ほとんどのHTMLは、フォーマッターが空白を自由に再構成することを許容します — `<div>`や`<p>`のようなブロック要素の間の余分なインデントは目に見える影響がありません。ブラウザはレンダリング時にそれらの要素間の空白の連なりを折りたたむためです。3つの特定のケースがこの想定を完全に破ります: `<pre>`の中身は、書かれたとおり文字通りにすべてのスペースと改行をレンダリングします。`<textarea>`はユーザーが編集可能な正確なテキストを再現することを目的としているため、その内容を同じように扱います。そしてCSSで`white-space: pre`を持つどんな要素も同じ文字通りの扱いを継承します。それらのブロックのどれかの中で空白を再構成するフォーマッターは、ソースコードの見た目だけでなく、ページが実際に表示するものを変えてしまいます — だからこそこのフォーマッターは通常のインデントルールを適用する代わりに、それらを完全に無傷のまま残します。

テキストのすぐ隣に置かれたインライン要素はより微妙なケースです: 2つのインライン要素の間のスペースは時々視覚的に意味を持ちます — 別々の`<span>`タグにまたがる2つの単語の間のスペースなど — そのためフォーマッターはインラインコンテンツに対して意図的に保守的であり、実際に視覚的な仕事をしていたスペースを折りたたむリスクを冒すより、曖昧な空白をそのまま残すことを好みます。

単一のHTMLファイルとして組み立てられたページは、独自のCSSを`<style>`ブロックの中に、独自のJavaScriptを`<script>`ブロックの中に埋め込むことが多く、HTMLタグしか理解しないフォーマッターは、その埋め込みコードを未整形のブロックのまま放置するか、悪くすると波括弧やセミコロンをHTML構文として扱って台無しにしてしまいます。それらのブロックの内容をそれぞれ本物のCSSパーサーと本物のJavaScriptパーサーに渡すことで、ファイル全体 — マークアップ、スタイル、挙動すべて — が、外側のHTML構造だけでなく一貫して整形されて戻ってきます。

ブラウザは、閉じられていないタグ、欠けている引用符、無効な順序でネストされた要素といった、著しく不正な形式のマークアップからでも合理的な何かをレンダリングするために特別に設計されたエラー回復モデルを備えています。Webには今でも表示する必要がある不完全なHTMLが本番環境に何十年分もあるためです。フォーマッターは同じ寛容さを採用できません: ドキュメントを再整形するには、何が何の中にネストされているかについての正確な構造的理解を構築する必要があり、本当にバランスの取れていないタグを持つドキュメントには、回復すべき唯一の正しい構造がありません。だからこそブラウザでは完全に正常に表示されるページが、このフォーマッターでは拒否されることがあります — ブラウザは曖昧さを自分なりのやり方で黙って修復しましたが、正しく再整形しようとするツールは、推測するのではなくその曖昧さを指摘しなければならないのです。

整形に失敗するファイルは、多くの場合まったく壊れたHTMLではなく、テンプレート — Handlebars、Jinja、Blade、EJSなど — であり、テンプレートディレクティブとマークアップを混在させ、それ自体では有効な独立したHTMLではなく、そもそもそうである必要もないドキュメントを生成しています。テンプレートは、そのテンプレートエンジンが実行されて実際のデータに置き換えられた後にのみ、本物の整形されたHTMLになります。テンプレートエンジンによって処理された後にキャプチャされたレンダリング済み出力 — 例えばブラウザの「ページのソースを表示」から — を整形すれば、その出力はテンプレート構文が残っていない本物のHTMLであるため、これを完全に回避できます。