翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# Amplify クライアントを使用したクライアントアプリケーションの構築
<a name="building-a-client-app"></a>

任意の AWS AppSync GraphQL クライアントを使用して GraphQL API に接続できますが、Amplify v6 クライアントを強くお勧めします。Amplify は、GraphQL API 用に厳密に型指定されたクライアント SDK を自動生成するだけでなく、クライアントアプリケーションでのリアルタイムデータのサポートおよび強化された GraphQL クエリ機能も提供します。ウェブアプリケーションについては、Amplify は JavaScript クライアントを生成できます。クロスプラットフォームまたはモバイル環境をターゲットとするアプリケーションについては、Amplify は Android、iOS、および React Native に対応しています。これらのプラットフォームのクライアントコード生成について詳しくは、Amplify の[ドキュメント](https://docs.amplify.aws/cli/graphql/client-code-generation/)を参照してください。ここでは、JavaScript React アプリケーションを使い始めるためのガイドをご紹介します。

**注記**  
開始する前に、[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) と [Amazon CLI](https://aws.amazon.com/cli/) の両方をインストールして設定する必要があります。Amplify v6 クライアントを使用している場合は、[このガイドに従ってください](https://docs.amplify.aws/react/build-a-backend/graphqlapi/connect-to-api/#configure-the-default-authorization-mode)。

開始するには、以下の手順を実行します。

1. ローカルマシンで、プロジェクトのディレクトリに移動します。以下のコマンドを使用して、Amplify ライブラリをインストールします。

   ```
   npm install aws-amplify
   ```

1. 構成ファイルをダウンロードし、プロジェクトフォルダに配置します。構成ファイルには、通常、一部の設定 (エンドポイント、リージョン、承認モードなど) が定義された `config` 変数が含まれます。例えば、次のようになります。

   ```
   const config =  {
       API: {
           GraphQL: {
             endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-west-2.amazonaws.com/graphql',
             region: 'us-west-2',
             defaultAuthMode: 'apiKey',
             apiKey: ''
           }
       }
   };
   
   export default config;
   ```

1. コードで、Amplify ライブラリと設定をインポートして Amplify を設定します。

   ```
   import { Amplify } from 'aws-amplify';
   import config from './aws-exports.js';
   
   Amplify.configure(config);
   ```

   または、API 設定でスニペットを使用して Amplify を直接セットアップします。

   ```
   import { Amplify } from 'aws-amplify';
   
   Amplify.configure({
     API: {
       GraphQL: {
         endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-west-2.amazonaws.com/graphql',
         region: 'us-west-2',
         defaultAuthMode: 'apiKey',
         apiKey: ''
       }
     }
   });
   ```

1. Amplify ツールチェーンを使用すると、スキーマに基づいてオペレーションを自動生成できるため、手動でスクリプトを作成する手間が省けます。アプリケーションのルートディレクトリで、次の CLI コマンドを使用します。

   ```
   npx @aws-amplify/cli codegen add --apiId <id goes here> --region <region goes here>
   ```

   これにより、API のスキーマがダウンロードされ、デフォルトでクライアントヘルパーコードが `src/graphql` フォルダに生成されます。API デプロイのたびに、次のコマンドを再実行して、更新された GraphQL ステートメントとタイプを生成できます。

   ```
   npx @aws-amplify/cli codegen
   ```

1. Android、Swift、Flutter、JavaScript DataStore のモデルを生成できるようになりました。スキーマをダウンロードするには以下のコマンドを使用します。

   ```
   aws appsync get-introspection-schema --api-id <id goes here> --region <region goes here> --format SDL schema.graphql
   ```

   その後、アプリケーションのルートディレクトリから以下のコマンドを実行します。

   ```
   npx @aws-amplify/cli codegen models \
   --model-schema schema.graphql \
   --target [android|ios|flutter|javascript|typescript] \
   --output-dir ./
   ```