こんにちは！isubエンジニアの野田です。普段はサーバーサイドのJava（SpringFramework）や、画面ならJavaScript（Vueなど）での開発に従事していますが、昨今、AIを活用した開発ができることが非常に重要なスキルになってきていると感じています。そのため現在、専らAIについての学習を頑張っています。

　今回は、AI活用のスキル向上、ひいては今後も必要とされるエンジニアになることを目指して、AWS Amplify Gen 2、ターミナルAIの Claude Code、そしてAIネイティブエディタ Cursor を組み合わせ、フルスタックな日記アプリを開発することに挑戦しました！¹

　なお、この記事はAI・AWSを活用したプログラミング初心者以上を対象としており、AWSアカウント作成や基本的なPC操作については解説を省略している箇所もあることをご了承ください。もし実際にご自身のPC・クラウド環境で構築される場合は、AWS利用での思わぬ課金や、公開（デプロイ）による外部からの攻撃リスクについて十分ご注意ください。

第1回の概要

　第1回では、開発の土台作りを行いました。AIエージェント「Claude Code」をターミナルで起動し、TypeScriptでバックエンドの設計図を作成し、その後、AWS上のサンドボックス環境へデプロイするまでの一連の流れを記録しています。

1. 開発環境のセットアップ

Cursorのインストール

　cursor.com からインストーラーをダウンロードしました。 インストーラーをダウンロードしたあとは特に設定に変更を加えずインストールを進めていきます。 インストールが完了すると以下の画面が起動します。アカウントをお持ちでない場合はSign Upします。私は今回Sign Upしました。

　進めていくとPro Plan（有料）に加入するか聞かれますが、加入しなくても進められます。

　[Skip for now]をクリック（有料（従量課金）したい場合、登録してください。私は無料での利用を考えていたので飛ばしました）

　Data Sharing（データ共有）をしてよいか尋ねられます。これをオンにすると、コードやプロンプトをAIモデルの学習や改善のために利用できるようになりますが、今回はオフにします。（オプトアウト）

　GitHubとの連携をすることで、CursorのターミナルでClaude Codeを使用してプッシュなどを行いたいので、連携を設定します。

　進めると上記のような画面が出ます。事前にGitHubで今回の開発で使用するリポジトリを作成しておくとスムーズに進められます。事前に作成していない場合でも、この画面を表示したまま別画面でGitHubリポジトリを作成すれば問題ありません。ドロップダウンリストに選択したいリポジトリが表示されていない場合は、テキストボックスに入力して検索すれば画面をリロードしなくても出てきます。 リポジトリは予期せぬ内容が公開されないようにPrivateで作成²します。

Claude Codeのセットアップ

　Cursorのターミナル（Ctrl + @）を開き、以下のコマンドでインストールと認証を行いました。

npm install -g @anthropic-ai/claude-code
claude auth

　ブラウザが起動するので、Anthropicアカウントでログインし、承認を完了させます。

2. プロジェクトの初期化とAmplify Gen 2の導入

　次に、Next.jsプロジェクトの作成とAmplifyの基盤構築を行いました。

ステップ1：Next.jsプロジェクトの作成

npx create-next-app@latest my-diary --typescript --tailwind --eslint
cd my-diary

　設定の選択肢は、基本的にすべてデフォルト（Enter）で進行しました。

ステップ2：Amplify Gen 2の初期化

　作成したフォルダの中に入ります。これを忘れると、次の設定が反映されないので注意してください。

　Amplify Gen 2の初期化を行っていきます。

npm create amplify@latest

　このコマンドにより、プロジェクト内に amplify フォルダが生成されます。ここにインフラを定義するTypeScriptファイル（auth/resource.ts や data/resource.ts）が自動生成されました。

3. Claude Codeによるバックエンド設計

　ここからはAIエージェントを活用します。プロジェクトのルートで Claude を起動し、設定を行います。

　環境設定については適宜Enterを押して設定します。

　この画面は、Claude Codeを使うための「ログイン方法」の選択肢です。 現在の自分のプランに合わせて選択します。

• 「1」を選択する場合: ブラウザで使う通常の Claude Pro (月額$20) に加入しているならこちらです。追加料金なしで利用できます。
  
• 「2」を選択する場合: Proプランに入っておらず、APIの利用量に応じて支払う設定（プリペイド式）にしている場合はこちらです。
  

　 「1」を選んで Enter を押すと、以下のような流れになります。

• ブラウザが起動: Anthropic（Claude）のログイン画面が開きます。
  
• 承認: 「Claude Codeがあなたのアカウントを使ってもいいですか？」と聞かれるので承認します。
  

　起動したら、まずClaudeに現状を把握させます。

「Next.jsとAmplify Gen 2を導入したばかりです。プロジェクトの構成を確認して、これから日記アプリを作れる準備ができているか教えてください。」

　「Data設定」がまだサンプルのTodoモデルになっていることや、「誰でも操作できる状態（セキュリティ上の課題）」を指摘してくれています。 Claudeに具体的な修正（日記モデルの作成とセキュリティ強化）を命じましょう。 日記アプリに必要なデータモデルを定義させます。

AIへの指示（プロンプト）例

　ターミナルに以下を入力します。

「分析ありがとう！その通りに進めたいです。まずはバックエンドの定義を日記アプリ用に作り替えましょう。 以下の作業をお願いします： amplify/data/resource.ts を修正して、Todo モデルを削除し、新たに Diary モデルを作成してください。 Diary モデルのフィールド：title (string), content (string), date (string), imageKey (string) を持たせてください。 重要（セキュリティ）: 認可ルールを allow.owner() に設定し、ログインした作成者本人しか自分のデータの読み書き・削除ができないようにしてください。 修正が終わったら、変更箇所を教えてください。」

　AIが指示通りに「サンプルのTodo」を消して「日記用のDiaryモデル」に書き換え、さらにセキュリティ（allow.owner）を設定した結果の「差分（プレビュー）」です。 「1. Yes」を選択して Enter を押します。 これで、実際にファイルが保存されます。

　Claude Codeが「なぜその修正が必要だったか（identityPoolからuserPoolへの変更など）」まで理解して実行してくれました。 Claude Codeは現在のプロジェクト構成をスキャンし、サンプルのTodoモデルを削除しました。新規作成しただけのプロジェクトをセキュアな日記用のスキーマへと自動的に書き換えてくれました。

4. AWS Sandboxへのデプロイ

　Amplify Gen 2の特徴は、ローカルのコード変更を即座にクラウドへ反映する「サンドボックス環境」です。実際にデプロイを行いました。

サンドボックスの起動

　ターミナルで、以下のコマンドを実行するよう指示します。

「修正を反映してくれてありがとう。では、バックエンドをクラウド上に構築するために、ターミナルで npx ampx sandbox を実行してください。 ※もしAWSの認証（ログイン）が必要になったら教えてください。」

　「1. Yes」を選択して Enter を押してください。

　もしターミナルが 「Login to AWS…」 のような表示で止まったら、ブラウザが開くのを待つか、表示されたURLをクリックしてAWSにログインします。 「✔ Deployment completed」 と出たら、完了ですが……

　ちなみにこの実行の際、AWSの設定が不完全だったので途中でエラーとなりました。 現在、Claudeは「AWSを操作するための『鍵』がパソコンに入っていないよ」と言っています。

　「アクセスキー ID」 と 「シークレットアクセスキー」 が手に入ったら、Claude Codeを一度終了するか、新しいターミナルを開いて（Ctrl + @）以下を入力します。

aws configure

　すると、順番に質問されるので、メモした内容（またはダウンロードしたCSVファイル）を入力して Enter を押していきます。詳しくは、AWS公式ドキュメントも参照してください。

1. AWS Access Key ID: (取得したキーを貼り付け)
2. AWS Secret Access Key: (取得したシークレットを貼り付け)
3. Default region name: ap-northeast-1 （東京リージョン）
4. Default output format: json

AWS CLI をインストールする（Windows版）

　AWS CLI がダウンロードされていないというエラーになった場合は、以下の手順で、WindowsにAWS公式ツールを入れます。詳しくは、AWS公式ドキュメントも参照してください。

1. インストーラーのダウンロード: ブラウザで AWS CLI 公式ダウンロード(MSI) をクリックしてダウンロードしてください。
2. インストール実行: ダウンロードしたファイルを開き、すべて「Next」や「Install」で進めて完了させてください。
3. Cursorのターミナルを「再起動」: インストールが終わっても、今のターミナル画面には反映されません。一度、右上の「ゴミ箱アイコン」でターミナルを閉じる。Ctrl + @ で新しくターミナルを開き直してください。
4. 新しく開いたターミナルで、もう一度以下を打ってみてください。 aws --version aws-cli/2.x.x … のような文字が出れば成功。その後に、改めて aws configure を入力しましょう。

Claude への指示（プロンプト）

　Claudeで以下の内容を指示します。

「AWS CLIの設定（aws configure）が完了し、aws sts get-caller-identity で正常に認証されることを確認しました。 中断していた作業を再開したいので、以下の手順をお願いします： 1.npx ampx sandbox を実行して、日記アプリ（Diaryモデル）のバックエンドをクラウド上に構築してください。 2.構築が完了して amplify_outputs.json が生成されたら教えてください。」

　初回デプロイは 3〜5分ほどかかります。

　ちなみにAmplifyを使うのが初回の場合、セットアップが必要です。ブラウザに飛ばされるので、[今すぐ設定を初期化]をクリックします。

　この操作により、AWS上に実際の Cognito（認証）、AppSync（API）、DynamoDB（DB） が構築されました。完了すると、フロントエンドとバックエンドを繋ぐ amplify_outputs.json が自動生成されます。

まとめと次回の内容

　第1回では、バックエンドの基盤構築までを完了させました。

• Cursor/Claude Code： 対話形式でインフラコードを生成し、複雑な設定を自動化できた。
  
• Amplify Gen 2： TypeScriptで書いた「設計図」が、そのままクラウドのリソースとして立ち上がった。
  

　これまでのAWSでの開発では、ブラウザの管理画面で何度もクリックして設定する作業が存在しました。AWSでの初期設定は必要であるものの、ほぼコマンドとAIへの指示だけで完結するのは、開発速度を劇的に向上させると実感しています。しかも、間違いがあっても軌道修正するのがかなり容易なのにも驚きました。途中で認証エラーなどが発生しても、本筋の開発にかなり戻りやすく、「失敗した。。途中でやめよう→フェードアウト」の流れにならずに進められました。これは学習者にとってはモチベーションが保ちやすく、大きなメリットでした。

第2回： 次はフロントエンドです。「AWS Amplify導入と認証機能実装」として、ユーザーログイン画面と機能の実装プロセスを行っていきます。

1. AIを利用するにあたり、出力を100％信頼するのではなく、人間が監査・工夫をする必要性があると考えています。安全な利用のため、私のように基礎知識が多くない人にとってもAIリテラシーについてわかりやすかったのは、以下の総務省、東京都のホームページです。PDFやpptxをダウンロードできるので興味のある方はぜひご覧ください。
   参考・総務省ホームページ： 生成AIはじめの一歩～生成AIの入門的な使い方と注意点～
   参考・東京都ホームページ： AI導入･活用ガイドライン、生成AI利用の手引き ↩︎
2. 全リポジトリを参照可能にすることは予期せぬ動作が無いように念のため避けた方が良いと思います。 ↩︎

投稿者プロフィール

NodaYukiko

最新の投稿

• 【AI】2026年4月6日【第1回】AIエージェントと一緒にクラウド日記アプリ開発してみる：環境構築編【AWS Amplify Gen 2 × Cursor × Claude Code】