React × AdSense統合での問題解決記録【保存版】

はじめに

非エンジニアのRyoです。今回はReact × AdSense統合で広告表示の問題に挑戦しました。正直、最初は「リザルト画面に広告スペースはあるのに表示されない」「localhostでは動作しないって何？」って感じで、マジでわからんかったんですよね。

でも、実際にやってみると意外と奥が深くて、技術的な課題を一つずつ解決していく過程で、すげー実用的な知識が身につきました。同じように「ReactでAdSenseを使いたいけど、うまく表示されない」って悩んでいる非エンジニアの方の参考になればと思います。

今回やったこと

・React + TypeScript + Vite環境でAdSense統合
・320px × 100pxの固定バナー広告を安定表示
・初期化タイミングの問題を解決
・レイアウト崩れを修正
・再利用可能なAdSenseコンポーネントを作成

問題概要

初期状況

リザルト画面に広告スペースはあるが、広告が表示されない状況でした。

環境

・React + TypeScript + Vite
・目標：320px × 100pxの固定バナー広告を安定表示

技術的課題と解決プロセス

課題1：初期設定の問題

問題：AdSenseスクリプトの初期化タイミング

最初はこんな感じのコードを書いていました：

// ❌ 問題のあるコード
useEffect(() => {
  (window.adsbygoogle = window.adsbygoogle || []).push({});
}, []);

これだと初期化タイミングが合わなくて、広告が表示されませんでした。

解決：段階的初期化と再試行ロジック

改善後のコードはこんな感じです：

// ✅ 改善後のコード
const initializeAd = () => {
  if (typeof window !== 'undefined' && window.adsbygoogle && adRef.current) {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
    initializedRef.current = true;
  } else {
    setTimeout(initializeAd, 200); // 再試行
  }
};

正直、最初は「なんで再試行が必要なの？」って感じでしたが、DOMの準備完了を待つ必要があるんですよね。

課題2：重複初期化の防止

問題：コンポーネント再レンダリング時の重複初期化

Reactのコンポーネントが再レンダリングされるたびに、AdSenseが重複初期化されてしまう問題がありました。

解決：useRefによる初期化状態管理

const initializedRef = useRef(false);
if (initializedRef.current) return; // 重複防止

これで重複初期化を防げるようになりました。

課題3：レスポンシブ広告の不安定性

問題：レスポンシブ設定による予期しないサイズ変更

最初はレスポンシブ設定を使っていました：

<!-- ❌ 不安定なレスポンシブ設定 -->
<ins data-ad-format="auto" data-full-width-responsive="true" />

でも、これだと予期しないサイズ変更が起きて、レイアウトが崩れてしまいました。

解決：固定サイズ設定

<!-- ✅ 安定した固定サイズ -->
<ins style="display:inline-block;width:320px;height:100px" />

固定サイズにすることで、予測可能な配置ができるようになりました。

レイアウト問題の解決

問題1：二重h-screen問題

問題

<div className="h-screen">  {/* 外側 */}
  <div className="h-screen"> {/* 内側 - 問題 */}

これだと高さ指定が競合して、レイアウトが崩れてしまいます。

解決

<div className="h-screen">  {/* 外側 */}
  <div className="h-full">  {/* 内側 - 修正 */}

親子関係での高さ指定に注意が必要です。

問題2：下部UI配置問題

問題：mt-autoで下詰めしても画面下端に届かない

// ❌ 期待通りに動作しない
<div className="mt-auto">

解決：絶対配置による確実な下端配置

// ✅ 確実に画面下端に配置
<div className="absolute bottom-0 left-0 right-0">

絶対配置を使うことで、確実に画面下端に配置できるようになりました。

問題3：広告の中央揃え

問題：固定サイズ広告が左詰めで表示

解決：Flexboxによる中央配置

<div className="flex justify-center">
  <AdSense />
</div>

Flexboxを使うことで、美しい中央配置ができるようになりました。

最終的なAdSenseコンポーネント

問題をすべて解決した結果、こんな感じのコンポーネントができました：

const AdSense: React.FC<AdSenseProps> = ({ slot, className = '' }) => {
  const adRef = useRef<HTMLModElement>(null);
  const initializedRef = useRef(false);

  useEffect(() => {
    const initializeAd = () => {
      if (initializedRef.current) return;

      if (typeof window !== 'undefined' && window.adsbygoogle && adRef.current) {
        (window.adsbygoogle = window.adsbygoogle || []).push({});
        initializedRef.current = true;
      } else {
        setTimeout(initializeAd, 200);
      }
    };

    const timer = setTimeout(initializeAd, 100);

    return () => {
      clearTimeout(timer);
      initializedRef.current = false;
    };
  }, [slot]);

  return (
    <div className="adsense-container">
      <ins
        ref={adRef}
        className="adsbygoogle"
        style={{ display: 'inline-block', width: '320px', height: '100px' }}
        data-ad-client="ca-pub-6508744207193174"
        data-ad-slot={slot}
      />
    </div>
  );
};

学んだ教訓

開発時の注意点

1. localhostではAdSenseは動作しない – 本番環境でのみテスト可能
2. 初期化タイミングが重要 – DOMの準備完了を待つ
3. 重複初期化の防止 – useRefで状態管理
4. 固定サイズの安定性 – レスポンシブより予測可能

レイアウト設計

1. 絶対配置の活用 – 確実な位置指定が必要な場合
2. 二重h-screenの回避 – 親子関係での高さ指定に注意
3. Flexboxによる中央配置 – 固定サイズ要素の配置

デバッグ手法

1. 段階的な問題切り分け – 一つずつ要因を特定
2. 本番環境でのテスト – 開発環境では限界がある
3. コンソールエラーの活用 – AdSense固有のエラーメッセージ

成果

・✅ 本番環境で広告が安定表示
・✅ レイアウト崩れの解消
・✅ 320px × 100px固定サイズでの予測可能な配置
・✅ 中央揃えによる美しい表示
・✅ 再利用可能なAdSenseコンポーネント

まとめ

正直、最初は「AdSense統合って簡単そう」って思ってましたが、実際にやってみると意外と奥が深かったです。特にReactのコンポーネントライフサイクルとAdSenseの初期化タイミングの調整が重要なポイントでした。

技術的には単純ですが、実際のWebアプリでは多くの細かな問題に対処する必要があります。同じようにReactでAdSenseを使いたい非エンジニアの方は、ぜひ試してみてください！

---