[AWS SDK for JavaScript V3 API リファレンスガイド](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/)では、 AWS SDK for JavaScript バージョン3 (V3) のすべての API オペレーションについて詳しく説明します。
翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# ブラウザでの開始方法
このセクションでは、ブラウザで AWS SDK for JavaScript のバージョン 3 (V3) を実行する方法を示す例を示します。
**注記**
ブラウザでV3を実行することは、バージョン2 (V2)とは若干異なります。詳細については、「[V3 でブラウザーを使用](welcome.md#v3_browsers)」を参照してください。
AWS SDK for JavaScript の (V3) を使用するその他の例については、「」を参照してください[SDK for JavaScript (v3) のコード例](javascript_code_examples.md)。
**このウェブアプリケーションの例は、以下を示します。**
+ 認証に Amazon Cognito を使用して AWS サービスにアクセスする方法。
+ AWS Identity and Access Management (IAM) ロールを使用して Amazon Simple Storage Service (Amazon S3) バケット内のオブジェクトのリストを読み取る方法。
**注記**
この例では、認証 AWS IAM アイデンティティセンター に を使用しません。
## シナリオ
Amazon S3 は、業界をリードするスケーラビリティ、データ可用性、セキュリティ、パフォーマンスを提供するオブジェクトストレージサービスです。Amazon S3 を使用して、バケットと呼ばれるコンテナ内にデータをオブジェクトとして保存できます。Amazon S3 の詳細については、「[Amazon S3 ユーザーガイド](https://docs.aws.amazon.com/AmazonS3/latest/userguide/)」を参照してください。
この例では、Amazon S3 バケットから読み取る IAM ロールを引き受けるウェブアプリケーションを設定して実行する方法を示します。この例では、React フロントエンドライブラリと Vite フロントエンドツールを使用して JavaScript 開発環境を提供します。ウェブアプリは Amazon Cognito ID プールを使用して、 AWS サービスへのアクセスに必要な認証情報を提供します。含まれているコード例は、ウェブアプリケーションで AWS SDK for JavaScript をロードして使用するための基本的なパターンを示しています。
## ステップ 1: Amazon Cognito アイデンティティプールと IAM ロールを作成する
この演習では、Amazon Cognito アイデンティティプールを作成して使用し、Amazon S3 サービスのウェブアプリケーションで未認証のアクセスを提供します。ID プールを作成すると、認証されていないゲストユーザーをサポートする AWS Identity and Access Management (IAM) ロールも作成されます。この例では、タスクに集中し続けるために、認証されていないユーザーロールのみを使用します。後で ID プロバイダーと認証済みユーザーのサポートを統合できます。Amazon Cognito アイデンティティプールの追加についての詳細は、「*Amazon Cognito デベロッパーガイド*」の「[チュートリアル: ID プールの作成](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html)」を参照してください。
**Amazon Cognito アイデンティティプールおよび関連付けられた IAM ロールを作成するには**
1. にサインイン AWS マネジメントコンソール し、[https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/) で Amazon Cognito コンソールを開きます。
1. 左のナビゲーションペインで、**[ID プール]** を選択します。
1. **[ID プールを作成]** を選択します。
1. **[ID プールの信頼を設定]** で、ユーザー認証に **[ゲストアクセス]** を選択します。
1. **[アクセス許可を設定]** で、**[新しい IAM ロールの作成]** を選択し、**[IAM ロール名]** に名前 (*getStartedRole* など) を入力します。
1. **[プロパティを設定]** で、**[ID プール名]** に名前 (*getStartedPool* など) を入力します。
1. **[確認および作成]** で、新しいアイデンティティプールに対して行った選択を確認します。**[編集]** を選択してウィザードに戻り、設定を変更します。終了したら、**[ID プールの作成]** を選択します。
1. **[ID プールの ID]** と、新しく作成した Amazon Cognito アイデンティティプールの **[リージョン]** を書き留めます。[ステップ 4: ブラウザコードを設定する](#getting-started-browser-create-html) で *IDENTITY\$1POOL\$1ID* および *REGION* を置換するには、これらの値が必要です。
Amazon Cognito アイデンティティプールを作成したら、ウェブアプリケーションにより必要な Amazon S3 権限を追加する準備が整います。
## ステップ 2: 作成した IAM ロールにポリシーを追加する
ウェブアプリケーション内の Amazon S3 バケットへのアクセスを有効にするには、Amazon Cognito アイデンティティプール (*getStartedPool* など) 用に作成された非認証の IAM ロール (*getStartedRole* など) を使用します。これを進めるには、IAM ポリシーをロールにアタッチする必要があります。IAM ロールの変更の詳細については、「*IAM ユーザーガイド*」の「[ロールのアクセス許可ポリシーの変更](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy)」を参照してください。
**Amazon S3ポリシーを、非認証ユーザーに関連付けられているIAM ロールに追加するには**
1. にサインイン AWS マネジメントコンソール し、[https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/) で IAM コンソールを開きます。
1. 左のナビゲーションペインで、**[Roles (ロール)]** を選択してください。
1. 変更するロールの名前 (*getStartedRole* など) を選択し、**[アクセス許可]** タブを選択します。
1. **[アクセス許可を追加]**、**[ポリシーをアタッチ]** の順に選択します。
1. このロールの **[アクセス許可を追加]** ページで、**AmazonS3ReadOnlyAccess** を検索してチェックボックスをオンにします。
**注記**
このプロセスを使用して、任意の AWS サービスへのアクセスを有効にできます。
1. [**Add permissions (許可の追加)**] を選択します。
Amazon Cognito アイデンティティプールを作成した後、非認証ユーザーの IAM ロールに Amazon S3の許可を追加すると、Amazon S3 バケットを追加し設定する準備が整います。
## ステップ 3: Amazon S3 バケットとオブジェクトを追加する
このステップでは、例の Amazon S3 バケットとオブジェクトを追加します。また、バケットの Cross-Origin Resource Sharing (CORS) を有効にします。Amazon S3 バケットとオブジェクトの作成についての詳細は、「*Amazon S3 ユーザーガイド*」の「[Amazon S3 の開始方法](https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html)」を参照してください。
**CORS でAmazon S3 バケットとオブジェクトを追加するには**
1. にサインイン AWS マネジメントコンソール し、[https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/) で Amazon S3 コンソールを開きます。
1. 左側のナビゲーションペインで、**[バケット]** を選択してから、**[バケットを作成]** を選択します。
1. [バケットの命名規則](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html) (*getstartedbucket* など) に準拠したバケット名を入力し、**[バケットを作成]** を選択します。
1. 作成したバケットを選択し、**[オブジェクト]** タブを選択します。次に、**アップロード**を選択します。
1. [**Files and Folders (ファイルとフォルダ)**] で、[**Add files (ファイルを追加)**] を選択します。
1. アップロードするファイルを選択し、続いて **[オープン]** を選択します。次に、**[アップロード]** を選択して、バケットへのオブジェクトのアップロードを完了します。
1. 次に、バケットの **[アクセス許可]** タブを選択し、**[Cross-Origin Resource Sharing (CORS)]** セクションで **[編集]** を選択します。次の JSON を入力します。
```
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
```
1. **[Save changes]** (変更の保存) をクリックします。
Amazon S3 バケットを追加してオブジェクトを追加したら、ブラウザコードを設定する準備が整います。
## ステップ 4: ブラウザコードを設定する
サンプルアプリケーションは単一ページの React アプリケーションで構成されています。この例のファイルは、[この GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/web/s3/list-objects) で見つけることができます。
**サンプルアプリケーションを設定するには**
1. [Node.js](https://nodejs.org/en/download) をインストールします。
1. コマンドラインから、[AWS のコードサンプルリポジトリ](https://github.com/awsdocs/aws-doc-sdk-examples/)をクローンします。
```
git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git
```
1. サンプルアプリケーションに移動します。
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. 次のコマンドを実行して、必要なパッケージをインストールします。
```
npm install
```
1. 次に、テキストエディタで `src/App.tsx` を開き、次の処理を実行します。
+ *YOUR\$1IDENTITY\$1POOL\$1ID* を [ステップ 1: Amazon Cognito アイデンティティプールと IAM ロールを作成する](#getting-started-browser-create-identity-pool) で書き留めた Amazon Cognito アイデンティティプール ID に置き換えます。
+ リージョンの値を Amazon S3 バケットと Amazon Cognito アイデンティティプールに割り当てられたリージョンに置き換えます。両方のサービスのリージョンは同じでなければならないことに注意してください (*us-east-2* など)。
+ *bucket-name* を、[ステップ 3: Amazon S3 バケットとオブジェクトを追加する](#getting-started-browser-create-s3-bucket) で作成したバケットの名前に置き換えます。
テキストを置き換えたら、`App.tsx` ファイルを保存します。これで、ウェブアプリケーションを実行する準備ができました。
## ステップ 5: 例を実行する
**サンプルアプリケーションを実行するには**
1. コマンドラインから、サンプルアプリケーションに移動します。
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. コマンドラインから、以下のコマンドを実行します。
```
npm run dev
```
Vite 開発環境が実行され、次のメッセージが表示されます。
```
VITE v4.3.9 ready in 280 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
```
1. ウェブブラウザで上記の URL (例: http://localhost:5173) に移動します。サンプルアプリケーションでは、Amazon S3 バケット内のオブジェクトファイル名のリストが表示されます。
## クリーンアップ
このチュートリアルで作成されたリソースをクリーンアップするには、以下を行います。
+ [Amazon S3 コンソール](https://console.aws.amazon.com/s3/)で、作成されたオブジェクトとバケット (*getstartedbucket* など) をすべて削除します。
+ [IAM コンソール](https://console.aws.amazon.com/iam/home#/roles)で、ロール名 (*getStartedRole* など) を削除します。
+ [Amazon Cognito コンソール](https://console.aws.amazon.com/cognito/home#/identity)でアイデンティティプール名 (*getStartedPool* など) を削除します。