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
AmplifyとReact/ReactNativeでマルチプラットフォームアプリを1ヶ月...
Search
Yu Miyachika
November 27, 2020
Technology
0
3.9k
AmplifyとReact/ReactNativeでマルチプラットフォームアプリを1ヶ月で作る
Yu Miyachika
November 27, 2020
Tweet
Share
Other Decks in Technology
See All in Technology
サンドボックス技術でAI利活用を促進する
koh_naga
0
200
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
140
Agile PBL at New Grads Trainings
kawaguti
PRO
1
410
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
630
Language Update: Java
skrb
2
290
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
120
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
150
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
810
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
890
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Done Done
chrislema
185
16k
Statistics for Hackers
jakevdp
799
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
RailsConf 2023
tenderlove
30
1.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
GitHub's CSS Performance
jonrohan
1032
460k
How STYLIGHT went responsive
nonsquared
100
5.8k
Fireside Chat
paigeccino
39
3.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
AmplifyとReact/ReactNative でマルチプラットフォームアプリ を1ヶ月で作る Amplify meetup #02 宮近 雄宇 / Yu
Miyachika 2020/11/27
宮近 雄宇 / Yu Miyachika • フロントエンドエンジニア • SIer4年 ->
フリーランス11年目 • iOSは4のころから • Reactはここ2年 • 好きなAWS Amplify, CodeBuild
お仕事について • お客様のDXのお手伝い • 3-4週でPoCをスクラム開発 • スプリント期間は1日
すなわち・・・
アジリティ 特化型 エンジニア
だから・・・
と相性が よかった
特にReactとの組み合わせが最高 ここ1年半、たくさんPoC開発やってきました
Amplifyの端的なメリット • 開幕15分でHTTPSのURLが払い出せる • 次の30分でAppSyncが立つ • 提供する価値に注力できる アジリティ重視のPoCにピッタリ!!
Amplifyの端的なデメリット • Cloud Formationの知識がないとツライ • カスタマイズしたいときはちょっと大変 • 更新頻度高すぎて「いつの間に…」事案
そろそろ本題。
少し前までのモバイル開発のつらみ • フロントエンド/バックエンド • 記述量に対して得られるアウトカムが低い • OSS無しでは非同期処理がつらい • UIのステート管理がつらい ⇨
とにかくDX(Developer Experience)が悪い
ソフトウェア開発は10年で大きく進化 • BaaS • クロスプラットフォーム • async / await •
宣言的UI
従来のモバイル開発環境もがんばってきた • Swift UI / Combine framework • Kotlin /
Coroutines ⇨ FacebookがReact NativeでWeb開発者をつれてきてし まった ⇨ GoogleがAndroid開発をFlutterで再定義してしまった (ついでにiOSも)
モバイル開発は クロスプラットフォーム+BaaSが台頭 React Native + AWS Amplify Flutter + Firebase
日本でも じわじわ人口増加中 日本ではあまり… 海外では結構多い?
引越し先をさがそう… 可否 / 興味 AWS Amplify Google Firebase React Native
◦ / ◎ ◦ / ◦ Flutter ✗(→△) / ✗ ◦ / △ React NativeならReactだしAmplifyあるし簡単っしょ 決定
コロナで完全リモート開始から数ヶ月たったある日… プロダクトオーナー S氏 社内でポッドキャスト始めたんだけど、 ちょっと視聴ストリーミングアプリ つくってほしいな〜? わたし 過去にSwiftでやっちゃってるから React Native+Amplifyの素振りしながらでも
いっすか? えー?いいよ
開発開始。
実はストリーミングアプリ、 得意分野だったのです • 無料音楽レーベルの公式アプリを 2010年に個人リリース • 2016年にSwiftで書き直して リニューアル ストリーミングアプリ =技術的お砂場の位置付け
開発開始から2日目… リスナーは ポッドキャストの 各回を選択して 視聴することができる AppSync DynamoDB S3 React Native
アプリ Amplify API Amplify Storage
開発開始から2日目… ちょっとデザイナーにも参加してもらって 真面目にプロダクトバックログ書くわ わたし 昔2週間、下手すると1ヶ月ぐらい かけてたことが2日…2日… デザイナー H氏 ウィッスー プロダクトオーナー
S氏
開発開始から2週間後… システムは、 ユーザーを認証・認 可できる (ログイン機能) 管理者は、エピソード を投稿・編集・削除で きる(管理画面) リスナーは、 もっとかっこいいア
プリをさわりたい (デザイン適用)
開発開始から2週間後… AppSync DynamoDB S3 React Native アプリ Amplify API Amplify
Storage React 管理画面 S3 CloudFront WAF Amplify Hosting Cognito Amplify Auth システムは、ユーザーを 認証・認可できる (ログイン機能) 管理者は、エピソードを投 稿・編集・削除できる(管理 画面) リスナーは、 もっとかっこいいアプリをさ わりたい (デザイン適用)
TIPS: マルチフロントエンドの魔法の言葉 $ amplify pull
開発開始から2週間後… よっしゃ運用周りもうちょい充実させたら 内部向けリリースするぞ わたし React Native、 レイアウトとルーティングが違うだけで あとReactと全部同じやん デザイナー H氏
ウィッスー プロダクトオーナー S氏
開発開始から1ヶ月後… リスナーはSlackの Botで新着エピソード の配信を知ることが できる リスナーはプッシュ通 知で新着エピソード の配信を知ることが できる あと色々
細かいところ…
開発開始から1ヶ月後… AppSync DynamoDB S3 React Native アプリ Amplify API Amplify
Storage React 管理画面 S3 CloudFront WAF Amplify Hosting Cognito Amplify Auth Lambda (Slack) Lambda (PUSH通知) CloudWatchEvent (定期実行) Amplify Function Slack FCM リスナーはSlackのBotで新着エピ ソードの配信を知ることができる リスナーはプッシュ通知で新着エ ピソードの配信を知ることができる ?
Amplify Push Notificationsにしたかった • Amplify Push Notificationsの実体はAWS Pinpoint • Firebase
Analytics + Firebase Cloud Messaging的存在 • AWS SNSと比べて、マーケティング寄り • 導通の確立に関するドキュメントが手薄い • トライして撃沈しました(当時は)
TIPS: APIとFunctionをつなぐ方法 クエリの定義 ディレクティブ Function名 LambdaResolverがこれだけで仕上がる DataSource,Resolver, Role, VTL…さよなら… 戻り値の型
なにはともあれ1ヶ月で完成。
React Native + Amplify、どうだったか • Reactで作ったhooksや通信部分を流用できる • Amplifyの文脈は全く一緒 • コード記述量の投資対効果抜群
• レイアウトとルーティングは違う • 各ネイティブの知識は必要なときもある
React / React Native + Amplifyで マルチフロントエンド開発やっていきましょう!
ご清聴ありがとうございました