JAWS-UG千葉支部と初心者支部のコラボLTイベント

1. AWS Amplify Studioが変える
フロントエンド開発の未来とは
小板橋 由誉
2022/1/14

2. Who am I ?
小板橋 由誉 / Yoshitaka Koitabashi
 KDDI株式会社 アジャイル開発部 ソフトウェア技術2G
所属チーム
 AR/VRなどxR向けの
コンテンツ管理システム（CMS）の開発
好きなAWSサービス
 AWS App Runner

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

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

5. 実際にやってみた

6. Amplify Studioの環境を作成

7. Amplify Studio
お!!!

8. Sync With Figma

9. Sampleのfigmaデザインを使用

10. 上手くsyncできると

11. UIコンポーネントが取り込まれると

12. 各コンポーネントの構成を確認
コンポーネントのプロパティを設定することができる

13. さてさて・・・
Figmaからimportした
UIコンポーネントに対してデータを
バインドしてみましょう

14. Amplify上でデータのモデルを作成

15. 作ったデータモデルを一旦Deploy
しちゃいましょう。

16. データベースにサンプルデータをシードする

17. 自動生成されたデータ

18. UIコンポーネントにデータをバインド

19. Reactアプリに上記で作成した
コンポーネントを落としましょう！
(amplify pullコマンドを実行)

20. amplify pullコマンド

21. 出力されたreactコード

22. ふむふむ

23. 出力されたreactコード(各コンポーネントの中身)
 propsにoverridesPropを渡して、
それをそれぞれのelementに食わせてますね。

24. 出力したUIコンポーネントをアプリにimport

25. アプリを起動すると・・？

26. 起動したreactアプリ

27. おおおおおおおおおおお

28. 一旦落ち着いて、
コードに戻ります

29. 出力されたmodels
 modelsというのも出力されていますね。
 なんだこれは・・・

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

31. importしているschemaはどうなっている

32. おおすげえ、先程定義した
データセットのスキーマが
自動生成されてる。。

33. さ~らに、型定義ファイル
(index.d.ts)も生成されています。

34. 型定義ファイル(index.d.ts)

35. Amplify Studioが変える
フロントエンド開発の未来

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

37. 今までのフロントエンド開発
 今までは・・・
デザイナーがデザインを作成
それを基に開発者がUIに関わる確認事項や不確定
要素について認識合わせ
その後、開発者がUI実装

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

39. その先
 さらにその先・・・
 Amplify Studioを利用してのreact uiの
component生成までが簡単なので、
デザイナーがreact uiのcomponent生成まで行い、
フロントエンド開発者にコードでデザインcomponentを共有

40. 開発プロセス全体の中でデザイナーと
開発者との距離が一気に縮まる！

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

42. まとめ
 Amplify Studioは、激アツサービス
 これにより、フロントエンド開発の未来が
変わるのではないか