[AWS SDK for JavaScript V3 API リファレンスガイド](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/)では、 AWS SDK for JavaScript バージョン3 (V3) のすべての API オペレーションについて詳しく説明します。

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

# ブラウザスクリプトの考慮事項
<a name="browser-js-considerations"></a>

以下のトピックでは、ブラウザスクリプト AWS SDK for JavaScript で を使用するための特別な考慮事項について説明します。

**Topics**
+ [ブラウザ用 SDK の構築](building-sdk-for-browsers.md)
+ [Cross-Origin Resource Sharing (CORS)](cors.md)
+ [Webpack でアプリケーションをバンドルする](webpack.md)

# ブラウザ用 SDK の構築
<a name="building-sdk-for-browsers"></a>

SDK for JavaScriptバージョン2 (V2)とは異なり 、V3はサービスのデフォルトセットを含んでサポートする JavaScript ファイルとして提供されていません。代わりに V3 は、必要な SDK for JavaScript ファイルのみをバンドルしてブラウザに含め、オーバーヘッドの削減を有効にします。Webpack を使用して、必要な SDK for Java Script ファイルと、必要な追加のサードパーティパッケージを `Javascript`ファイルにまとめ、 `<script>`タグを使用してブラウザスクリプトにロードします。Webpackの詳細については、「[Webpack でアプリケーションをバンドルする](webpack.md)」を参照してください。

ブラウザで CORS を強制する環境の外側で SDK を使用し、SDK for JavaScript によって提供されるすべてのサービスにアクセスする場合は、リポジトリを複製し、SDK のデフォルトのホストバージョンをビルドするのと同じビルドツールを実行することで、SDK のカスタムコピーをローカルにビルドできます。次のセクションでは、追加のサービスと API バージョンを使用して SDK を構築するステップについて説明します。

## SDK Builder を使用した SDK for JavaScript の構築
<a name="using-the-sdk-builder"></a>

**注記**  
Amazon Web Services バージョン 3 (V3) はブラウザビルダーをサポートは終了しました。ブラウザアプリケーションの帯域幅の使用量を最小限に抑えるために、名前付きモジュールをインポートし、それらをバンドルしてサイズを小さくすることをお勧めします。バンドルの詳細については、「[Webpack でアプリケーションをバンドルする](webpack.md)」を参照してください。

# Cross-Origin Resource Sharing (CORS)
<a name="cors"></a>

Cross-Origin Resource Sharing (CORS) は、最新ウェブブラウザのセキュリティ機能です。これにより、ウェブブラウザはどのドメインが外部のウェブサイトまたはサービスのリクエストを行うことができるかをネゴシエートできます。

AWS SDK for JavaScript を使用してブラウザアプリケーションを開発する場合、CORS は重要な考慮事項です。リソースへのリクエストのほとんどは、ウェブサービスのエンドポイントなどの外部ドメインに送信されるためです。JavaScript 環境で CORS セキュリティが適用される場合は、そのサービスで CORS を設定する必要があります。

CORS は、クロスオリジンリクエストでリソースの共有を許可するかどうかを、以下に基づいて決定します。
+ リクエストを行う特定のドメイン 
+ 行われている HTTP リクエストのタイプ (GET、PUT、POST、DELETE など)

## CORS の仕組みは
<a name="how-cors-works"></a>

最も簡単なケースとして、ブラウザスクリプトは他のドメインのサーバーからリソースの GET リクエストを行います。そのサーバーの CORS 設定に応じて、リクエストが GET リクエストの送信を許可されているドメインからのものである場合、クロスオリジンサーバーはリクエストされたリソースを返すことによって応答します。

リクエスト元のドメインまたは HTTP リクエストの種類のいずれかが承認されていない場合、リクエストは拒否されます。ただし、CORS では、実際に送信する前にリクエストをプリフライトすることができます。この場合、`OPTIONS` アクセスリクエストオペレーションが送信されるプリフライトリクエストが行われます。クロスオリジンサーバーの CORS 設定がリクエスト元ドメインへのアクセスを許可する場合、サーバーはリクエスト元ドメインがリクエストされたリソースに対して行うことができるすべての HTTP リクエストタイプをリストしたプリフライト応答を返送します。

![\[CORS リクエストのプロセスの流れ\]](http://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v3/developer-guide/images/cors-overview.png)


## CORS の設定が必要ですか
<a name="the-need-for-cors-configuration"></a>

Amazon S3 バケットを操作する前に、CORS の設定が必要です。一部のJavaScript環境では、CORSが適用されない場合があるため、CORSを設定する必要はありません。例えば、Amazon S3 バケットからアプリケーションをホストし、 `*.s3.amazonaws.com` またはその他の特定のエンドポイントからリソースにアクセスする場合、リクエストは外部ドメインにアクセスしません。したがって、この CORS 設定は必要ありません。この場合、CORS は Amazon S3 以外のサービスに使用されます。

## Amazon S3 バケット用の CORS の設定
<a name="configuring-cors-s3-bucket"></a>

AmazonS3 コンソールで CORS を使用するように AmazonS3 バケットを設定できます。

AWS ウエブサービスマネジメントコンソールで CORS を設定する場合は、JSON を使用して CORS 設定を作成する必要があります。新しいAWS ウエブサービスマネジメントコンソールは、JSON CORS 設定のみがサポートされます。

**重要**  
新しい AWS ウェブサービスマネジメントコンソールでは、CORS 設定は JSON にする必要があります。

1. AWS ウェブサービスマネジメントコンソールでは、Amazon S3 コンソールを開き、設定したいバケットを見つけ、そのチェックボックスを選択します。

1. 開いたペインで、**Permissions**（許可）を選択します。

1. **Permissions**（許可）タブで、**CORS Configuration**（CORS 設定）を選択します。

1. **CORS Configuration Editor**（CORS 設定エディタ）でCORS設定を入力して、**Save**（保存）を選択します。

CORS 設定は、`<CORSRule>` の一連のルールを含む XML ファイルです。設定は最大で 100 個のルールを持つことができます。ルールは次のいずれかのタグによって定義されます。
+ `<AllowedOrigin>` ―クロスドメインリクエストを許可するドメインオリジンを指定します。
+ `<AllowedMethod>` ―クロスドメインリクエストで許可するリクエストの種類 (GET、PUT、POST、DELETE、HEAD) を指定します。
+ `<AllowedHeader>` ―プリフライトリクエストで許可されるヘッダーを指定します。

設定例については、*Amazon Simple Storage Service User Guide*（Amazon Simple ストレージサービスユーザーガイド）の「 [How do I configure CORS on my bucket?](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html#how-do-i-enable-cors) 」（バケットで CORS を設定する方法）を参照してください。

## CORS 設定例
<a name="cors-configuration-example"></a>

次の CORS 設定例では、ユーザーはドメイン`example.org`からバケット内のオブジェクトを表示、追加、削除、または更新することができます。ただし、ウェブサイトのドメインに`<AllowedOrigin>`を追加することの検討をお勧めします。オリジンを許可するように `"*"` を指定できます。

**重要**  
新しい S3 コンソールでは、CORS 設定は JSON である必要があります。

------
#### [ XML ]

```
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>https://example.org</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
  </CORSRule>
</CORSConfiguration>
```

------
#### [ JSON ]

```
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://www.example.org"
        ],
        "ExposeHeaders": [
             "ETag",
             "x-amz-meta-custom-header"]
    }
]
```

------

この設定では、ユーザーがバケットに対してアクションを実行することは許可されません。ブラウザのセキュリティモデルで Amazon S3 へのリクエストを許可できます。許可はバケット権限または IAM ロール権限を介して設定する必要があります。

`ExposeHeader` を使用して、SDK に Amazon S3 から返されたレスポンスヘッダーを読み込ませることができます。例えば、`PUT`またはマルチパートアップロードから`ETag`ヘッダーを読み取る場合、前の例に示すように、設定に`ExposeHeader`タグを含める必要があります。SDK は、CORS 設定によって公開されているヘッダーにのみアクセスできます。オブジェクトにメタデータを設定すると、値は `x-amz-meta-` のように、プレフィックス `x-amz-meta-my-custom-header` を持つヘッダーとして返され、同じ方法で公開されている必要があります。

# Webpack でアプリケーションをバンドルする
<a name="webpack"></a>

ブラウザスクリプトまたはNode.jsでWebアプリケーションでコードモジュールを使用すると、依存関係が作成されます。これらのコードモジュールは独自の依存関係を持つことができ、結果として、アプリケーションが機能するために必要な、相互接続されたモジュールの集まりができます。依存関係を管理するには、`webpack`などのモジュールバンドラーを使用できます。

`webpack`モジュールバンドラーはアプリケーションコードを解析して、`import` または `require` ステートメントを検索し、アプリケーションに必要なすべてのアセットを含むバンドルを作成します。これは、アセットを Web ページを介して簡単に提供できるようにするためです。SDK for JavaScript は、出力バンドルに含める依存関係の1つとして`webpack` に含めることができます。

`webpack`の詳細については、GitHub の [webpack module bundler](https://webpack.github.io/)（Webpack モジュールバンドラー）を参照してください。

## Webpackをインストールします
<a name="webpack-installing"></a>

`webpack`モジュールバンドラーをインストールするには、まず npm (Node.js パッケージマネージャー) をインストールする必要があります。`webpack`CLI およびJavaScriptモジュールをインストールするには、次のコマンドを入力します。

```
npm install --save-dev webpack
```

ファイルとディレクトリパスを操作するためのモジュール`path`を使用するには、Webpack で自動的にインストールされる場合は、Node.js `path-browserify`パッケージをインストールする必要があります。

```
npm install --save-dev path-browserify
```

## Webpack を設定する
<a name="webpack-configuring"></a>

デフォルトで、webpack はプロジェクトのルートディレクトリにある`webpack.config.js`という名前のJavaScript ファイルを検索します。このファイルは、設定オプションを指定します。WebPackバージョン 5.0.0とそれ 以降の `webpack.config.js` 設定ファイルの例を次に示します。

**注記**  
Webpackの設定要件は、インストールする Webpack のバージョンによって異なります。詳細については、[Webpack documentation](https://webpack.js.org/configuration/)（Webpack ドキュメント）を参照してください。

```
// Import path for resolving file paths
var path = require("path");
module.exports = {
  // Specify the entry point for our app.
  entry: [path.join(__dirname, "browser.js")],
  // Specify the output file containing our bundled code.
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
   // Enable WebPack to use the 'path' package.
   resolve:{
  fallback: { path: require.resolve("path-browserify")}
  }
  /**
  * In Webpack version v2.0.0 and earlier, you must tell 
  * webpack how to use "json-loader" to load 'json' files.
  * To do this Enter 'npm --save-dev install json-loader' at the 
  * command line to install the "json-loader' package, and include the 
  * following entry in your webpack.config.js.
  * module: {
    rules: [{test: /\.json$/, use: use: "json-loader"}]
  }
  **/
};
```

この例では、 *entry point*（エントリポイント）として`browser.js` が指定されます。*entry point*（エントリポイント）は、インポートされたモジュールの検索を開始するために使用するファイル`webpack`です。出力のファイル名は `bundle.js` として指定されます。この出力ファイルには、アプリケーションの実行に必要なすべての JavaScript が含まれています。エントリーポイントで指定されたコードが SDK for JavaScript などの他のモジュールをインポートまたは必要とする場合、そのコードは設定で指定しなくてもバンドルされます。

## Webpack を実行する
<a name="webpack-running"></a>

アプリケーションが`webpack`を使用するように設定するには、`package.json`ファイル内の`scripts`オブジェクトに以下を追加します。

```
"build": "webpack"
```

以下は、`webpack`の追加を示す`package.json`ファイルの例です。

```
{
  "name": "aws-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@aws-sdk/client-iam": "^3.32.0",
    "@aws-sdk/client-s3": "^3.32.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0"
  }
}
```

アプリケーションを構築するには、次のコマンドを入力します。

```
npm run build
```

そして、`webpack`モジュールバンドラーは、プロジェクトのルートディレクトリで指定した JavaScript ファイルを生成します。

## Webpack バンドルを使用する
<a name="webpack-using-bundle"></a>

ブラウザスクリプトでバンドルを使用するには、次の例で示すように `<script>` タグを使用してバンドルを組み込むことができます。

```
<!DOCTYPE html>
<html>
    <head>
        <title>Amazon SDK with webpack</title>
    </head> 
    <body>
        <div id="list"></div>
        <script src="bundle.js"></script>
    </body>
</html>
```

## Node.js 用のバンドル
<a name="webpack-nodejs-bundles"></a>

設定でターゲットとして`node`を指定することにより、Node.jsで実行されるバンドルを生成するために`webpack`を使用できます。

```
target: "node"
```

これは、ディスク容量に制限がある環境で Node.js アプリケーションを実行するときに役立ちます。出力ターゲットとして指定された Node.js を使用した `webpack.config.js` 設定の例を次に示します。

```
// Import path for resolving file paths
var path = require("path");
module.exports = {
  // Specify the entry point for our app.
  entry: [path.join(__dirname, "browser.js")],
  // Specify the output file containing our bundled code.
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  // Let webpack know to generate a Node.js bundle.
  target: "node",
   // Enable WebPack to use the 'path' package.
   resolve:{
  fallback: { path: require.resolve("path-browserify")}
   /**
   * In Webpack version v2.0.0 and earlier, you must tell 
   * webpack how to use "json-loader" to load 'json' files.
   * To do this Enter 'npm --save-dev install json-loader' at the 
   * command line to install the "json-loader' package, and include the 
   * following entry in your webpack.config.js.
   module: {
    rules: [{test: /\.json$/, use: use: "json-loader"}]
  }
  **/
};
```