Amplify Gen 2の「意外性」 〜とっても便利！だけどできると思ってたことが できないことがある！逆にできないと思ってる ことでも実はできるんです！〜

「東京支部 CommunityBuilders Night #2 / Jr.Championsコラボ」で発表した内容です！
https://jawsug.connpass.com/event/363613/

Transcript

1. 株式会社Relic エンジニア 保 龍児（エイミ/amixedcolor） Amplify Gen 2の「意外性」 〜とっても便利！だけどできると思ってたことが できないことがある！逆にできないと思ってる ことでも実はできるんです！〜
2. 2 自己紹介 保 龍児（エイミ/amixedcolor） 2025 Japan AWS Jr. Champion 業務内容 : 自社新規事業プロダクト（SaaS）開発 エンジニア（WebアプリFE/BE/インフラ） 好きなトピック : アジャイル、スクラム、新規事業開発、 AWS、完全没入型仮想現実 よくいるコミュニティ : AWSコミュニティ、アジャイルコミュニティ @amixedcolor
3. 3 この発表で何が嬉しい？
4. 4 この発表で何が嬉しい？ • Amplify Gen 2を使っている人/知っている人 • 今/これから使う時に 気を付ける必要のある「意外性」 がわかる • Amplify Gen 2を使っていない/知らない人 • 「できないと思っていた」ことができる とわかることで、 とっても便利なAmplify Gen 2を使うきっかけになる
5. 5 Amplify Gen 2とは
6. 6 Amplify Gen 2とは？（1/2） • https://docs.amplify.aws/ • 曰く「ウェブ・モバイルアプリを構築する上で必要な全て」 • > AWS Amplify is everything you need to build web and mobile apps. • 曰く「簡単に始められ、簡単にスケールできる」 • > Easy to start, easy to scale. • 要は、「とっても便利！」
7. 7 Amplify Gen 2とは？（2/2） • Gen「2」？ • 元々無印の「AWS Amplify」というサービスがあり、大幅なアップデー トを経て「Amplify Gen 2」がリリースされました • 以来、無印は「Gen 1」と呼ばれています • 大幅なアップデート？ Gen 構築 構築方法 追跡可能性 カスタマイズ性 Gen 1 自動 CLI Gen 2 自動 CDK
8. 8 意外性1・2 できると思ってたことができない
9. 9 意外性1: ReactのSuspense • Reactのコンポーネントの1つ • > `<Suspense>` を使うことで、子要素が読み込みを完了するま でフォールバックを表示させることができます。 • https://ja.react.dev/reference/react/Suspense • ローカルでは動作するが、デプロイすると動作しない • 2023/12/06にGitHub Issueに起票されたがまだOpen状態 • https://github.com/aws-amplify/amplify-hosting/issues/3843 • 2025/01/28に「This is on our roadmap for 2025」とのことだったが、 2025/06/06に「this project is going to be paused for the meantime」 となった
10. 10 意外性2: 簡単なインフラリソースの移行 • Cognito, S3, DynamoDBなど • 「簡単に」はできない • リソースはAWS AmplifyのCDKによって作られ、管理されている • その管理を簡単に取り外し、別個CDKで管理できるようにはでき ていない • マニュアルでユーザープール・バケット・テーブルなどの中身を エクスポートやインポートなどで移行する必要がある
11. 11 意外性3・4 できないと思ってることでも実はできる
12. 12 意外性3: NoSQLを使うけどリレーション・部分一致検索ができる • App Sync (GraphQL), DynamoDBが内部的に使用されている • どちらも意識せず、Amplify Dataを意識する • テーブル定義 〜 ORM的な部分 〜 認可制御まで提供 • https://docs.amplify.aws/react/build-a-backend/data/set-up-data/ • 元々NoSQLでも可能だが、自分で実装する必要がない • 1対多・1対1・多対多が実現可能 • https://docs.amplify.aws/react/build-a-backend/data/data- modeling/relationships/ • 部分一致フィルタ「contains」を使用可能 • https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/develop erguide/Expressions.OperatorsAndFunctions.html
13. 13 意外性4: GraphQLを使うけどREST APIみたいな呼び出しができる • 意識するのがAmplify Dataになっている • モデル（テーブル）に対するcreate, get, listなどが可能 ```typescript import type { Schema } from ‘@/amplify/data/resource' import { generateClient } from 'aws-amplify/data' const client = generateClient<Schema>() async function createTodo() { await client.models.Todo.create(data) } ```
14. 14 よいAmplify Gen 2ライフを！
15. 大志ある挑戦を創造し、日本から世界へ 想いを持った挑戦者と共に走り、共に創る