> ## Documentation Index
> Fetch the complete documentation index at: https://docs.adrop.io/llms.txt
> Use this file to discover all available pages before exploring further.

# はじめに

> ReactプロジェクトにAdrop Web SDKを連携する方法をご案内します。

## 概要

Adrop Web SDKをReactプロジェクトに連携して、バナー広告とネイティブ広告を表示できます。

### サポートする広告フォーマット

* バナー広告
* ネイティブ広告（カスタムUI対応）

### 要件

* React 16.8以上
* Node.js 14以上

***

## インストール

NPMまたはYarnを使用してSDKをインストールします。

<CodeGroup>
  ```bash npm theme={null}
  npm install @adrop/ads-web-sdk
  ```

  ```bash yarn theme={null}
  yarn add @adrop/ads-web-sdk
  ```
</CodeGroup>

***

## 初期化

アプリのエントリーポイント（`main.tsx`または`index.tsx`）でSDKを初期化します。SDKはシングルトンパターンで動作するため、一度だけ初期化すれば十分です。

```tsx title="main.tsx" theme={null}
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Adrop } from '@adrop/ads-web-sdk';
import App from './App';

// アプリレンダリング前にSDKを初期化
Adrop.observe({
  appId: 'YOUR_APP_ID',
  debug: import.meta.env.DEV  // 開発環境でのみtrue
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

### 初期化オプション (AdropConfig)

<ParamField body="appId" type="string" required>
  Ad Controlコンソールで発行されたアプリID
</ParamField>

<ParamField body="uid" type="string">
  ユーザー識別子（ターゲティングに活用）
</ParamField>

<ParamField body="appKey" type="string">
  API認証キー（ユーザー属性更新時に必要）
</ParamField>

<ParamField body="debug" type="boolean" default={false}>
  デバッグログを有効化
</ParamField>

<ParamField body="backfillMode" type="'responsive' | 'fixed'" default="responsive">
  媒体全体のバックフィルレンダリングモード。スロット単位のオプションが優先されます。詳細は[バックフィルレンダリングモード](/ja/sdk/web/backfill)ガイドを参照してください。（SDK 1.2.3+）
</ParamField>

<Warning>
  本番環境では`debug: false`に設定してください。
</Warning>

### インスタンスアクセス

初期化後、どこからでも`Adrop.instance()`でSDKにアクセスできます。

```tsx theme={null}
import { Adrop } from '@adrop/ads-web-sdk';

function MyComponent() {
  const handleClick = () => {
    const adrop = Adrop.instance();
    // SDKを使用
  };

  return <button onClick={handleClick}>広告を読み込む</button>;
}
```

### 設定の動的変更

ログイン後にユーザーIDを設定するなど、ランタイムで設定を変更できます。

```tsx theme={null}
// setConfigを使用
Adrop.instance().setConfig({
  uid: 'USER_ID',
  appKey: 'YOUR_APP_KEY'
});
```

<Note>
  ターゲティング広告が正常に動作するには、広告枠表示前に`uid`を設定してください。
</Note>

***

## WebView設定（バックフィル広告用）

WebアプリがWebViewで実行され、バックフィル広告を表示する場合は、ネイティブアプリの設定が必要です。以下のプラットフォーム別ガイドをご参照ください。

<CardGroup cols={2}>
  <Card title="Android設定" icon="android" href="/ja/sdk/android/webview">
    Android WebView設定方法
  </Card>

  <Card title="iOS設定" icon="apple" href="/ja/sdk/ios/webview">
    iOS WebView設定方法
  </Card>
</CardGroup>

***

## 目次

<CardGroup cols={2}>
  <Card title="バナー広告" href="/ja/sdk/web/banner">
    バナー広告の実装
  </Card>

  <Card title="ネイティブ広告" href="/ja/sdk/web/native">
    ネイティブ広告の実装
  </Card>

  <Card title="ターゲティング設定" href="/ja/sdk/web/targeting">
    オーディエンス/コンテキストターゲティング
  </Card>

  <Card title="リファレンス" href="/ja/sdk/web/reference">
    クラス、インターフェース、定数
  </Card>

  <Card title="サンプル" href="/ja/sdk/web/examples">
    React、CDNサンプルコード
  </Card>
</CardGroup>