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
320
AWS Amplify Studioが変える フロントエンド開発の未来とは
yoshitaka KOITABASHI
February 17, 2023
Tweet
Share
More Decks by yoshitaka KOITABASHI
See All by yoshitaka KOITABASHI
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
23
4.6k
テクノロジーの革新: オンプレミスから クラウドへの転換とサーバレス技術の衝撃
yoshiitaka
1
41
Re:cap container Services
yoshiitaka
2
280
The_Frugal_Architectの観点から眺めるServerless.pdf
yoshiitaka
1
72
re:Inventに行くと何を得られ、なぜ人はラスベガスに行くのか
yoshiitaka
0
54
(2023/12/11時点)Momento 概要&最新情報
yoshiitaka
2
290
パブリックなAPIは、”すべて” Postman API Networkで公開してくれぇ
yoshiitaka
1
130
コンテナ支部recapをrecapしよう_気になったコンテナの周りのアップデートを紹介.pdf
yoshiitaka
1
700
AWS re:Invent 2023の期間中に出たコンテナアップデート集
yoshiitaka
4
520
Other Decks in Technology
See All in Technology
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
480
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
540
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
300
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
250
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
210
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
440
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.4k
Databricks における 『MLOps』
databricksjapan
2
170
Featured
See All Featured
How GitHub (no longer) Works
holman
304
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Scaling GitHub
holman
457
140k
In The Pink: A Labor of Love
frogandcode
138
21k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Agile that works and the tools we love
rasmusluckow
325
20k
Why Our Code Smells
bkeepers
PRO
331
56k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Unsuck your backbone
ammeep
663
57k
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 これにより、フロントエンド開発の未来が 変わるのではないか