【30日でAWSをマスターするハンズオン問題集】Day25：Amplify Gen 2 で認証付き・優先度付きTodoアプリを作ってみよう

📝 概要

こちらの投稿は2025 Japan AWS Jr.Championsの有志メンバーで作成した『30日間で主要AWSサービスを構築できるようになる』をテーマにした初学者向けのハンズオン問題集のDAY1になります！
問題集の趣旨や作成に至るまでの経緯は以下の記事をご覧いただければと思います。
https://qiita.com/satosato_kozakana/items/446971c2deca7e27d0aa

項目	内容
所要時間	約1時間
メインサービス	AWS Amplify Gen 2 (include Amazon Cognito, Amazon DynamoDB, etc...)
学べること	Amplify Gen 2 の基礎知識、Amplify Gen 2 で認証・DBを扱う方法の概要
想定費用	約100円（※実行回数により変動します）

⚠️ 注意：以下のリソースを削除し忘れると課金が継続します。

• AWS Amplify

🎯 課題内容

Amplify Gen 2 を用い、Next.jsで、認証と、Todo優先度の付いたTodoアプリを作成します。
認証を司るAmplify Authと、データを司るAmplify Dataの扱い方の概要が知れるため、Amplify Gen 2を用いたWebアプリ開発の、特に「Amplify Gen 2 ならではの部分」の第一歩を踏み出すことができます。

サービスの全体像はアーキテクチャ図を参照してください。

📊 アーキテクチャ図

Amplify Gen 2 で提供されている認証はCognitoを用いています。
同様に、データベースはDynamoDBを用いています。

これらを使う時、実は直接使っているわけではありません。
Amplify BackendでAmplify AuthとAmplify Dataを定義し、使用します。

データベースに関しては、厳密にはAmplify Data→AppSync→DynamoDBのように使用されます。

🔧 実装機能

• アプリケーションにアクセスすると、認証画面があります。
• ユーザーの新規登録をしてログインすると、優先度付きでTodoの作成・削除ができます。（更新機能は今回作りません。）
• 作成されたTodoは本人だけ見ることができます。

💡 実装のヒント

Amplify Gen 2 では 豊富なドキュメント があります。
ここで実装する機能はどれも基本的なもので、ドキュメントの記載に従うだけでも十分実装が可能です。

おおまかなガイドラインや注意するポイントは記載していますが、ぜひ、ハンズオンを通して「ドキュメントを読みながら実装する」ことにも慣れてみてください。

• デプロイに関するドキュメント
  • QuickStart
• ローカルで開発する上でのドキュメント
  • Cloud Sandbox
• 認証に関するドキュメント
  • Amplify Auth
  • Authenticator
  • Using the Authenticator
    • Amplify UI のコンポーネント
• データベースに関するドキュメント
  • Amplify Data
  • Customize your data model
  • Customize your auth rules
  • Delete an item

✅ 完成後のチェックポイント

• アプリケーションに特定の URL でアクセスできる
• アプリケーションで新規登録・ログインできる
• Todoを優先付きで作成・削除できる
• そのTodoを作成した本人だけが見れる
  • 別のメールアドレスでアカウントを作成してみる（エイリアス/エンベロープリターンパスでもok）
  • 切り替えたりしながら、本人しか見れないことを確認

🧰 使用資材

Amplify Gen 2 が公式に用意しているクイックスタートのGitHubテンプレートを使用します。
ここをクリックして、テンプレートからリポジトリを作成
（Forkとは異なる機能です）

🔗 リファレンスリンク

• Amplify Gen 2 公式ドキュメント

🛠️ 解答・構築手順（クリックで開く）

解答と構築手順を見る

ステップ1：テンプレートからサンプルアプリをデプロイ

✅ ステップ1：テンプレートからサンプルアプリをデプロイ

1. （テンプレートからGitHubリポジトリを作成）
2. AWSマネジメントコンソールを IAMの操作許可もある権限で 開く
3. Amplify と検索し AWS Amplify を押下
4. アプリを作成する
   1. （そのリージョンで初めてのアプリの場合）中心にある アプリケーションをデプロイ を押下
   2. （そのリージョンで2つ目以降のアプリの場合）右上の 新しいアプリを作成 を押下
5. GitHub を選択
6. （必要に応じてGitHubのアクセス許可を設定）
7. 先ほど作成したリポジトリを選択し 次へ
8. 特に何も変更せず 次へ 保存してデプロイ
9. （デプロイされたアプリを ドメイン に記載されたリンクから確認）

ステップ2：Amplify Authを使って認証を整備する

✅ ステップ2：Amplify Authを使って認証を整備する

1. （リポジトリをローカルにクローン 参考 ）
2. そのディレクトリの中で npm install コマンドを実行
3. npx ampx sandbox でCloud Sandboxを実行（ターミナルがCloud Sandboxで占有されるので、以降のコマンド実行は別のターミナルで行う）
4. （ amplify_outputs.json ファイルが作成され、Cloud Sandboxで File Written ... と表示されたことを確認）
   1. ※バックエンド（インフラ）へのAPIキー的なアクセス情報が含まれているので、取扱注意
5. （すでにAmplify Authがサンプルアプリで定義済みなことを確認）
   1. amplify/auth/resource.ts で defineAuth している
   2. amplify/backend.ts でimportして defineBackend の引数に渡している
6. Authenticator を @aws-amplify/ui-react からimportして使用 参考
7. npm run dev コマンドを実行して、ローカルで動作を確認
   1. ユーザーの新規作成ができるか
   2. ログインができるか
8. 変更をリモートにプッシュしてデプロイ（CI/CDはすでに組まれている）
   1. git add . で変更をステージング
   2. git commit -m "add auth" で変更をコミット
   3. git push で変更をリモートにプッシュ
9. 先ほどのAWSマネジメントコンソールのアプリの画面からデプロイを確認

ステップ3：Amplify Dataを使ってデータベースを整備する

✅ ステップ3：Amplify Dataを使ってデータベースを整備する

1. （すでにAmplify Dataがサンプルアプリで定義済みなことを確認）
   1. amplify/data/resource.ts で defineData している
   2. amplify/backend.ts でimportして defineBackend の引数に渡している
2. schemaの定義を編集する
   1. 優先度のカラム priority を integer 型で追加する 参考
   2. authorization で所有者のみアクセスできることを示す、 owner() を設定する 参考
3. （データの読み取り・作成がすでにできることを確認）
   1. app/page.tsx で listTodos() と createTodo() が実装済み
4. 削除をできるようにする 参考
   1. todoのidを引数に取る deleteTodo(id) 関数を定義
   2. 関数内で client.models.Todo.delete({id}) を実行
5. 作成時に優先度を指定できるようにする（方法は自由、フォームでも良いし、複数回 window.prompt を実行しても良い）
6. 閲覧時に優先度も閲覧できるようにする（方法は自由、ただ数字が表示できるだけでも十分）
   1. （ todo.priority でアクセスできる）
7. ローカルで動作を確認
   1. Todoの作成時に優先度を指定できるか
   2. Todoの閲覧時に優先度も表示されているか
   3. ログインするユーザーを切り替えた時に別のユーザーのTodoは見えず、自分が作成したTodoだけが見えるか
8. 変更をリモートにプッシュしてデプロイ
9. 先ほどのAWSマネジメントコンソールのアプリの画面からデプロイを確認

片付け（リソース削除）

🧹 片付け（リソース削除）

• Cloud Sandboxを削除
  • 作業していたディレクトリの中で npx ampx sandbox delete を実行
• Amplifyアプリを削除
  • コンソールからアプリにアクセス
  • アプリケーションの設定 の 全般設定 にアクセス
  • アプリの削除 を押下

🏁 おつかれさまでした！

この課題では、Amplify Gen 2の基本的な要素のうちの2つ、Amplify AuthとAmplify Dataを使用してみました。
また解答では、元々サンプルアプリ（テンプレート）に存在した記述についても触れました。
簡単に認証やデータベースを扱うことができることを体感いただけたなら嬉しいです。
ぜひ、ファンクショナルプロトタイプなどの開発で使用してみてください！

エイミでした、またこんど！