Slide 1
Slide 1 text
AmplifyとReact/ReactNative
でマルチプラットフォームアプリ
を1ヶ月で作る
Amplify meetup #02
宮近 雄宇 / Yu Miyachika
2020/11/27
Slide 2
Slide 2 text
宮近 雄宇 / Yu Miyachika
● フロントエンドエンジニア
● SIer4年 -> フリーランス11年目
● iOSは4のころから
● Reactはここ2年
● 好きなAWS
Amplify, CodeBuild
Slide 3
Slide 3 text
お仕事について
● お客様のDXのお手伝い
● 3-4週でPoCをスクラム開発
● スプリント期間は1日
Slide 4
Slide 4 text
すなわち・・・
Slide 5
Slide 5 text
アジリティ
特化型
エンジニア
Slide 6
Slide 6 text
だから・・・
Slide 7
Slide 7 text
と相性が
よかった
Slide 8
Slide 8 text
特にReactとの組み合わせが最高
ここ1年半、たくさんPoC開発やってきました
Slide 9
Slide 9 text
Amplifyの端的なメリット
● 開幕15分でHTTPSのURLが払い出せる
● 次の30分でAppSyncが立つ
● 提供する価値に注力できる
アジリティ重視のPoCにピッタリ！！
Slide 10
Slide 10 text
Amplifyの端的なデメリット
● Cloud Formationの知識がないとツライ
● カスタマイズしたいときはちょっと大変
● 更新頻度高すぎて「いつの間に…」事案
Slide 11
Slide 11 text
そろそろ本題。
Slide 12
Slide 12 text
少し前までのモバイル開発のつらみ
● フロントエンド/バックエンド
● 記述量に対して得られるアウトカムが低い
● OSS無しでは非同期処理がつらい
● UIのステート管理がつらい
⇨ とにかくDX(Developer Experience)が悪い
Slide 13
Slide 13 text
ソフトウェア開発は10年で大きく進化
● BaaS
● クロスプラットフォーム
● async / await
● 宣言的UI
Slide 14
Slide 14 text
従来のモバイル開発環境もがんばってきた
● Swift UI / Combine framework
● Kotlin / Coroutines
⇨ FacebookがReact NativeでWeb開発者をつれてきてし
まった
⇨ GoogleがAndroid開発をFlutterで再定義してしまった
（ついでにiOSも）
Slide 15
Slide 15 text
モバイル開発は
クロスプラットフォーム+BaaSが台頭
React Native + AWS Amplify
Flutter + Firebase
日本でも
じわじわ人口増加中
日本ではあまり…
海外では結構多い？
Slide 16
Slide 16 text
引越し先をさがそう…
可否 / 興味 AWS Amplify Google Firebase
React Native ○ / ◎ ○ / ○
Flutter ✗(→△) / ✗ ○ / △
React NativeならReactだしAmplifyあるし簡単っしょ
決定
Slide 17
Slide 17 text
コロナで完全リモート開始から数ヶ月たったある日…
プロダクトオーナー
S氏
社内でポッドキャスト始めたんだけど、
ちょっと視聴ストリーミングアプリ
つくってほしいな〜？
わたし
過去にSwiftでやっちゃってるから
React Native+Amplifyの素振りしながらでも
いっすか？
えー？いいよ
Slide 18
Slide 18 text
開発開始。
Slide 19
Slide 19 text
実はストリーミングアプリ、
得意分野だったのです
● 無料音楽レーベルの公式アプリを
2010年に個人リリース
● 2016年にSwiftで書き直して
リニューアル
ストリーミングアプリ
＝技術的お砂場の位置付け
Slide 20
Slide 20 text
開発開始から2日目…
リスナーは
ポッドキャストの
各回を選択して
視聴することができる
AppSync DynamoDB
S3
React Native
アプリ
Amplify API
Amplify Storage
Slide 21
Slide 21 text
開発開始から2日目…
ちょっとデザイナーにも参加してもらって
真面目にプロダクトバックログ書くわ
わたし
昔2週間、下手すると1ヶ月ぐらい
かけてたことが2日…2日…
デザイナー
H氏
ウィッスー
プロダクトオーナー
S氏
Slide 22
Slide 22 text
開発開始から2週間後…
システムは、
ユーザーを認証・認
可できる
（ログイン機能）
管理者は、エピソード
を投稿・編集・削除で
きる（管理画面）
リスナーは、
もっとかっこいいア
プリをさわりたい
（デザイン適用）
Slide 23
Slide 23 text
開発開始から2週間後…
AppSync DynamoDB
S3
React Native
アプリ
Amplify API
Amplify Storage
React
管理画面
S3
CloudFront
WAF
Amplify Hosting
Cognito
Amplify Auth
システムは、ユーザーを
認証・認可できる
（ログイン機能）
管理者は、エピソードを投
稿・編集・削除できる（管理
画面）
リスナーは、
もっとかっこいいアプリをさ
わりたい
（デザイン適用）
Slide 24
Slide 24 text
TIPS: マルチフロントエンドの魔法の言葉
$ amplify pull
Slide 25
Slide 25 text
開発開始から2週間後…
よっしゃ運用周りもうちょい充実させたら
内部向けリリースするぞ
わたし
React Native、
レイアウトとルーティングが違うだけで
あとReactと全部同じやん
デザイナー
H氏
ウィッスー
プロダクトオーナー
S氏
Slide 26
Slide 26 text
開発開始から1ヶ月後…
リスナーはSlackの
Botで新着エピソード
の配信を知ることが
できる
リスナーはプッシュ通
知で新着エピソード
の配信を知ることが
できる
あと色々
細かいところ…
Slide 27
Slide 27 text
開発開始から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で新着エピ
ソードの配信を知ることができる
リスナーはプッシュ通知で新着エ
ピソードの配信を知ることができる
？
Slide 28
Slide 28 text
Amplify Push Notificationsにしたかった
● Amplify Push Notificationsの実体はAWS Pinpoint
● Firebase Analytics ＋ Firebase Cloud Messaging的存在
● AWS SNSと比べて、マーケティング寄り
● 導通の確立に関するドキュメントが手薄い
● トライして撃沈しました（当時は）
Slide 29
Slide 29 text
TIPS: APIとFunctionをつなぐ方法
クエリの定義 ディレクティブ Function名
LambdaResolverがこれだけで仕上がる
DataSource,Resolver, Role, VTL…さよなら…
戻り値の型
Slide 30
Slide 30 text
なにはともあれ1ヶ月で完成。
Slide 31
Slide 31 text
React Native + Amplify、どうだったか
● Reactで作ったhooksや通信部分を流用できる
● Amplifyの文脈は全く一緒
● コード記述量の投資対効果抜群
● レイアウトとルーティングは違う
● 各ネイティブの知識は必要なときもある
Slide 32
Slide 32 text
React / React Native + Amplifyで
マルチフロントエンド開発やっていきましょう！
Slide 33
Slide 33 text
ご清聴ありがとうございました