わたしのべんきょうノート

<h2 id=React (Frontend)> React (Frontend)</h2><div class="visible-content"> #Article #Blog #Frontend

Issue Date: 2025-05-01 React がビルドされるまでの流れを理解したい, ツチノコ, 2023.12 Comment<p>Reactがビルドされる流れは、
- Webpackでバンドル（アセットをまとめる）し
- Babelでトランスパイルし（ES5（古い仕様のJS） に変換）し
- tscでJavaScriptに変換

する</p>

</div>

if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const el = entry.target;
        const html = el.getAttribute('data-embed');
        if (html) {
          const placeholder = el.querySelector('.tweet-placeholder');
          if (placeholder) placeholder.remove();

          el.innerHTML = html.trim();

          if (window.twttr?.widgets?.load) {
            window.twttr.widgets.load(el);
          }
        }
        obs.unobserve(el); // 処理済みは監視解除
      }
    });
  }, {
    rootMargin: '500px 0px', // 画面手前200pxで読み込み開始
    threshold: 0
  });

  tweets.forEach(tweet => observer.observe(tweet));

} else {
  // IntersectionObserver未対応ブラウザ用のフォールバック
  function lazyLoadFallback() {
    tweets.forEach(el => {
      if (el.getAttribute('data-embed') && el.getBoundingClientRect().top < window.innerHeight) {
        const html = el.getAttribute('data-embed');
        const loadingImg = el.querySelector('.tweet-loading');
        if (loadingImg) loadingImg.remove();
        el.innerHTML = html.trim();
        el.removeAttribute('data-embed');
        if (window.twttr?.widgets?.load) {
          window.twttr.widgets.load(el);
        }
      }
    });
  }
  window.addEventListener('scroll', lazyLoadFallback);
  lazyLoadFallback();
}   }); </script>