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
470
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
23
5.8k
コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験
yoshiitaka
3
1.9k
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
23
5.5k
Re:cap container Services
yoshiitaka
2
490
The_Frugal_Architectの観点から眺めるServerless.pdf
yoshiitaka
1
140
re:Inventに行くと何を得られ、なぜ人はラスベガスに行くのか
yoshiitaka
0
120
コンテナ支部recapをrecapしよう_気になったコンテナの周りのアップデートを紹介.pdf
yoshiitaka
1
950
AWS re:Invent 2023の期間中に出たコンテナアップデート集
yoshiitaka
4
740
stripeを組み合わせたサーバレスアーキテクチャとシードのスタートアップ ビジネスをグロースするためにやったこと
yoshiitaka
3
410
Other Decks in Technology
See All in Technology
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
400
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
390
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
5
2.1k
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
160
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
290
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
250
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
160
Wasmで社内ツールを作って配布しよう
askua
0
180
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
720
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
330
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
2
210
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
530
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Practical Orchestrator
shlominoach
190
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
RailsConf 2023
tenderlove
30
1.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How to train your dragon (web standard)
notwaldorf
96
6.1k
GitHub's CSS Performance
jonrohan
1031
460k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
400
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 これにより、フロントエンド開発の未来が 変わるのではないか