Tech-in awsでのre:Invent2021のre:cap登壇資料です。 https://techplay.jp/event/838745?pw=65IiXlag

1. 社外秘○○
AWS Amplify Studioが変える
フロントエンド開発の未来とは
KDDI アジャイル開発部 ソフトウェア2G 小板橋 由誉
2021年12 月13 日

2. 部署名記入欄
1
社外秘○○
Who am I ?
小板橋 由誉 / Yoshitaka Koitabashi
– アジャイル開発部 ソフトウェア技術2G
所属チーム
– AR/VRなどxR向けのコンテンツ管理システム（CMS）の開発
好きなAWSサービス
– AWS Support
(App Runnerも好き・・・)

3. 部署名記入欄
2
社外秘○○
 フロントエンド開発者に最小限のコーディングでフロント開発ができる
 Amplifyのバックエンド構成とそれらを管理する機能を統合した開発環境
 ちなみに、amplify admin uiとの違いは？？
 昨年のアップデートでamplify admin uiが発表されている
今回のAWS Amplify Studioは、これがかなり拡張された形
 ※適切にいうならば、amplify studioの中に、
amplify admin uiが統合されている感じ
AWS Amplify Studioとは

4. 部署名記入欄
3
社外秘○○
 新機能
 Figmaで作成されたデザインをReact UIコンポーネントの
コードに自動で変換してくれる
 生成されたコードも比較的に分かりやすく、読みやすい
 既存機能
 バックエンドを意識することなく、データ連携、管理ができる
何がやばいのか？

5. 部署名記入欄
4
社外秘○○
実際にやってみた

6. 部署名記入欄
5
社外秘○○
Amplify Studioの環境を作成

7. 部署名記入欄
6
社外秘○○
Amplify Studio
お!!!

8. 部署名記入欄
7
社外秘○○
Sync With Figma

9. 部署名記入欄
8
社外秘○○
Sampleのfigmaデザインを使用

10. 部署名記入欄
9
社外秘○○
上手くsyncできると

11. 部署名記入欄
10
社外秘○○
UIコンポーネントが取り込まれると

12. 部署名記入欄
11
社外秘○○
各コンポーネントの構成を確認
コンポーネントのプロパティを設定することができる

13. 部署名記入欄
12
社外秘○○
さてさて・・・
Figmaからimportした
UIコンポーネントに対してデータを
バインドしてみましょう

14. 部署名記入欄
13
社外秘○○
Amplify上でデータのモデルを作成

15. 部署名記入欄
14
社外秘○○
作ったデータモデルを一旦Deploy
しちゃいましょう。

16. 部署名記入欄
15
社外秘○○
データベースにサンプルデータをシードする

17. 部署名記入欄
16
社外秘○○
自動生成されたデータ

18. 部署名記入欄
17
社外秘○○
UIコンポーネントにデータをバインド

19. 部署名記入欄
18
社外秘○○
Reactアプリに上記で作成した
コンポーネントを落としましょう！
(amplify pullコマンドを実行)

20. 部署名記入欄
19
社外秘○○
amplify pullコマンド

21. 部署名記入欄
20
社外秘○○
出力されたreactコード

22. 部署名記入欄
21
社外秘○○
ふむふむ

23. 部署名記入欄
22
社外秘○○
出力されたreactコード(各コンポーネントの中身)
 propsにoverridesPropを渡して、それをそれぞれのelementに
食わせてますね。

24. 部署名記入欄
23
社外秘○○
出力したUIコンポーネントをアプリにimport

25. 部署名記入欄
24
社外秘○○
アプリを起動すると・・？

26. 部署名記入欄
25
社外秘○○
起動したreactアプリ

27. 部署名記入欄
26
社外秘○○
おおおおおおおおおおお

28. 部署名記入欄
27
社外秘○○
一旦落ち着いて、
コードに戻ります

29. 部署名記入欄
28
社外秘○○
出力されたmodels
 modelsというのも出力されていますね。
 なんだこれは・・・

30. 部署名記入欄
29
社外秘○○
 お、models配下のindex.jsに何やら面白いコードが出てますね
 @aws-amplify/datastoreから、initSchemaをimportしてますね
 次に、initSchemaに、const { Home } = initSchema(schema);
で生成されているスキーマを流し込んでいます
Models配下のindex.js

31. 部署名記入欄
30
社外秘○○
importしているschemaはどうなっている

32. 部署名記入欄
31
社外秘○○
おおすげえ、先程定義した
データセットのスキーマが
自動生成されてる。。

33. 部署名記入欄
32
社外秘○○
さ~らに、型定義ファイル
(index.d.ts)も生成されて
います。

34. 部署名記入欄
33
社外秘○○
型定義ファイル(index.d.ts)

35. 部署名記入欄
34
社外秘○○
Amplify Studioが変える
フロントエンド開発の未来

36. 部署名記入欄
35
社外秘○○
 Amplify Studioにより、ちょっとしたデザインのcomponentを
figmaで作りreactアプリにamplify pullしてくれば爆速で使える
 amplify admin uiが元々持っていたバックエンドを意識することなく、
データモデルやデータのシードをする機能と組み合わせられる
=> フロント開発者で簡単にサービスを作れる
Amplify Studioをまとめると

37. 部署名記入欄
36
社外秘○○
 今までは・・・
 デザイナーがデザインを作成
 それを基に開発者がUIに関わる確認事項や不確定要素について認識合わせ
 その後、開発者がUI実装
今までのフロントエンド開発

38. 部署名記入欄
37
社外秘○○
 これからは・・・
 figmaでデザインを作成
(webサービスとして提供されているので、リンクの共有で
誰でもデザインコンポーネントを追加/修正が可能)
 Amplify Studioでfigmaとsync
 デザイナーと開発者でI/F(データバインドのための)だけ決めればOK
 フロントエンド開発者は、バックエンドを意識することなく
(Baasのような世界)、データバインドと
生成されたreact Componentの組み立てに専念できる
これからのフロントエンド開発

39. 部署名記入欄
38
社外秘○○
 さらにその先・・・
 Amplify Studioを利用してのreact uiのcomponent生成までが簡単なの
で、デザイナーがreact uiのcomponent生成まで行い、
フロントエンド開発者にコードでデザインcomponentを共有
その先

40. 部署名記入欄
39
社外秘○○
開発プロセス全体の中でデザイナーと
開発者との距離が一気に縮まる！

41. 部署名記入欄
40
社外秘○○
 出力されるreact componentに型情報が付与されない。
まだ、TypeScriptサポートしていないかも
 Webフォント指定ができない
 Figmaの知識があること前提なので、Figmaを使える
デザイナーもしくは、Figmaを使える人を生み出さないといけない
 => GitHub上にissue tracker があるので、
気になる箇所があればイシューをあげてみても
https://github.com/aws-amplify/amplify-adminui
Amplify Studioの欠点(2021/12/13時点)

42. 部署名記入欄
41
社外秘○○
まとめ
 Amplify Studioは、激アツサービス
 これにより、フロントエンド開発の未来が
変わるのではないか