CodeCatalyst シリーズとして、第三回では、前回作成した To Do アプリについて、以下の内容を解説します。

• Amazon Q による Issue 対応の自動化
• Amazon Q によるコードの変更・プルリクエスト
• Dev Environment でのコードの修正・デプロイ

Amazon Q の有効化

『Create Issue』よりIssueを作成する時、Assignees に Assign to Amazon Q を選択すると、そのIssueに基づくタスクをAmazon Qが自動で対応してくれるが、最初は以下メッセージが表示されるため、Space Setting からAmazon Qの利用を許可する必要がある。

Your space doesn’t have access to the generative features of Amazon CodeCatalyst. Only users with the Space administrator role can enable access to these features.

それでは、Amazon Qを有効化していく。Free Tierでも利用可能。

Space → Settings → Generative AI と遷移し、Projects in this space can access generative AI featuresを有効化する

Amazon QによるIssue対応の自動化（コードの変更・プルリクエスト）

今回は、作成されたTo Do アプリにダークモードへのスイッチボタンの追加をIssueとして作成し、Amazon Qにアサインする。

Project → Project Name → Issues と遷移し、『Create issue』をクリック。以下画像の様にDescriptionなどを記入する。

• Require Amazon Q to stop after each step and await review of its work：Amazon Qが変更を行う前に承認を必要とするかどうか
• Allow Amazon Q to modify workflow files：Amazon Qによるワークフローファイルの変更を許可するかどうか
• Allow Amazon Q to suggest creating tasks：Amazon Qによるタスク作成を許可するかどうか

「Create issue」をクリックすると、以下の様に、To do → In progress → In Review とAmazon Qが作業を始める。

先ほど、Require Amazon Q to stop after each step and await review of its work を有効にしたため、Amazon QがIn progressで止まり、何を実行するか表示し、承認を求めてくる。

『Continue without creating tasks』をクリックすると、Amazon Qによって、コードの修正・プルリクエストが行われる。（各ステップでProceedか、Replyを選択させられる）

再度コメントを返し、変更内容の提案・修正も可能。

作成されたプルリクエスト（PR-1 Implementing dark mode）をクリックする。

『Change』をクリックすると、今回のコードの変更点が確認できる。

『Approve』、『Merge』の順にクリックする。

再度『Merge』をクリックする。（ここでは、Fast forward mergeを利用）

補足：

• git merge –ff-only は、マージが「fast-forward」できる場合にのみマージを行う。
• もしマージ先のブランチに追加のコミットがある場合、マージは失敗する。
• このコマンドを使うと、ブランチの履歴をシンプルでわかりやすく保つことができる。

Project → Project Name → Workflows → Workflow Name と遷移すると、CI/CDパイプラインのワークフローが確認できる。

上記画像の通り、今回はエラーが起きてしまったため、レポジトリから直接コードを修正する。

App.tsxで、DarkModeToggleがうまくインポートできていなかったため、適切なコードに変更する。

ワークフローが終わり、再度開くと、DarkModeトグルが実装されていた。（画像はトグル有効化後）

しかし、DarkModeトグルが画面の一番下にあったため、画像に移りきらなかった。

Dev Environmentを利用したVS Codeを起動・コードの修正

Amazon Qに依頼して、ダークモードを作成してもらったものの、DarkModeトグルが画面の一番下にあって、見つけづらいので、Dev Environment（VS Code）を起動して、自分で手直しをする。

Dev Environmentsを開き、『Create Dev Environment』をクリック。 CodeCatalyst上のレポジトリを同期するために、Cloneを選び、ブランチにMainを選択し、『Create』をクリックする。

「このサイトは、Visual Studio Code を開こうとしています。」というポップアップが出るので、『開く』をクリック。

VS Codeが開いたら、「AWS ToolKit 拡張機能を Amazon Web ServicesI からインストールしますか？」というポップアップが出るので、『開く』をクリック。

画面遷移されるため、『Allow access』をクリック。 VS Code上に、CodeCatalyst上のレポジトリが同期される。 ※VS Codeの右下に必要なプラグインが表示されたら」インストールする。

※VS CodeとCodeCatalystが同期されなかったら、再度CodeCatalystコンソールから『Your Dev Environment was successfully created. Get started by opening your Dev Environment in Visual Studio Code.』をクリックする。

左のAWSアイコンから、Amazon Qを選択すると、Amazon Qへの認証画面が出る。そこからAmazon Qを追加することも可能。（CodeCatalystだけのものではない）

Amazon Qにやりたいことを質問すると、具体的な改善方法を提案してくれる。

一番下の『Generate code』をクリックすると、コードを生成して、Diffまで作成してくれる。

『Insert Code』をクリック、変更をセーブし、左のコード管理から、コミット・プッシュを行う。

ワークフローが完了したら、再度変更を確認する。

やっと、DarkModeトグルが上のほうに表示された。

第三回は、以上です。次回は今までのまとめや感想と、作成物の削除についてお話します。