HTMLインクルードの
ベストプラクティス

2018.11.14 @otsukayuhi

結論

そんなものは、ない。

プロジェクトに合わせて、

適切な方法を選択する

必要がある。

index

• HTMLをインクルードする方法
• それぞれの使い所
• まとめ

HTMLをインクルードする方法

HTMLをインクルードする方法

• プリプロセッサーでの静的挿入

• クライアントサイドでの動的挿入

• サーバーサイドでの動的挿入

プリプロセッサーでの静的挿入

プリプロセッサー（テンプレートエンジン）を使い、
開発時は別ファイルとして挿入。
ビルドした本番用ファイルはHTMLベタ書きにする方法。

プリプロセッサーでの静的挿入

メリット

• 静的なため高速
• ハンドリングしやすい

デメリット

• 修正時、差分が大量に出る

クライアントサイドでの動的挿入

JavaScriptを使用し、クライアントサイドで動的に要素を生成する。

• document.createElement & element.appendChild
• jQuery .html()
• Vue.js コンポーネント
• React JSX
• HTML Modules for Web components

クライアントサイドでの動的挿入

メリット

• 修正時の差分は、インクルードするファイルだけでOK
• ハンドリングしやすい

デメリット

• ブラウザへの負担が大きい

サーバーサイドでの動的挿入

サーバーサイドで事前にレンダリングしておく。

• SSI
• PHP include
• ユニバーサル JavaScript SSR

サーバーサイドでの動的挿入

メリット

• 修正時の差分は、インクルードするファイルだけでOK
• ブラウザへの負担が少ない

デメリット

• サーバー側に負担がかかる
• サーバーの対応状況により、使いないことがある

それぞれの使い所

プリプロセッサー

• ページ数が少ない
• 少しでも速く！
• サーバーを握っている

クライアント

サーバー

• ページ数が多い
• 動的に変化させたい
• サーバーの仕様が不明

• ページ数が多い
• 動的に変化しない
• サーバーが強力

まとめ

まとめ

• HTMLインクルードに最適解は無い

  • プロジェクトにより使い分けよう！

• HTMLをインクルードする方法

  • プリプロセッサーでの静的挿入

  • クライアントサイドでの動的挿入

  • サーバーサイドでの動的挿入
    

プリプロセッサー

• ページ数が少ない
• 少しでも速く！
• サーバーを握っている

クライアント

サーバー

• ページ数が多い
• 動的に変化させたい
• サーバーの仕様が不明

• ページ数が多い
• 動的に変化しない
• サーバーが強力

• それぞれの使い分け

Enjoy Include ! 😁