HTMLフォーマッター

HTMLのドキュメントや断片を貼り付けると、適切なインデントで整形したり、1行にまで圧縮したりできます。

崩れたマークアップはどうなる?

エラーにはなりません。このフォーマッターは厳密なDOM木を構築するのではなく、トークン単位で処理するjs-beautifyを使っているため、閉じタグのないタグ、対応の崩れた終了タグ、<head>を欠いたマークアップでもインデントが崩れることなく処理されます。インデント幅はスペース2つ、スペース4つ、タブから選べます。圧縮も同じ考え方で、コメントを取り除きタグの間の空白をまとめるテキスト処理の集まりであり、閉じられていない・入れ子が崩れたマークアップを無理に直そうとはせずそのまま残します。どちらの場合も、壊れたタグを一つずつ探して直す前に、荒れたHTMLをひとまず整えられます。

圧縮の際に特に気を付けているのが、<pre>、<textarea>、<script>、<style>要素の中身です。これらのタグの中の空白は意味を持つ（<pre>ブロックの改行など）か、詰めてしまうと壊れる実際のコード（インラインのJavaScriptやCSS）なので、このツールはこれらのブロックには手を付けず、普通のタグの間の空白だけを対象にします。

どこかにアップロードされる?

いいえ。整形も圧縮も、ページに読み込まれたjs-beautifyライブラリを使ってすべてブラウザ内で完結し、サーバーには何も送信されません。そのため、ページテンプレートやメール用マークアップ、実際の顧客データを含むスクレイピング結果でも、手元のマシンから外に出ることなくこのツールにかけられます。

どんな場面で役立つ?

よくあるのは、view-sourceで保存した圧縮済みページを読める形に整えたり、送信前にHTMLメールのテンプレートのファイルサイズを縮めたり、コードレビュー前にコンポーネントのマークアップを一定のインデント幅にそろえたりする場面です。逆方向にも使えます。スペースの空け方がバラバラな手書きのHTMLを、設定値やdata-*属性に貼り付けられる1行にまとめたいときも、圧縮で一発で片付きます。

2つのモードを切り替えるのは、ページの2つのバージョンを比較する際にも便利です。差分ツールはインデントのスタイルが揃ったマークアップの方がずっと見やすい結果を出すためです。静的サイトやコンポーネントライブラリを保守しているなら、生成されたHTMLやコピー&ペーストしたHTMLをコミット前にこのツールに通しておくと、出どころがバラバラでもコードベース全体の見た目を揃えられます。