[AWS SDK for JavaScript V3 API リファレンスガイド](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/)では、 AWS SDK for JavaScript バージョン3 (V3) のすべての API オペレーションについて詳しく説明します。 翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 # React Nativeを開始します。 このチュートリアルでは、[ReactNative CLI](https://reactnative.dev/docs/environment-setup)を使用して React Native アプリを作成する方法を示します。 ![\[JavaScript code example that applies to React Native.\]](http://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v3/developer-guide/images/browsericon.png) **このチュートリアルでは、次のことを示します。** + プロジェクトが使用する AWS SDK for JavaScript バージョン 3 (V3) モジュールをインストールして含める方法。 + 「Amazon Simple Storage Service (Amazon S3)」に接続して Amazon S3 バケットを作成および削除するコードを記述する方法。 ## シナリオ Amazon S3は、ウェブ上のどこからでも、いつでも、任意の量のデータを保存および取得できるようにするクラウドサービスです。React Native は、モバイルアプリケーションを作成して有効にするデベロップメントフレームワークです。このチュートリアルでは、AmazonS3に接続してAmazonS3バケットを作成および削除するReactNativeアプリを作成する方法を示します。 アプリケーションは、次の AWS SDK for JavaScript APIs を使用します。 + [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/) コンストラクタ + [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/) コンストラクタ ## 前提条件タスク **注記** 他のチュートリアルまたは既存の設定で次のステップのいずれかをすでに完了している場合は、これらのステップをスキップします。 このセクションでは、このチュートリアルを完了するために必要な最小限のセットアップを提供します。これを完全なセットアップであるとは見なさないでください。詳細については、「[SDK for JavaScript のセットアップ](setting-up.md)」を参照してください。 + 以下のツールをインストールします。 + [npm](https://docs.npmjs.com/getting-started/) + [Node.js](https://nodejs.org/en/download/) + iOS でテストしている場合は [Xcode](https://developer.apple.com/xcode/)。 + Android でテストしている場合は [Android Studio](https://developer.android.com/studio/)。 + [React Native 開発環境](https://reactnative.dev/docs/environment-setup)のセットアップ + これらの Node TypeScript の例を実行するようにプロジェクト環境を設定し、必要な AWS SDK for JavaScript とサードパーティーモジュールをインストールします。「[GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/README.md)」の指示に従います。　 + AWS サービスを使用して開発 AWS するときに、コードが で認証される方法を確立する必要があります。詳細については、「[を使用した SDK 認証 AWS](getting-your-credentials.md)」を参照してください。 **注記** この例の IAM ロールは、**AmazonS3FullAccess** アクセス許可を使用するように設定する必要があります。 ## ステップ 1: Amazon Cognito アイデンティティプールを作成 この演習では、Amazon Cognito アイデンティティプールを作成して使用し、Amazon S3 サービスのアプリで未認証のアクセスを提供します。ID プールを作成すると、2 つの AWS Identity and Access Management (IAM) ロールも作成されます。1 つは ID プロバイダーによって認証されたユーザーをサポートするロール、もう 1 つは認証されていないゲストユーザーをサポートするロールです。 この演習では、タスクに集中し続けるために、認証されていないユーザーロールのみを使用します。後で ID プロバイダーと認証済みユーザーのサポートを統合できます。 **Amazon Cognito アイデンティティプールを作成するには** 1. にサインイン AWS マネジメントコンソール し、Amazon Web Services Console で Amazon Cognito [コンソール](https://console.aws.amazon.com/cognito/)を開きます。 1. コンソールの開始ページで、[**ID プール**] を選択します。 1. 次のページで、[**新しい ID プールの作成**] を選択します。 **注記** 他のアイデンティティプールがない場合、Amazon Cognito コンソールはこのページをスキップし、代わりに次のページを開きます。 1. **[ID プールの信頼を設定]** で、ユーザー認証に **[ゲストアクセス]** を選択します。 1. **[アクセス許可を設定]** で、**[新しい IAM ロールの作成]** を選択し、**[IAM ロール名]** に名前 (*getStartedReactRole* など) を入力します。 1. **[プロパティを設定]** で、**[ID プール名]** に名前 (*getStartedReactPool* など) を入力します。 1. **[確認および作成]** で、新しいアイデンティティプールに対して行った選択を確認します。**[編集]** を選択してウィザードに戻り、設定を変更します。終了したら、**[ID プールの作成]** を選択します。 1. [ID プールの ID] と、新しく作成したアイデンティティプールの [リージョン] を書き留めます。ブラウザスクリプトで *region* および *identityPoolId* をブラウザスクリプトで置換するには、これらの値が必要です。 Amazon Cognito アイデンティティプールを作成したら、React Native appにより必要な Amazon S3 権限を追加する準備が整います。 ## ステップ 2: 作成した IAM ロールにポリシーを追加 Amazon S3 へのブラウザスクリプトのアクセスを有効にして Amazon S3 バケットを作成および削除するには、Amazon Cognito ID プール用に作成された非認証の IAM ロールを使用します。これを進めるには、IAM ポリシーをロールに追加する必要があります。IAM ロールの詳細については、*IAM ユーザーガイド*の[「 AWS サービスにアクセス許可を委任するロールの作成](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html)」を参照してください。 **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の許可を追加すると、アプリを構築する準備が整います。 ## ステップ 3: Create-react-native-app を使用してアプリケーションを作成します 次のコマンドを実行してReact Native Appを作成します。 ``` npx react-native init ReactNativeApp --npm ``` ## ステップ 4: Amazon S3パッケージとその他の依存関係をインストールします プロジェクトのディレクトリ内で、次のコマンドを実行して Amazon S3 パッケージをインストールします。 ``` npm install @aws-sdk/client-s3 ``` このコマンドはプロジェクトに Amazon S3 パッケージをインストールして、`package.json`を更新し、 Amazon S3 をプロジェクトの依存関係として一覧表示します。このパッケージに関する情報は、[https://www.npmjs.com/](https://www.npmjs.com/)npmウェブサイトで「＠aws-sdk」と検索すると見つかります。 これらのパッケージとそれに関連するコードは、プロジェクトの `node_modules` サブディレクトリにインストールされています。 Node.js パッケージのインストールの詳細については、[npm (Node.js パッケージマネージャー) ウェブサイト](https://www.npmjs.com/)の[パッケージをローカルでダウンロードしてインストール](https://docs.npmjs.com/downloading-and-installing-packages-locally)および [Node.jsモジュールの作成](https://docs.npmjs.com/creating-node-js-modules)を参照してください。 AWS SDK for JavaScript のダウンロードとインストールの詳細については、「」を参照してください[SDK for JavaScript をインストールする](setting-up.md#installing-jssdk)。 認証に必要なその他の依存関係をインストールします。 ``` npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity ``` ## ステップ 5: React Native コードを書き込みする。 次のコードを`App.tsx`に追加します。*identityPoolId* と *region* を、Amazon S3 バケットが作成される ID プールの ID とリージョンに置き換えます。 ``` import React, { useCallback, useState } from "react"; import { Button, StyleSheet, Text, TextInput, View } from "react-native"; import "react-native-get-random-values"; import "react-native-url-polyfill/auto"; import { S3Client, CreateBucketCommand, DeleteBucketCommand, } from "@aws-sdk/client-s3"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers"; const client = new S3Client({ // The AWS Region where the Amazon Simple Storage Service (Amazon S3) bucket will be created. Replace this with your Region. region: "us-east-1", credentials: fromCognitoIdentityPool({ // Replace the value of 'identityPoolId' with the ID of an Amazon Cognito identity pool in your Amazon Cognito Region. identityPoolId: "us-east-1:edbe2c04-7f5d-469b-85e5-98096bd75492", // Replace the value of 'region' with your Amazon Cognito Region. clientConfig: { region: "us-east-1" }, }), }); enum MessageType { SUCCESS = 0, FAILURE = 1, EMPTY = 2, } const App = () => { const [bucketName, setBucketName] = useState(""); const [msg, setMsg] = useState<{ message: string; type: MessageType }>({ message: "", type: MessageType.EMPTY, }); const createBucket = useCallback(async () => { setMsg({ message: "", type: MessageType.EMPTY }); try { await client.send(new CreateBucketCommand({ Bucket: bucketName })); setMsg({ message: `Bucket "${bucketName}" created.`, type: MessageType.SUCCESS, }); } catch (e) { console.error(e); setMsg({ message: e instanceof Error ? e.message : "Unknown error", type: MessageType.FAILURE, }); } }, [bucketName]); const deleteBucket = useCallback(async () => { setMsg({ message: "", type: MessageType.EMPTY }); try { await client.send(new DeleteBucketCommand({ Bucket: bucketName })); setMsg({ message: `Bucket "${bucketName}" deleted.`, type: MessageType.SUCCESS, }); } catch (e) { setMsg({ message: e instanceof Error ? e.message : "Unknown error", type: MessageType.FAILURE, }); } }, [bucketName]); return ( {msg.type !== MessageType.EMPTY && ( {msg.message} )} setBucketName(text)} autoCapitalize={"none"} value={bucketName} placeholder={"Enter Bucket Name"} />