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.9k
コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験
yoshiitaka
3
1.9k
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
23
5.5k
Re:cap container Services
yoshiitaka
2
500
The_Frugal_Architectの観点から眺めるServerless.pdf
yoshiitaka
1
140
re:Inventに行くと何を得られ、なぜ人はラスベガスに行くのか
yoshiitaka
0
120
コンテナ支部recapをrecapしよう_気になったコンテナの周りのアップデートを紹介.pdf
yoshiitaka
1
960
AWS re:Invent 2023の期間中に出たコンテナアップデート集
yoshiitaka
4
750
stripeを組み合わせたサーバレスアーキテクチャとシードのスタートアップ ビジネスをグロースするためにやったこと
yoshiitaka
3
420
Other Decks in Technology
See All in Technology
信頼できる開発プラットフォームをどう作るか?-Governance as Codeと継続的監視/フィードバックが導くPlatform Engineeringの進め方
yuriemori
1
360
広島発!スタートアップ開発の裏側
tsankyo
0
140
人を動かすことについて考える
ichimichi
2
240
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
oracle4engineer
PRO
1
260
ECS モニタリング手法大整理
yendoooo
1
110
20250807 Applied Engineer Open House
sakana_ai
PRO
2
680
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
2
1.1k
JOAI発表資料 @ 関東kaggler会
joai_committee
1
180
いま、あらためて考えてみるアカウント管理 with IaC / Account management with IaC
kohbis
2
580
生成AIによるデータサイエンスの変革
taka_aki
0
3.1k
夢の印税生活 / Life on Royalties
tmtms
0
260
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを愛するようになったか(改)
nullpo_head
7
2.8k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
A better future with KSS
kneath
239
17k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
RailsConf 2023
tenderlove
30
1.2k
Agile that works and the tools we love
rasmusluckow
329
21k
The Cult of Friendly URLs
andyhume
79
6.5k
Producing Creativity
orderedlist
PRO
347
40k
Scaling GitHub
holman
462
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Music & Morning Musume
bryan
46
6.7k
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 これにより、フロントエンド開発の未来が 変わるのではないか