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
450
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.5k
コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験
yoshiitaka
3
1.7k
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
23
5.4k
Re:cap container Services
yoshiitaka
2
440
The_Frugal_Architectの観点から眺めるServerless.pdf
yoshiitaka
1
120
re:Inventに行くと何を得られ、なぜ人はラスベガスに行くのか
yoshiitaka
0
95
コンテナ支部recapをrecapしよう_気になったコンテナの周りのアップデートを紹介.pdf
yoshiitaka
1
900
AWS re:Invent 2023の期間中に出たコンテナアップデート集
yoshiitaka
4
680
stripeを組み合わせたサーバレスアーキテクチャとシードのスタートアップ ビジネスをグロースするためにやったこと
yoshiitaka
3
330
Other Decks in Technology
See All in Technology
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
450
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
300
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
160
実は強い 非ViTな画像認識モデル
tattaka
1
1k
MIMEと文字コードの闇
hirachan
2
1.4k
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
390
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
550
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
75k
内製化を加速させるlaC活用術
nrinetcom
PRO
2
100
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
Windows の新しい管理者保護モード
murachiakira
0
190
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Automating Front-end Workflow
addyosmani
1368
200k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Docker and Python
trallard
44
3.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Side Projects
sachag
452
42k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Agile that works and the tools we love
rasmusluckow
328
21k
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 これにより、フロントエンド開発の未来が 変わるのではないか