Amazon CodeCatalyst は新規のお客様には提供されなくなりました。既存のお客様は、通常どおりサービスを引き続き使用できます。詳細については、「[CodeCatalyst から移行する方法](migration.md)」を参照してください。

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

# チュートリアル: React アプリケーションの作成と更新
<a name="blueprint-getting-started-tutorial"></a>

ブループリント作成者として、スペースのブループリントカタログにカスタムブループリントを開発して追加できます。これらのブループリントは、スペースメンバーが新しいプロジェクトを作成したり、既存のプロジェクトに追加したりできます。引き続きブループリントを変更し、プルリクエストを通じて更新として利用可能にすることができます。

このチュートリアルでは、ブループリント作成者の視点とブループリントユーザーの視点の両方から手順を説明します。このチュートリアルでは、React の単一ページのウェブアプリケーションブループリントを作成する方法を示します。その後、ブループリントを使用して新しいプロジェクトを作成します。ブループリントが変更によって更新されると、ブループリントから作成されたプロジェクトは、プルリクエストを通じてこれらの変更を反映します。

**Topics**
+ [前提条件](#blueprint-getting-started-prerequisites)
+ [ステップ 1: カスタムブループリントを作成する](#react-bluprint-tutorial-create-bp)
+ [ステップ 2: リリースワークフローを表示する](#blueprint-getting-started-view-workflow)
+ [ステップ 3: カタログにブループリントを追加する](#blueprint-getting-started-add-to-catalog)
+ [ステップ 4: ブループリントを使用してプロジェクトを作成する](#blueprint-getting-started-create-project)
+ [ステップ 5: ブループリントを更新する](#blueprint-getting-started-update-blueprint)
+ [ステップ 6: ブループリントの公開済みカタログバージョンを新しいバージョンに更新する](#blueprint-getting-started-update-catalog-version)
+ [ステップ 7: 新しいブループリントバージョンでプロジェクトを更新する](#blueprint-getting-started-update-project)
+ [ステップ 8: プロジェクトの変更を表示する](#blueprint-getting-started-view-changes)

## 前提条件
<a name="blueprint-getting-started-prerequisites"></a>

カスタムブループリントを作成および更新するには、「[CodeCatalyst をセットアップしてサインインするCodeCatalyst をセットアップしてサインインする](setting-up-topnode.md)」でタスクを次のとおりに完了している必要があります。
+ CodeCatalyst にサインインするための AWS ビルダー ID を用意していること。
+ スペースに属し、そのスペースで **[スペース管理者]**または **[パワーユーザー]** ロールを割り当てます。詳細については、「[スペースを作成する](spaces-create.md)」、「[ユーザーへのスペースアクセス許可の付与](spaces-members.md)」、および「[スペース管理者ロール](ipa-role-types.md#ipa-role-space-admin)」を参照してください。

## ステップ 1: カスタムブループリントを作成する
<a name="react-bluprint-tutorial-create-bp"></a>

カスタムブループリントを作成すると、ブループリントのソースコードと開発ツールとリソースを含む CodeCatalyst プロジェクトが作成されます。プロジェクトでは、ブループリントを開発、テスト、公開します。

1. [https://codecatalyst.aws/](https://codecatalyst.aws/) で CodeCatalyst コンソールを開きます。

1. CodeCatalyst コンソールで、ブループリントを作成するスペースに移動します。

1. **[設定]** を選択して、スペース設定に移動します。

1. **[スペース設定]** タブで **[ブループリント]** を選択し、**[ブループリントを作成]** を選択します。

1. ブループリント作成ウィザードのフィールドを次の値で更新します。
   + **[ブループリント名]**に、「`react-app-blueprint`」と入力します。
   + **[ブループリント表示名]** で、「`react-app-blueprint`」と入力します。

1. オプションで、**[コードを表示]** を選択して、ブループリントのブループリントソースコードをプレビューします。同様に、**[ワークフローを表示]** を選択して、ブループリントをビルドして公開するプロジェクトで作成されるワークフローをプレビューします。

1. **[ブループリントを作成]** を選択します。

1. ブループリントが作成されると、ブループリントのプロジェクトに移動します。このプロジェクトには、ブループリントのソースコードと、ブループリントの開発、テスト、公開に必要なツールとリソースが含まれています。リリースワークフローが生成され、自動的にブループリントがスペースに発行されました。

1. ブループリントとブループリントプロジェクトを作成したら、次のステップはソースコードを更新して設定することです。開発環境を使用して、ブラウザでソースリポジトリを直接開いて編集できます。

   ナビゲーションペインで、**[コード]**、**[開発環境]** の順に選択します。

1. **[開発環境を作成]** を選択し、**[AWS Cloud9 (ブラウザで)]** を選択します。

1. 残りの設定はデフォルト値のままにし、**[作成]** を選択します。

1. AWS Cloud9 ターミナルで、ブループリントプロジェクトディレクトリに移動し、以下のコマンドを実行します。

   ```
   cd react-app-blueprint
   ```

1. ブループリントが作成されると、`static-assets` フォルダが自動的に作成され、入力されます。このチュートリアルでは、デフォルトのフォルダを削除し、React アプリケーションのブループリント用に新しいフォルダを生成します。

   次のコマンドを実行して、[static-assets] フォルダを削除します。

   ```
   rm -r static-assets
   ```

   AWS Cloud9 は Linux ベースのプラットフォーム上にビルドされています。Windows オペレーティングシステムを使用している場合は、代わりに次のコマンドを使用できます。

   ```
   rmdir /s /q static-assets
   ```

1. デフォルトのフォルダが削除されたら、次のコマンドを実行して、React-App ブループリントの `static-assets` フォルダを作成します。

   ```
   npx create-react-app static-assets
   ```

   プロンプトが表示されたら、`y` を入力して続行します。

   必要なパッケージが入った `static-assets` フォルダに新しい React アプリケーションが作成されました。変更は、リモート CodeCatalyst ソースリポジトリにプッシュする必要があります。

1. 最新の変更があることを確認し、次のコマンドを実行して、変更をブループリントの CodeCatalyst ソースリポジトリにコミットしてプッシュします。

   ```
   git pull
   ```

   ```
   git add .
   ```

   ```
   git commit -m "Add React app to static-assets"
   ```

   ```
   git push
   ```

変更がブループリントのソースリポジトリにプッシュされると、リリースワークフローが自動的に開始します。このワークフローは、ブループリントバージョンを増分し、ブループリントをビルドし、スペースに公開します。次のステップでは、リリースワークフローの実行に移動して、その状態を確認します。

## ステップ 2: リリースワークフローを表示する
<a name="blueprint-getting-started-view-workflow"></a>



1. CodeCatalyst コンソールのナビゲーションペインで **[CI/CD]**、**[ワークフロー]** の順に選択します。

1. **[blueprint-release]** ワークフローを選択します。

1. ワークフローには、ブループリントをビルドして公開するアクションがあります。

1. **[最新の実行]** で、ワークフロー実行リンクを選択して、行ったコードの変更から実行を表示します。

1. 実行が完了すると、新しいブループリントバージョンが公開されます。公開されたブループリントバージョンはスペース **[設定]** で確認できますが、スペースのブループリントカタログに追加されるまでプロジェクトでは使用できません。次のステップでは、ブループリントをカタログに追加します。

## ステップ 3: カタログにブループリントを追加する
<a name="blueprint-getting-started-add-to-catalog"></a>

スペースのブループリントカタログにブループリントを追加すると、スペース内のすべてのプロジェクトでブループリントを使用できます。スペースメンバーは、ブループリントを使用して新しいプロジェクトを作成したり、既存のプロジェクトに追加したりできます。

1. CodeCatalyst コンソールで、スペースに戻ります。

1. **[設定]** を選択し、次に **[ブループリント]** を選択します。

1. **[react-app-blueprint]** を選択し、次に **[カタログに追加]** を選択します。

1. **[保存]** を選択します。

## ステップ 4: ブループリントを使用してプロジェクトを作成する
<a name="blueprint-getting-started-create-project"></a>

これで、ブループリントがカタログに追加され、プロジェクトで使用できるようになりました。このステップでは、先ほど作成したブループリントを使用してプロジェクトを作成します。後のステップでは、ブループリントの新しいバージョンを更新して公開することで、このプロジェクトを更新します。

1. **[プロジェクト]** タブを選択し、**[プロジェクトを作成]** を選択します。

1. **[スペースブループリント]** を選択し、**[react-app-blueprint]** を選択します。
**注記**  
ブループリントを選択すると、ブループリントの `README.md` ファイルの内容を確認できます。

1. [**次へ**] を選択します。

1. 
**注記**  
このプロジェクト作成ウィザードの内容は、ブループリントで設定できます。

   プロジェクト名をブループリントユーザーとして入力します。このチュートリアルでは、`react-app-project` と入力します。詳細については、「[プロジェクト要件を満たすためのカスタムブループリントの作成](develop-bp.md)」を参照してください。

次に、ブループリントを更新し、新しいバージョンをカタログに追加します。このバージョンを使用して、このプロジェクトを更新します。

## ステップ 5: ブループリントを更新する
<a name="blueprint-getting-started-update-blueprint"></a>

ブループリントを使用して新しいプロジェクトを作成するか、既存のプロジェクトに適用した後も、ブループリント作成者として更新を続行できます。このステップでは、ブループリントを変更し、スペースに新しいバージョンを自動的に公開します。その後、新しいバージョンをカタログバージョンとして追加できます。

1. 「[チュートリアル: React アプリケーションの作成と更新](#blueprint-getting-started-tutorial)」で作成した **[react-app-blueprint]** プロジェクトに移動します。

1. 「[チュートリアル: React アプリケーションの作成と更新](#blueprint-getting-started-tutorial)」で作成した開発環境を開きます。

   1. ナビゲーションペインで、**[コード]**、**[開発環境]** の順に選択します。

   1. テーブルから開発環境を検索し、**[AWS Cloud9 で開く(ブラウザで)]** を選択します。

1. ブループリントリリースワークフローが実行されると、`package.json` ファイルを更新することでブループリントバージョンが増加します。AWS Cloud9 ターミナルで次のコマンドを実行し、変更をプルします。

   ```
   git pull
   ```

1. `static-assets` フォルダに移動し、以下のコマンドを実行します。

   ```
   cd /projects/react-app-blueprint/static-assets
   ```

1. 次のコマンドを実行して、`static-assets` フォルダに `hello-world.txt` ファイルを作成します。

   ```
   touch hello-world.txt
   ```

   AWS Cloud9 は Linux ベースのプラットフォーム上にビルドされています。Windows オペレーティングシステムを使用している場合は、代わりに次のコマンドを使用できます。

   ```
   echo > hello-world.text
   ```

1. 左側のナビゲーションで、`hello-world.txt` ファイルをダブルクリックしてエディタで開き、次の内容を追加します。

   ```
   Hello, world!
   ```

   ファイルを保存します。

1. 最新の変更があることを確認し、次のコマンドを実行して、変更をブループリントの CodeCatalyst ソースリポジトリにコミットしてプッシュします。

   ```
   git pull
   ```

   ```
   git add .
   ```

   ```
   git commit -m "prettier setup"
   ```

   ```
   git push
   ```

変更をプッシュすると、リリースワークフローが開始し、新しいバージョンのブループリントがスペースに自動的に公開されます。

## ステップ 6: ブループリントの公開済みカタログバージョンを新しいバージョンに更新する
<a name="blueprint-getting-started-update-catalog-version"></a>

ブループリントを使用して新しいプロジェクトを作成するか、既存のプロジェクトに適用した後も、ブループリント作成者としてブループリントを更新できます。このステップでは、ブループリントを変更し、ブループリントのカタログバージョンを変更します。

1. CodeCatalyst コンソールで、スペースに戻ります。

1. **[設定]** を選択し、次に **[ブループリント]** を選択します。

1. **[react-app-blueprint]** を選択し、**[カタログバージョンを管理]** を選択します。

1. 新しいバージョンを選択し、**[保存]** を選択します。

## ステップ 7: 新しいブループリントバージョンでプロジェクトを更新する
<a name="blueprint-getting-started-update-project"></a>

スペースのブループリントカタログで新しいバージョンが利用可能になりました。ブループリントユーザーとして、「[ステップ 4: ブループリントを使用してプロジェクトを作成する](#blueprint-getting-started-create-project)」で作成したプロジェクトのバージョンを更新できます。これにより、ベストプラクティスを満たすために必要な最新の変更と修正が可能になります。

1. CodeCatalyst コンソールで、「[ステップ 4: ブループリントを使用してプロジェクトを作成する](#blueprint-getting-started-create-project)」で作成した **[react-app-project]** プロジェクトに移動します。

1. ナビゲーションペインで **[Blueprints]** (ブループリント) を選択します。

1. 情報ボックスで **[ブループリントを更新]** を選択します。

1. 右側の **[コード変更]** パネルには、`hello-world.txt` と `package.json` 更新が表示されます。

1. **[更新を適用]** を選択します。

**[更新を適用]** を選択すると、更新されたブループリントバージョンからの変更を含むプルリクエストがプロジェクトに作成されます。プロジェクトを更新するには、プルリクエストをマージする必要があります。詳細については、「[プルリクエストのレビュー](pull-requests-review.md)」および「[プルリクエストをマージする](pull-requests-merge.md)」を参照してください。

1. **[ブループリント]** テーブルで、ブループリントを見つけます。**[ステータス]** 列で、**[保留中のプルリクエスト]** を選択し、開いているプルリクエストへのリンクを選択します。

1. プルリクエストを確認してから、**[マージ]** を選択します。

1. **[Fast Forward マージ]** を選択してデフォルト値を維持し、**[マージ]** を選択します。

## ステップ 8: プロジェクトの変更を表示する
<a name="blueprint-getting-started-view-changes"></a>

ブループリントへの変更は、[ステップ 7: 新しいブループリントバージョンでプロジェクトを更新する](#blueprint-getting-started-update-project) の後にプロジェクトで利用可能になりました。ブループリントユーザーは、ソースリポジトリで変更を表示できます。

1. ナビゲーションペインで、**[ソースリポジトリ]** を選択し、プロジェクトの作成時に作成されたソースリポジトリの名前を選択します。

1. **[ファイル]** では、「[ステップ 5: ブループリントを更新する](#blueprint-getting-started-update-blueprint)」で作成した `hello-world.txt` ファイルを表示できます。

1. ファイルのコンテンツを表示する `hello-world.txt` を選択します。

ライフサイクル管理により、ブループリント作成者は、特定のブループリントを含むすべてのプロジェクトのソフトウェア開発ライフサイクルを一元的に管理できます。このチュートリアルに示すように、ブループリントの更新をプッシュして、ブループリントを使用して新しいプロジェクトを作成するか、既存のプロジェクトに適用したプロジェクトに組み込めます。詳細については、「[ブループリント作成者としてライフサイクル管理を使用する](lifecycle-management-dev.md)」を参照してください。