Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

実際にやってみた

Slide 6

Slide 6 text

Amplify Studioの環境を作成

Slide 7

Slide 7 text

Amplify Studio お!!!

Slide 8

Slide 8 text

Sync With Figma

Slide 9

Slide 9 text

Sampleのfigmaデザインを使⽤

Slide 10

Slide 10 text

上⼿くsyncできると

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

⾃動⽣成されたデータ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

amplify pullコマンド

Slide 21

Slide 21 text

出⼒されたreactコード

Slide 22

Slide 22 text

ふむふむ

Slide 23

Slide 23 text

出⼒されたreactコード(各コンポーネントの中⾝) u propsにoverridesPropを渡して、 それをそれぞれのelementに⾷わせてますね。

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

アプリを起動すると・・︖

Slide 26

Slide 26 text

起動したreactアプリ

Slide 27

Slide 27 text

おおおおおおおおおおお

Slide 28

Slide 28 text

⼀旦落ち着いて、 コードに戻ります

Slide 29

Slide 29 text

出⼒されたmodels u modelsというのも出⼒されていますね。 u なんだこれは・・・

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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