Name:
interface
Value:
Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Fullstack TypeScript

Write your app's data model, auth, storage, and functions in TypeScript; Amplify will do the rest.

Built with the AWS CDK

Use any cloud resource your app needs. Never worry about scale.

Back to Gen 1 DocsLearn more about Gen 2
Build a BackendFrontend LibrariesUI LibrariesDevelop with AIHostingReference

Choose your framework/language

Gen1 DocsLegacy
Edit on GitHub

Page updated Mar 26, 2026

Need to configure your backend?See Build a Backend →

アプリコードをAPIに接続する

このガイドでは、Amplify ライブラリを使用してアプリケーションコードをバックエンド API に接続します。開始する前に、以下が必要です：

  • クラウドサンドボックスと Amplify Data リソースが実行中（npx ampx sandbox）
  • Amplify ライブラリがインストールされたフロントエンドアプリケーション
  • npm がインストール済み

Amplify ライブラリを設定する

バックエンド（npx ampx sandbox）を繰り返し実行すると、amplify_outputs.json ファイルが生成されます。このファイルには API のエンドポイント情報と認証設定が含まれています。以下のコードをアプリのエントリーポイントに追加して、Amplify クライアントライブラリを初期化および設定します：

import { Amplify } from 'aws-amplify';
import outputs from '../amplify_outputs.json';


Amplify.configure(outputs);

Amplify Data クライアントを生成する

Amplify ライブラリが設定されたら、フロントエンドコードの「Data クライアント」を生成して、バックエンドへの完全に型付けされた API リクエストを実行できます。

JavaScript のみのフロントエンド（TypeScript ではなく）で Amplify を使用している場合でも、JSDoc コメントで生成されたクライアントに注釈を付けることで、完全に型付けされたデータフェッチエクスペリエンスを実現できます。以下のコードブロックで JavaScript を選択して確認してください。

新しい Data クライアントを生成するには、次のコードを使用します：

import { generateClient } from 'aws-amplify/data';
import type { Schema } from '../amplify/data/resource'; // バックエンドリソース定義へのパス


const client = generateClient<Schema>();


// これで Data クライアントで CRUDL 操作を実行できるようになります
const fetchTodos = async () => {
  const { data: todos, errors } = await client.models.Todo.list();
};
import { generateClient } from 'aws-amplify/data';


/**
 * @type {import('aws-amplify/data').Client<import('../amplify/data/resource').Schema>}
 */
const client = generateClient();


// これで Data クライアントで CRUDL 操作を実行できるようになります
const fetchTodos = async () => {
  const { data: todos, errors } = await client.models.Todo.list();
};

認可モードを設定する

認可モードは、リクエストをバックエンドでどのように認可するかを決定します。デフォルトでは、Amplify Data は「userPool」認可を使用して、署名されたユーザー認証情報で API リクエストに署名します。データモデルに allow.publicApiKey() 認可ルールを使用している場合は、認可モードとして「apiKey」を使用する必要があります。認可ルールをカスタマイズを確認して、どのタイプのリクエストでどの認可モードを選択するかについて詳しく学んでください。デフォルト認可モードは、デプロイメント成功時に生成される amplify_outputs.json の一部として提供されます。

異なる認可モードで異なる Data クライアントを生成するか、リクエスト時に認可モードを渡すことができます。

クライアントごとに認可モードを設定する

Data クライアントからのすべてのリクエストに同じ認可モードを適用するには、generateClient 関数の authMode パラメータを指定します。

allow.publicApiKey() 認可ルールが定義されている場合は、認可モードとして「API キー」を使用します。

import { generateClient } from 'aws-amplify/data';
import type { Schema } from '../amplify/data/resource'; // バックエンドリソース定義へのパス


const client = generateClient<Schema>({
  authMode: 'apiKey',
});

allow.authenticated()、allow.owner()、allow.ownerDefinedIn()、allow.groupsDefinedIn()、または allow.groups() などの Amazon Cognito ユーザープールベースの認可ルールを使用している場合は、認可モードとして「userPool」を使用します。

import { generateClient } from 'aws-amplify/data';
import type { Schema } from '../amplify/data/resource'; // バックエンドリソース定義へのパス


const client = generateClient<Schema>({
  authMode: 'userPool',
});

allow.guest() または allow.authenticated('identityPool') などの Amazon Cognito アイデンティティプールベースの認可ルールを使用している場合は、認可モードとして「identityPool」を使用します。

import { generateClient } from 'aws-amplify/data';
import type { Schema } from '../amplify/data/resource'; // バックエンドリソース定義へのパス


const client = generateClient<Schema>({
  authMode: 'identityPool',
});

信頼されたアイデンティティプロバイダーにアプリケーションを接続する場合は、認可モードとして「oidc」を使用します。OIDC 認可モードではプライベート、所有者、およびグループ認可を設定できます。詳しくは OIDC 認可ドキュメントを確認してください。

import { generateClient } from 'aws-amplify/data';
import type { Schema } from '../amplify/data/resource'; // バックエンドリソース定義へのパス


const client = generateClient<Schema>({
  authMode: 'oidc',
});

allow.custom() を使用して独自のカスタム認可ロジックを使用している場合は、「Lambda Authorizer」を使用します。認可ルールをカスタマイズを確認して、AWS Lambda で認可プロトコルを実装する方法について詳しく学んでください。

import { generateClient } from 'aws-amplify/data';
import type { Schema } from '../amplify/data/resource'; // バックエンドリソース定義へのパス


const getAuthToken = () => 'myAuthToken';
const lambdaAuthToken = getAuthToken();


const client = generateClient<Schema>({
  authMode: 'lambda',
  authToken: lambdaAuthToken,
});

リクエストレベルで認可モードを設定する

各個別 API リクエストで認可モードを指定することもできます。これは、アプリケーションが通常は 1 つの認可モードを使用し、少数の例外がある場合に便利です。

const { data: todos, errors } = await client.models.Todo.list({
  authMode: 'apiKey',
});
const { data: todos, errors } = await client.models.Todo.list({
  authMode: 'userPool',
});
const { data: todos, errors } = await client.models.Todo.list({
  authMode: 'identityPool',
});
const { data: todos, errors } = await client.models.Todo.list({
  authMode: 'oidc',
});

AWS Lambda 関数を使用して、独自のカスタム API 認可ロジックを実装できます。認可ルールをカスタマイズを確認して、AWS Lambda で認可プロトコルを実装する方法について詳しく学んでください。

const getAuthToken = () => 'myAuthToken';
const lambdaAuthToken = getAuthToken();


const { data: todos, errors } = await client.models.Todo.list({
  authMode: 'lambda',
  authToken: lambdaAuthToken,
});

カスタムリクエストヘッダーを設定する

Amplify Data エンドポイントを使用する場合、認可目的またはフロントエンドからバックエンド API へのメタデータを渡すためにリクエストヘッダーを設定する必要があるかもしれません。

これは設定に headers パラメータを指定して行われます。Data クライアントレベルまたはリクエストレベルのいずれかでヘッダーを定義できます：

import type { Schema } from '../amplify/data/resource';
import { generateClient } from 'aws-amplify/data';


const client = generateClient<Schema>({
  headers: {
    'My-Custom-Header': 'my value',
  },
});
// すべての CRUDL で同じ方法: .create, .get, .update, .delete, .list, .observeQuery
const { data: blog, errors } = await client.models.Blog.get(
  { id: 'myBlogId' },
  {
    headers: {
      'My-Custom-Header': 'my value',
    },
  }
);

上記の例は静的ヘッダーを設定する方法を示していますが、headers に非同期関数を指定することでプログラム的にヘッダーを設定することもできます：

import type { Schema } from '../amplify/data/resource';
import { generateClient } from 'aws-amplify/data';


const client = generateClient<Schema>({
  headers: async (requestOptions) => {
    console.log(requestOptions);
    /* リクエストオプションを使用すると、HTTP メソッド、ヘッダー、リクエスト URI、
       クエリ文字列などのリクエストオプションに基づいてヘッダーをカスタマイズできます。
       これらのオプションは通常、リクエスト署名を作成するために使用されます。
    {
      method: '...',
      headers: { },
      uri: '/',
      queryString: ""
    }
    */
    return {
      'My-Custom-Header': 'my value',
    };
  },
});
// すべての CRUDL で同じ方法: .create, .get, .update, .delete, .list, .observeQuery
const res = await client.models.Blog.get(
  { id: 'myBlogId' },
  {
    headers: async (requestOptions) => {
      console.log(requestOptions);
      /* リクエストオプションを使用すると、HTTP メソッド、ヘッダー、リクエスト URI、
         クエリ文字列などのリクエストオプションに基づいてヘッダーをカスタマイズできます。
         これらのオプションは通常、リクエスト署名を作成するために使用されます。
      {
        method: '...',
        headers: { },
        uri: '/',
        queryString: ""
      }
      */
      return {
        'My-Custom-Header': 'my value',
      };
    },
  }
);

追加の Data エンドポイントを使用する

別の Amplify プロジェクトで管理している、またはその他の方法で管理している追加の Data エンドポイントがある場合、このセクションでは、フロントエンドコードでそのエンドポイントを使用する方法を説明します。

これは generateClient 関数の endpoint パラメータを指定して行われます。

import { generateClient } from 'aws-amplify/data';


const client = generateClient({
  endpoint: 'https://my-other-endpoint.com/graphql',
});

この Data エンドポイントが同じ認可設定（例えば、両方のエンドポイントが amplify_outputs.json のものと同じユーザープールおよび/またはアイデンティティプールを共有）を共有している場合は、generateClient で authMode パラメータを指定できます。

const client = generateClient({
  endpoint: 'https://my-other-endpoint.com/graphql',
  authMode: 'userPool',
});

エンドポイントが API キー認可を使用している場合は、generateClient で apiKey パラメータを渡すことができます。

const client = generateClient({
  endpoint: 'https://my-other-endpoint.com/graphql',
  authMode: 'apiKey',
  apiKey: 'my-api-key',
});

エンドポイントが異なる認可設定を使用している場合は、カスタムリクエストヘッダーを設定セクションの指示を使用して、認可ヘッダーを手動で渡すことができます。

Site color mode

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2026, Amazon Web Services, Inc. and its affiliates.

All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.