HTML コードをフォーマット・ミニファイする方法

HTMLのフォーマットとミニファイは、異なる目的を果たす反対の操作です。フォーマットは開発者のためにコードを読みやすくします。ミニファイはブラウザのためにコードを小さくします。ほとんどのプロジェクトは両方を必要とします。開発でフォーマット済みコード、本番でミニファイ済みコードです。これは関連する兄弟ツール(CSSのフォーマッタ/ミニファイア、JavaScriptのフォーマッタ/ミニファイア、JSONフォーマッタ)にも同じことが当てはまります。パターンは同じで、構文だけが異なります。

フォーマット: HTMLを読みやすくする

フォーマッタは圧縮された、または乱雑なHTMLを取り、適切なインデント、改行、一貫したスペースを追加します。これにより構造が一目で見えるようになります。

変換前:

<div class="card"><h2>Title</h2><p>Some text here</p><a href="/link">Read more</a></div>

変換後:

<div class="card">
  <h2>Title</h2>
  <p>Some text here</p>
  <a href="/link">Read more</a>
</div>

HTMLをフォーマットする手順

1. HTMLを貼り付ける: 乱雑またはミニファイされたコードをフォーマッタに入力します。
2. 設定を選ぶ: インデントサイズ(2または4スペース)と、インラインタグを保持するかを選びます。
3. 結果をコピー: フォーマットされたHTMLはエディタで使う準備ができています。

ミニファイ: HTMLを小さくする

ミニファイアは、ブラウザが必要としないすべて、つまり空白、コメント、任意の閉じタグ、冗長な属性値を取り除きます。結果は単一の、コンパクトな文字列です。

HTMLをミニファイする手順

1. フォーマット済みHTMLを貼り付け: インデント、コメント、空白のあるコードを入力します。
2. オプションを設定: コメントの削除、空白の縮小、属性の最適化を選択します。
3. ミニファイされた出力をコピー: 本番ビルドで使います。

それぞれをいつ使うか

HTMLミニファイの簡単な歴史

HTMLは1991年に人間が読めるように設計されたため、元の仕様(1995年のHTML 2.0)には圧縮の規定がありませんでした。ミニファイの考えは、まずCSSとJavaScriptから育ちました。Douglas Crockfordの JSMin(2001年)は最初に広く使われたJavaScriptミニファイアで、ダイヤルアップユーザーのためにファイルサイズを減らすコメントと空白を削除しました。HTMLMin(npmパッケージ)は2009年に続き、その後htmlmin(Python)が2013年に登場しました。モダンなビルドツール(Webpack 2014年、Vite 2020年、esbuild 2020年)は、本番ステップのデフォルトとしてHTMLミニファイを含みます。

Gzip圧縮(1999年にHTTPコンテンツエンコーディングとして導入)とBrotli(2015年)は、サーバーが送るものを何でも圧縮します。つまり、ミニファイされたHTMLは、フォーマットされたバージョンとほぼ同じサイズに圧縮されます。なぜミニファイするのか? なぜなら、圧縮されたミニファイ済みバージョンは、圧縮されたフォーマット済みバージョンよりもまだ約5から15%小さいからです。トラフィックの多いサイトの何百万回ものページロードにわたって、これは実際の帯域幅節約と、低速接続のユーザーにとってのTime-to-First-Byteの高速化につながります。

ミニファイが実際に取り除くもの

ミニファイアでよく見る設定:

• 空白を折りたたむ: 行の先頭と末尾のすべての空白を削除し、空白の連続を単一のスペース(またはタグ間ではゼロ)に減らします。
• HTMLコメントを削除: <!-- コメント -->ブロックは取り除かれます(古いブラウザが実際に使う<!--[if IE]>のような条件コメントを除く)。
• 任意のタグを削除: HTML5は特定の文脈で</li>、</p>、</td>などの省略を許可します。積極的なミニファイアはこれらを取り除きます。
• 冗長な属性値を削除: <input type="text">は<input>になります(textがデフォルト)。<form method="get">は<form>になります。
• 短いブール属性を使う: disabled="disabled"はdisabledになります。
• インラインCSSとJSを最適化: 一部のミニファイアは最終パスとして、CSSをcssnano経由、JavaScriptをTerser経由で実行します。

出力はもう人間が読めるものではありませんが、入力と機能的に同一です。

よくある落とし穴

• <pre>と<textarea>の空白は重要: <pre>ブロック(書いたまま正確にコードやテキストを表示する)内の空白を折りたたむと、見える書式が壊れます。ほとんどのミニファイアはデフォルトで<pre>、<textarea>、<script>タグ内の空白を保持しますが、ミニファイアにカスタム設定がある場合は確認してください。
• ロジックに影響するコメント: 一部のビルドパイプラインは、HTMLコメントをマーカーとして使います(例: アセットパイプラインの<!-- inject:scripts -->)。これらを削除するとビルドが壊れます。マーカーコメントを保持するようミニファイアを設定してください。
• HTML内のテンプレート構文: Handlebarsの{{var}}、Nunjucksの{% block %}、Jinjaの{{ }}などのテンプレート構文は、それを知らないミニファイアを混乱させることがあります。テンプレートエンジンを認識するミニファイアを使うか、テンプレートをプレーンHTMLにレンダリングした後にミニファイしてください。
• インラインイベントハンドラとJavaScript: 積極的なミニファイアは、内部のJavaScriptをミニファイしようとすると、インラインonclick="alert('hi')"を壊すかもしれません。デフォルト設定は通常これらをスキップします。出力で確認してください。
• エンコーディングのエッジケース: 空白を積極的に取り除きすぎるミニファイアは、単語の境界が微妙な空白ルールに依存する非ラテン文字を壊すことがあります。実際の言語のコンテンツでテストしてください。

一方を使うか他方を使うか

フォーマッタを使う場面:

• ミニファイされたHTMLファイルを引き継ぎ、構造を理解する必要がある
• 書式を取り除くエディタから貼り付ける(一部のCMSはこれをします)
• ペアプログラミングまたはコードレビューを行う
• デバッグ中で、タグがどこで開いて閉じるかを見る必要がある

ミニファイアを使う場面:

• ビルドパイプラインがまだミニファイしていない(モダンなものはほとんどします)
• JSON APIレスポンスやメールテンプレートにHTMLをインライン化する
• HTMLをバイナリアセット(単一ファイルPDF、デスクトップアプリインストーラー)にバンドルする
• 可能な限り小さなページ重量のために静的サイトを最適化する

プライバシーと機密コード

フォーマッタとミニファイアの両方が完全にブラウザ内で動作します。貼り付けたHTMLはデバイス上に留まります。アップロードはありません。これは機密コンテンツを含むHTMLにとって重要です。リリース前のマーケティングページ、内部の管理ダッシュボード、NDA下のクライアントテンプレート、ビジネスロジックを明かすプレースホルダーデータを含む部分テンプレートなど。クラウドのHTMLツール(ほとんどのオンラインビューティファイア)はHTMLをサーバーにアップロードする必要があり、これは機密マークアップに対してまさに避けたいことです。

使いこなしのヒント

• ビルドプロセスで自動化する: ほとんどのビルドツール(Webpack、Vite、Gulp、Eleventy、Astro)は、デプロイ時にHTMLを自動的にミニファイできます。フォーマット済みコードを書き、ミニファイ済みコードを出荷します。
• コミット前にフォーマット: クリーンで一貫したフォーマットのHTMLは、Git差分を読みやすくし、コードレビューを速くします。保存時フォーマットのために、エディタでPrettierやBeautifyと組み合わせてください。
• ミニファイはHTMLを壊さない: レンダリングに影響しないコンテンツのみを削除します。コメント、余分な空白、任意のタグは安全に削除できます。例外は<pre>/<textarea>のコンテンツで、ほとんどのミニファイアは正しく保持します。
• 構文ハイライトを使う: フォーマッタとミニファイアの両方が色付きの構文ハイライトを提供し、出力が正しいかを確認しやすくします。
• レンダリングされた出力をテスト: ミニファイ後、ブラウザでページをロードし、正しく見えることを確認します。ミニファイのバグは通常、コンテンツの欠落やレイアウトの崩れとして現れます。