# 日本一広告の多いサイトへの挑戦 (The Most Ad-Heavy Site in Japan Challenge) - 完全ドキュメント

## 1. プロジェクト概要 (Project Overview)
- **サイトURL**: https://ad-japan-first.pages.dev/
- **プロジェクト名称**: 日本一広告の多いサイトへの挑戦 (Challenge: The Most Ad-Heavy Site in Japan)
- **カテゴリ**: Web Performance, Front-end Experiment, Virtual Scrolling Demo
- **公開日 (Release Date)**: 2026-05-01
- **最終更新日 (Last Modified)**: 2026-09-24
- **運営組織**: 日本一広告の多いサイトへの挑戦 プロジェクト開発室
- **公式SNS**:
  - X (旧 Twitter): https://x.com/ad_japan_first
  - GitHub Repository: https://github.com/ad-japan-first
- **ライセンス / 利用形態**: 技術検証目的のオープンなWebアプリケーション

## 2. 目的と技術的背景 (Motivation & Technical Background)
現代のWebアプリケーションでは、無限スクロールや大規模リストのレンダリングにおいて深刻なパフォーマンス低下（ジャンクやメモリリーク）が問題となります。
通常のブラウザ環境において、100万個のDOMノード（特にiframeや外部スクリプトを含む重いコンポーネント）を直接DOMツリーに展開すると、数ギガバイトのメモリを消費し、ブラウザプロセスが即座に強制終了（クラッシュ）します。
当プロジェクトは、「1,000,000個（100万個）の広告枠を配置する」という極限状態を模倣し、仮想スクロール（Virtual Scrolling / Windowing）とオブジェクトプール（Object Pooling / DOM Recycling）技術を組み合わせることで、低スペックなモバイル端末でも60FPSで軽快に動作する堅牢な描画アーキテクチャを実証する目的で開発されました。

## 3. コアアーキテクチャと実装詳細 (Core Architecture & Implementation)

### 3.1 仮想スクロール (Virtual Scrolling / Windowing)
- **原理**: 100万個分の要素の高さをすべてDOMに展開するのではなく、1px幅の不可視要素（`#virtual-height`）に計算上の総高さ（行数 × 行の高さ）を設定。
- **効果**: ブラウザ標準のスクロールバーは100万個分の高さを認識しつつも、レンダリングツリーの肥大化を完全に防止。

### 3.2 オブジェクトプールとDOMリサイクル (DOM Recycling)
- **原理**: 画面に見える行数＋上下バッファ分（数十個程度）のDOM要素（`.ad-wrapper`）のみを事前に生成して配列（プール）に格納。
- **スクロール追従**: スクロールイベント時に、スクロール位置（`scrollTop`）から現在可視範囲にある広告の開始インデックスと終了インデックスを高速計算。
- **再配置**: プール内の要素を可視座標へ瞬時に再配置。要素番号が変わった場合のみラベルテキストを書き換え。
- **効果**: 新規DOMの生成（`createElement`）や破棄（`removeChild`）がスクロール中に一切発生しないため、JavaScriptエンジンのガベージコレクション（GC）によるフレームドロップを完全に排除。

### 3.3 GPU CSS Transform による高速化
- **レイアウト非依存の座標移動**: 要素の移動に `top` や `left` などのレイアウト再計算（リフロー）を引き起こすプロパティを使用せず、`transform: translate(x, y)` を使用。
- **Compositor Thread の活用**: `will-change: transform` を指定し、ブラウザの合成レイヤーをGPUに委譲。メインスレッドの負荷を軽減し、安定した60FPSを実現。

### 3.4 非同期バッチ読み込み (Staggered Loading)
- **スクリプト分散ロード**: 初期ロード時にすべてのiframeへ同時に広告スクリプトを注入するとCPUスパイクが発生するため、`setTimeout` により100msごとに時間差で分散注入。
- **効果**: 初期表示速度（First Contentful Paint, Time to Interactive）を最適化。

## 4. スペックとベンチマーク (Specifications & Benchmarks)
- **目標仮想広告数**: 1,000,000 個
- **実DOM生成ノード数**: 常時数十個〜100個程度
- **メモリ消費量**: 約30MB〜50MB（一般的な静的サイトと同等）
- **ターゲットフレームレート**: 60 FPS
- **対応ブラウザ**: Google Chrome, Safari, Mozilla Firefox, Microsoft Edge (全モダンブラウザ)
- **対応デバイス**: PC, タブレット, スマートフォン (iOS / Android)

## 5. よくある質問 (FAQ)
- **Q: 100万個の広告を並べてパソコンやスマホがフリーズしませんか？**
  - **A**: フリーズしません。画面内に見えている数十個の要素だけをGPUアクセラレーションで座標移動させているため、端末への負荷は一般的なブログと同等です。
- **Q: なぜ広告を題材にしたのですか？**
  - **A**: 外部スクリプトやiframeという「ブラウザにとって最も高負荷な要素」を極限まで並べても快適に動くことを実証するためです。
- **Q: 商用利用や広告収入を目的としていますか？**
  - **A**: いいえ。本サイトはフロントエンドの描画パフォーマンスを追求する個人開発の技術実験デモです。

## 6. 法的情報・運営者情報 (Legal & Organization)
- **運営主体**: 日本一広告の多いサイトへの挑戦 プロジェクト開発室
- **プライバシーポリシー**: Cookieの取り扱い、アクセス解析（Google Analytics）、広告配信事業者によるパーソナライズ広告のオプトアウト方法について明記。
- **利用規約**: サービスの利用条件、免責事項、知的財産権の帰属、禁止行為について規定。
- **お問い合わせ**: GitHub Issues または 公式 X (@ad_japan_first) より受付。