Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AWS Amplify Studioが変える フロントエンド開発の未来とは
Search
yoshitaka KOITABASHI
February 17, 2023
Technology
0
460
AWS Amplify Studioが変える フロントエンド開発の未来とは
yoshitaka KOITABASHI
February 17, 2023
Tweet
Share
More Decks by yoshitaka KOITABASHI
See All by yoshitaka KOITABASHI
変化と挑戦:NoSQLとNewSQL Serverless Databaseの技術革新とマルチテナンシーの秘密
yoshiitaka
22
5.7k
コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験
yoshiitaka
3
1.8k
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
23
5.5k
Re:cap container Services
yoshiitaka
2
470
The_Frugal_Architectの観点から眺めるServerless.pdf
yoshiitaka
1
130
re:Inventに行くと何を得られ、なぜ人はラスベガスに行くのか
yoshiitaka
0
110
コンテナ支部recapをrecapしよう_気になったコンテナの周りのアップデートを紹介.pdf
yoshiitaka
1
930
AWS re:Invent 2023の期間中に出たコンテナアップデート集
yoshiitaka
4
710
stripeを組み合わせたサーバレスアーキテクチャとシードのスタートアップ ビジネスをグロースするためにやったこと
yoshiitaka
3
380
Other Decks in Technology
See All in Technology
君だけのオリジナル async / await を作ろう / TSKaigi 2025
susisu
17
12k
人とAIとの共創を夢見た2か月 #共創AIミートアップ / Co-Creation with Keito-chan
kondoyuko
0
420
HA K8s Clusterのスタンダードが覆る!? Cilium 1.18の🔥激アツ🔥新機能
logica0419
0
120
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3k
Cloud Run を解剖して コンテナ監視を考える / Breaking Down Cloud Run to Rethink Container Monitoring
aoto
PRO
0
110
主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義
tiroljpn
1
220
Streamline Cloud-Native App Development Using CDEs
saeedzf
0
470
マップを速く表示するために
tsuboyan5
0
170
グループ ポリシー再確認 ③
murachiakira
0
140
Postman AI エージェントビルダー最新情報
nagix
0
110
継続戦闘能⼒
sansantech
PRO
0
180
Project Referencesを活用した実行環境ごとのtsconfig最適化
itatchi3
1
220
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
180
53k
Statistics for Hackers
jakevdp
799
220k
KATA
mclloyd
29
14k
Building an army of robots
kneath
306
45k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Fireside Chat
paigeccino
37
3.5k
Writing Fast Ruby
sferik
628
61k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Unsuck your backbone
ammeep
671
58k
Docker and Python
trallard
44
3.4k
Transcript
AWS Amplify Studioが変える フロントエンド開発の未来とは ⼩板橋 由誉 2022/1/14
Who am I ? ⼩板橋 由誉 / Yoshitaka Koitabashi u
KDDI株式会社 アジャイル開発部 ソフトウェア技術2G 所属チーム u AR/VRなどxR向けの コンテンツ管理システム(CMS)の開発 好きなAWSサービス u AWS App Runner
AWS Amplify Studioとは u フロントエンド開発者に最⼩限のコーディングで フロント開発ができる u Amplifyのバックエンド構成とそれらを管理する機能を 統合した開発環境 u
ちなみに、amplify admin uiとの違いは︖︖ u ⼀昨年のアップデートでamplify admin uiが発表されている 今回のAWS Amplify Studioは、これがかなり拡張された形 u ※適切にいうならば、amplify studioの中に、 amplify admin uiが統合されている感じ
何がやばいのか︖ u 新機能 u Figmaで作成されたデザインをReact UIコンポーネントの コードに⾃動で変換してくれる u ⽣成されたコードも⽐較的に分かりやすく、読みやすい u
既存機能 u バックエンドを意識することなく、データ連携、管理ができる
実際にやってみた
Amplify Studioの環境を作成
Amplify Studio お!!!
Sync With Figma
Sampleのfigmaデザインを使⽤
上⼿くsyncできると
UIコンポーネントが取り込まれると
各コンポーネントの構成を確認 コンポーネントのプロパティを設定することができる
さてさて・・・ Figmaからimportした UIコンポーネントに対してデータを バインドしてみましょう
Amplify上でデータのモデルを作成
作ったデータモデルを⼀旦Deploy しちゃいましょう。
データベースにサンプルデータをシードする
⾃動⽣成されたデータ
UIコンポーネントにデータをバインド
Reactアプリに上記で作成した コンポーネントを落としましょう︕ (amplify pullコマンドを実⾏)
amplify pullコマンド
出⼒されたreactコード
ふむふむ
出⼒されたreactコード(各コンポーネントの中⾝) u propsにoverridesPropを渡して、 それをそれぞれのelementに⾷わせてますね。
出⼒したUIコンポーネントをアプリにimport
アプリを起動すると・・︖
起動したreactアプリ
おおおおおおおおおおお
⼀旦落ち着いて、 コードに戻ります
出⼒されたmodels u modelsというのも出⼒されていますね。 u なんだこれは・・・
Models配下のindex.js u お、models配下のindex.jsに何やら⾯⽩いコードが出てますね u @aws-amplify/datastoreから、 initSchemaをimportしてますね u 次に、initSchemaに、 const {
Home } = initSchema(schema); で⽣成されているスキーマを流し込んでいます
importしているschemaはどうなっている
おおすげえ、先程定義した データセットのスキーマが ⾃動⽣成されてる。。
さ~らに、型定義ファイル (index.d.ts)も⽣成されています。
型定義ファイル(index.d.ts)
Amplify Studioが変える フロントエンド開発の未来
Amplify Studioをまとめると u Amplify Studioにより、ちょっとしたデザインの componentをfigmaで作りreactアプリに amplify pullしてくれば爆速で使える u amplify
admin uiが元々持っていたバックエンドを 意識することなく、データモデルやデータのシードをする機能と 組み合わせられる => フロント開発者で簡単にサービスを作れる
今までのフロントエンド開発 u 今までは・・・ uデザイナーがデザインを作成 uそれを基に開発者がUIに関わる確認事項や不確定 要素について認識合わせ uその後、開発者がUI実装
これからのフロントエンド開発 u これからは・・・ u figmaでデザインを作成 (webサービスとして提供されているので、リンクの共有で 誰でもデザインコンポーネントを追加/修正が可能) u Amplify Studioでfigmaとsync
u デザイナーと開発者でI/F(データバインドのための)だけ決めれば OK u フロントエンド開発者は、バックエンドを意識することなく (Baasのような世界)、データバインドと ⽣成されたreact Componentの組み⽴てに専念できる
その先 u さらにその先・・・ u Amplify Studioを利⽤してのreact uiの component⽣成までが簡単なので、 デザイナーがreact uiのcomponent⽣成まで⾏い、
フロントエンド開発者にコードでデザインcomponentを共有
開発プロセス全体の中でデザイナーと 開発者との距離が⼀気に縮まる︕
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
まとめ n Amplify Studioは、激アツサービス n これにより、フロントエンド開発の未来が 変わるのではないか