AWS Amplify Studioが変える フロントエンド開発の未来とは

1. AWS Amplify Studioが変える フロントエンド開発の未来とは ⼩板橋 由誉 2022/1/14
2. Who am I ? ⼩板橋 由誉 / Yoshitaka Koitabashi u KDDI株式会社 アジャイル開発部 ソフトウェア技術2G 所属チーム u AR/VRなどxR向けの コンテンツ管理システム（CMS）の開発 好きなAWSサービス u AWS App Runner
3. AWS Amplify Studioとは u フロントエンド開発者に最⼩限のコーディングで フロント開発ができる u Amplifyのバックエンド構成とそれらを管理する機能を 統合した開発環境 u ちなみに、amplify admin uiとの違いは︖︖ u ⼀昨年のアップデートでamplify admin uiが発表されている 今回のAWS Amplify Studioは、これがかなり拡張された形 u ※適切にいうならば、amplify studioの中に、 amplify admin uiが統合されている感じ
4. 何がやばいのか︖ u 新機能 u Figmaで作成されたデザインをReact UIコンポーネントの コードに⾃動で変換してくれる u ⽣成されたコードも⽐較的に分かりやすく、読みやすい u 既存機能 u バックエンドを意識することなく、データ連携、管理ができる
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コード(各コンポーネントの中⾝) u propsにoverridesPropを渡して、 それをそれぞれのelementに⾷わせてますね。
24. 出⼒したUIコンポーネントをアプリにimport
25. アプリを起動すると・・︖
26. 起動したreactアプリ
27. おおおおおおおおおおお
28. ⼀旦落ち着いて、 コードに戻ります
29. 出⼒されたmodels u modelsというのも出⼒されていますね。 u なんだこれは・・・
30. Models配下のindex.js u お、models配下のindex.jsに何やら⾯⽩いコードが出てますね u @aws-amplify/datastoreから、 initSchemaをimportしてますね u 次に、initSchemaに、 const { Home } = initSchema(schema); で⽣成されているスキーマを流し込んでいます
31. importしているschemaはどうなっている
32. おおすげえ、先程定義した データセットのスキーマが ⾃動⽣成されてる。。
33. さ~らに、型定義ファイル (index.d.ts)も⽣成されています。
34. 型定義ファイル(index.d.ts)
35. Amplify Studioが変える フロントエンド開発の未来
36. Amplify Studioをまとめると u Amplify Studioにより、ちょっとしたデザインの componentをfigmaで作りreactアプリに amplify pullしてくれば爆速で使える u amplify admin uiが元々持っていたバックエンドを 意識することなく、データモデルやデータのシードをする機能と 組み合わせられる => フロント開発者で簡単にサービスを作れる
37. 今までのフロントエンド開発 u 今までは・・・ uデザイナーがデザインを作成 uそれを基に開発者がUIに関わる確認事項や不確定 要素について認識合わせ uその後、開発者がUI実装
38. これからのフロントエンド開発 u これからは・・・ u figmaでデザインを作成 (webサービスとして提供されているので、リンクの共有で 誰でもデザインコンポーネントを追加/修正が可能) u Amplify Studioでfigmaとsync u デザイナーと開発者でI/F(データバインドのための)だけ決めれば OK u フロントエンド開発者は、バックエンドを意識することなく (Baasのような世界)、データバインドと ⽣成されたreact Componentの組み⽴てに専念できる
39. その先 u さらにその先・・・ u Amplify Studioを利⽤してのreact uiの component⽣成までが簡単なので、 デザイナーがreact uiのcomponent⽣成まで⾏い、 フロントエンド開発者にコードでデザインcomponentを共有
40. 開発プロセス全体の中でデザイナーと 開発者との距離が⼀気に縮まる︕
41. Amplify Studioの⽋点(2021/12/13時点) u 出⼒されるreact componentに型情報が付与されない。 まだ、TypeScriptサポートしていないかも u Webフォント指定ができない u Figmaの知識があること前提なので、Figmaを使える デザイナーもしくは、Figmaを使える⼈を⽣み出さないといけない u => GitHub上にissue tracker があるので、 気になる箇所があればイシューをあげてみても https://github.com/aws-amplify/amplify-adminui
42. まとめ n Amplify Studioは、激アツサービス n これにより、フロントエンド開発の未来が 変わるのではないか