コンポーネントの抽出とパーシャル

HTML のコードベースが大きくなると、サイトヘッダー、フッター、ナビゲーション、商品カード、フォームフィールドなど、同じマークアップのまとまりが複数のページに現れます。コピー＆ペーストで作成すると保守が困難になり、フッターを変更するだけでもすべてのページを編集しなければなりません。

多くのサーバーサイドテンプレート言語（Jinja、Liquid、ERB、EJS、Handlebars、Twig）は、include ディレクティブに対応しています。{% include "header.html" %} や <%- include("header") %> のように記述します。include したすべてのページに、ビルド処理またはサーバーが partial をインライン展開します。

JSX/TSX（React）、Vue SFC、Svelte コンポーネント、Astro コンポーネントは、より明確なセマンティクスで同じ考え方を表現します。コンポーネントは構造、スタイル、動作をカプセル化します。これらはビルド時（SSG）または実行時（SSR/CSR）に HTML へコンパイルされます。

partial やコンポーネントは目的別にグループ化してください。ヘッダー、フッター、ナビゲーションには partials/layout/、ヒーロー、特徴紹介、CTA ブロックには partials/blocks/、フィールド、ボタン、セレクトには partials/forms/ を使用します。一貫した整理により、partial のライブラリが大きくなっても見つけやすくなります。

partial は、パラメーターを使うとさらに便利になります。{% include "button.html" with label="Save", variant="primary" %} のように指定し、partial 内ではパラメーターを名前で参照します。同じテンプレートで、サイト内のさまざまなボタンを描画できます。

カードやダイアログなど、任意のコンテンツをラップする partial には、スロットパターンを使用します。Jinja では {% block content %}{% endblock %}、Twig では {% block %}、JSX では {children} prop を使います。ラップする partial が外枠を提供し、利用側が内部のコンテンツを提供します。

静的サイトジェネレーター（11ty、Astro、Hugo、Jekyll）はビルド時に include を解決するため、デプロイされた HTML にテンプレート構文は残りません。動的テンプレート（PHP、Rails、Express+EJS）はリクエスト時に解決されるため柔軟ですが、処理は遅くなります。リクエストごとにコンテンツを動的にする必要があるかどうかに基づいて選択してください。

partial は独自の CSS を持つようにしてください。フッターの partial は footer.css を、ボタンの partial は button.css を管理します。さらに、ページで実際に使用している partial の CSS だけを連結するビルド処理を組み合わせると、すべてのコンポーネントの CSS をどのページでも読み込む必要がなくなります。

各 partial は、単独でテストできるようにしてください。さまざまなデータで描画し、出力を検証します。Cypress のコンポーネントテストや Jest のスナップショットテストなどのツールは、HTML partial にも適用できます。テスト済みの partial なら、利用しているすべてのページを手作業で確認しなくても安全に変更できます。

partial は API です。パラメーター名、スロットの規約、必須 prop を変更すると、すべての利用側に対する破壊的変更になります。partial のインターフェースを文書化し、段階的に非推奨化し、リファクタリングの前に検索ツールですべての使用箇所を見つけてください。

partial を組み合わせてページを構築します。ヘッダー、サイドバー、コンテンツ、フッター、分析用の partial などを組み合わせます。各 partial は小さく目的を絞るため、ページ自体はそれらを接続する薄い組み立てスクリプトになります。800 行の単一ファイル HTML よりも、はるかに理解しやすくなります。

partial を抽出するには、まず複数のページに重複しているマークアップを特定し、partials/X.html にコピーします。各箇所を include ディレクティブに置き換え、呼び出し元によって異なる値をパラメーター化してください。一度に 1 つの partial を扱い、コードベースを段階的に改善します。

サイトのフッターのような繰り返し使われる HTML のまとまりを partial に抽出する主なメリットは何ですか？

繰り返し使う HTML は、サーバーサイドインクルード（Jinja、Twig、EJS）やフレームワークコンポーネント（React、Vue、Svelte、Astro）を使って partial やコンポーネントに抽出します。パラメーターでデータを渡し、スロットで組み合わせます。目的別に整理し、単独でテストし、partial のシグネチャを API として扱ってください。段階的に移行することで、抽出するたびに重複が減り、保守性が向上します。