# クライアントアーキテクチャ

OCAP Client は、さまざまな JavaScript 環境や特定のユースケースに対応するため、モジュラーアーキテクチャで設計されています。画一的なライブラリではなく、Node.js バックエンドやバンドルサイズに敏感なウェブアプリケーションなど、特定のコンテキストに最適化された複数のクライアント実装を提供しています。このアプローチにより、ニーズに最も効率的なクライアントを選択でき、必要に応じてパフォーマンスの向上とフットプリントの削減が保証されます。

すべてのクライアントバリエーションは、共通のベースである `GraphQLClientBase` 上に構築されており、ブロックチェーンの GraphQL API と対話するためのコア機能を提供します。

### 継承図

以下の図は、異なるクライアント実装間の関係を示しています。

<!-- DIAGRAM_IMAGE_START:architecture:4:3 -->

![Client Architecture](assets/diagram/core-concepts-client-architecture-01.jpg)

<!-- DIAGRAM_IMAGE_END -->


## クライアント実装

以下に、利用可能な各クライアントとその想定されるユースケースの内訳を示します。

### `GraphQLClientBase` (コア)

これは、他のすべてのクライアントが拡張する、基礎となる軽量なクライアントです。ブロックチェーンとの通信に不可欠な機能を提供します。

* GraphQL のクエリとミューテーションの送信。
* リアルタイムのイベントサブスクリプションのための WebSocket 接続の確立。
* スポンサー付きトランザクションのためのガス支払いヘッダーの処理。
* 環境に依存しませんが、サブスクリプションを使用する場合は、WebSocket と EventEmitter の互換性のある実装を提供する必要があります。

このクライアントは、基本的な読み取り専用機能のみが必要で、依存関係を最小限に抑えたい場合に最適です。

### `GraphQLClient` (フルクライアント)

これは標準的な汎用クライアントであり、最も頻繁に使用される可能性が高いものです。`GraphQLClientBase` を拡張し、一般的なオンチェーン操作を簡素化する豊富な高レベルヘルパーメソッドのセットを追加します。これらのヘルパーは、アセットの作成、トークンの転送、ステークの管理などのタスクをカバーし、生の GraphQL ミューテーションの複雑さを抽象化します。

デフォルトでは、インスタンス化時にコンテキストを自動的に初期化するため、すぐに使用できます。

### `NativeGraphqlClient` (Node.js向け)

このクライアントは、Node.js ランタイムに特化して最適化されています。フル機能の `GraphQLClient` を拡張し、イベント処理に Node.js のネイティブな `events` モジュールを使用するように設定します。これにより、バックエンドアプリケーション、コマンドラインツール、またはサーバー上で実行されるスクリプトにとって、最もパフォーマンスが高く信頼性の高い選択肢となります。

### `GraphqlClientLite` (ブラウザ向け)

フロントエンドのウェブアプリケーション向けに設計された `GraphqlClientLite` は `GraphQLClientBase` を拡張し、最小限のバンドルサイズに最適化されています。Node.js 固有の依存関係を `wolfy87-eventemitter` のようなブラウザ互換の代替品に置き換えます。パフォーマンスと読み込み時間が重要なウェブアプリケーションを構築している場合、このクライアントは、フル機能のヘルパーメソッドスイートの余分な重みなしに、OCAP のコア機能を提供します。


## どのクライアントを使用すべきか？

どのクライアントを選択すべきかを判断するために、各シナリオで推奨されるクライアントの概要を以下に示します。

| 環境      | ユースケース                        | 推奨クライアント              | インポートパス             |
| :------ | :---------------------------- | :-------------------- | :------------------ |
| Node.js | バックエンドサービス、スクリプト、CLI ツール      | `NativeGraphqlClient` | `@ocap/client/node` |
| ブラウザ    | 一般的なウェブアプリケーション（例：React, Vue） | `GraphQLClient`       | `@ocap/client`      |
| ブラウザ    | バンドルサイズに敏感なアプリケーション           | `GraphqlClientLite`   | `@ocap/client/lite` |
| 任意      | 読み取り専用、最小限の機能が必要              | `GraphQLClientBase`   | `@ocap/client/base` |

### インポートの例

以下に、各クライアントをコードにインポートする方法を示します。

```javascript Node.js Client icon=logos:nodejs-icon
const NativeGraphqlClient = require('@ocap/client/node');
const client = new NativeGraphqlClient('https://beta.abtnetwork.io/api');
```

```javascript Full Browser Client icon=logos:javascript
const GraphQLClient = require('@ocap/client');
const client = new GraphQLClient('https://beta.abtnetwork.io/api');
```

```javascript Lite Browser Client icon=logos:javascript
const GraphqlClientLite = require('@ocap/client/lite');
const client = new GraphqlClientLite('https://beta.abtnetwork.io/api');
```


## まとめ

さまざまなクライアント実装を理解することで、アプリケーションの環境と要件に最も適した情報に基づいた選択ができます。適切なクライアントを選択することで、パフォーマンス、バンドルサイズ、使いやすさを最適化できます。

クライアントアーキテクチャを理解したところで、トランザクションがどのように構築され、処理されるかについてさらに深く掘り下げることができます。詳細は [トランザクションのライフサイクル](./core-concepts-transaction-lifecycle.md) ガイドをご覧ください。