Multi-Stage Generation

PHP(サーバー内)で (クライアント側で動的に組み立てる JavaScript / HTML / CSS) を生成する仕組み

多段生成 (PHP / JS / HTML / CSS 生成方法の比較)

番号
CSS生成方法
HTML生成方法
JS依存
特徴
1
PHPで直接出力
PHPで直接出力
×
最もシンプル、CSSアニメはkeyframes依存
2
JSで element.style
JSで生成
○
CSSは個別要素に直接設定
3
HTML内の <style>
JSで生成
○
CSSはクラス、JSでHTML生成
4
JSで Object.assign
JSで生成
○
CSSもHTMLもほぼJS内で生成
5
JSで <style> タグ作成
JSで生成
○
完全にPHP→JS→HTML/CSSの形、ソースを隠しやすい
① ▶︎  ② ▶︎  ③ ▶︎  ④ ▶︎  ⑤ ▶︎
　
multi_stage_generation download ▼
┌──────────────────────────────┐
│          サーバー側 (PHP)
│  ┌────────────────────────┐
│  │ PHPスクリプトがHTMLやJSを出力 │
│  │ 例: echo "";
│  └────────────────────────┘
└──────────────────────────────┘
                │
                ▼
┌──────────────────────────────┐
│       クライアント側 (ブラウザ)
│  ┌────────────────────────┐
│  │ JSがHTML要素を生成 (createElement等)
│  │ JSが<style>やCSSプロパティを生成
│  └────────────────────────┘
│                │
│                ▼
│  ┌────────────────────────┐
│  │ HTML構造が完成し、CSSが適用される
│  │ → ブラウザが画面に描画する
│  └────────────────────────┘
└──────────────────────────────┘

ちなみに WordPress のシステムは多層生成(multi-layer system) になっている.
さらに SNS は多形式生成(Multi-Output Generation) になっている.