# クライアントをインストールする

> Entase CDN から client.js を読み込み、インスタンスを作成します。インストールするパッケージも、必要なビルド手順もありません。

クライアントは、単一ファイルとして Entase CDN から配信されます。npm パッケージも、ビルドするバンドルも、最新の状態に保つ依存関係もありません – 常に最新版を利用できます。

```html
<script src="https://js.entase.com/client.js"></script>
```

スクリプトを読み込むと、グローバルな `Entase` クラスが定義されます。それだけでは他に何も行いません。ネットワークリクエスト、DOM の変更、レンダリングはいずれも発生しません。インスタンスを作成すると、すべてが始まります。

## インスタンスを作成する

```js
const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' });
```

**ページごとに 1 つのインスタンス**を作成し、すべてのイベントで再利用してください。コンストラクタは window に `message` リスナーを登録し、ドメインで使用が許可されているチェックアウトモードの検出を開始します。そのため、複数のインスタンスを作成すると、メリットがないにもかかわらずリスナーと検出呼び出しが重複します。

すべてのオプションにはデフォルト値があるため、引数なしの `new Entase()` も有効です – ただし、`pk` がなければクライアントはドメインでインラインチェックアウトを使用できるか確認できず、常にポップアップウィンドウにフォールバックします。[チェックアウトモード](/developers/js-client/checkout-modes.md)を参照してください。

## スクリプトを非同期で読み込む

`async` または `defer` を使用して `client.js` を読み込む場合、インラインスクリプトの実行時にはクラスがまだ存在しません。ライブラリは読み込み完了後に `window` で `entase:ready` イベントを発行するため、それを待機してください。

```html
<script src="https://js.entase.com/client.js" async></script>
<script>
  let entase = null;

  const init = () => { entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' }); };

  if (typeof Entase !== 'undefined') init();
  else window.addEventListener('entase:ready', init);
</script>
```

最初に `typeof` チェックを行うことが重要です。スクリプトの読み込みがすでに完了している場合、`entase:ready` はすでに発行されており、それをリッスンすると永遠に待機することになります。

## クリーンアップ

シングルページアプリケーションでは、インスタンスを所有するビューがアンマウントされるときに `destroy()` を呼び出します。

```js
entase.destroy();
```

これにより、クライアントが登録した window リスナーが削除されます。破棄されたインスタンスは再利用できません – そのインスタンスで `book()` を呼び出すとエラーがログに記録され、何も実行されません。代わりに新しいインスタンスを作成してください。

## Content Security Policy

サイトが `Content-Security-Policy` ヘッダーを送信する場合、チェックアウトには次の設定が必要です。

- `script-src https://js.entase.com` – ライブラリを読み込むため。
- `frame-src https://www.entase.com` – ペインモードでは、チェックアウトは iframe 内にレンダリングされます。
- `connect-src https://www.entase.com` – クライアントは、許可されたチェックアウトモードを判定するために Entase API を呼び出します。

`frame-src` がない場合、ペインモードでは空のパネルが表示されます。`connect-src` がない場合、モード検出に失敗し、すべてのチェックアウトがポップアップとして開きます。