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 ! 😁

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

By Otsuka Yuhi

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

  • 127
Loading comments...

More from Otsuka Yuhi