AmplifyとReact/ReactNativeでマルチプラットフォームアプリを1ヶ月で作る

Transcript

1. AmplifyとReact/ReactNative
   でマルチプラットフォームアプリ
   を1ヶ月で作る
   Amplify meetup #02
   宮近 雄宇 / Yu Miyachika
   2020/11/27
   

   View Slide

2. 宮近 雄宇 / Yu Miyachika
   ● フロントエンドエンジニア
   ● SIer4年 -> フリーランス11年目
   ● iOSは4のころから
   ● Reactはここ2年
   ● 好きなAWS
   Amplify, CodeBuild
   

   View Slide

3. お仕事について
   ● お客様のDXのお手伝い
   ● 3-4週でPoCをスクラム開発
   ● スプリント期間は1日
   

   View Slide

4. すなわち・・・
   

   View Slide

5. アジリティ
   特化型
   エンジニア
   

   View Slide

6. だから・・・
   

   View Slide

7. と相性が
   よかった
   

   View Slide

8. 特にReactとの組み合わせが最高
   ここ1年半、たくさんPoC開発やってきました
   

   View Slide

9. Amplifyの端的なメリット
   ● 開幕15分でHTTPSのURLが払い出せる
   ● 次の30分でAppSyncが立つ
   ● 提供する価値に注力できる
   アジリティ重視のPoCにピッタリ！！
   

   View Slide

10. Amplifyの端的なデメリット
    ● Cloud Formationの知識がないとツライ
    ● カスタマイズしたいときはちょっと大変
    ● 更新頻度高すぎて「いつの間に…」事案
    

    View Slide

11. そろそろ本題。
    

    View Slide

12. 少し前までのモバイル開発のつらみ
    ● フロントエンド/バックエンド
    ● 記述量に対して得られるアウトカムが低い
    ● OSS無しでは非同期処理がつらい
    ● UIのステート管理がつらい
    ⇨ とにかくDX(Developer Experience)が悪い
    

    View Slide

13. ソフトウェア開発は10年で大きく進化
    ● BaaS
    ● クロスプラットフォーム
    ● async / await
    ● 宣言的UI
    

    View Slide

14. 従来のモバイル開発環境もがんばってきた
    ● Swift UI / Combine framework
    ● Kotlin / Coroutines
    ⇨ FacebookがReact NativeでWeb開発者をつれてきてし
    まった
    ⇨ GoogleがAndroid開発をFlutterで再定義してしまった
    （ついでにiOSも）
    

    View Slide

15. モバイル開発は
    クロスプラットフォーム+BaaSが台頭
    React Native + AWS Amplify
    Flutter + Firebase
    日本でも
    じわじわ人口増加中
    日本ではあまり…
    海外では結構多い？
    

    View Slide

16. 引越し先をさがそう…
    可否 / 興味 AWS Amplify Google Firebase
    React Native ○ / ◎ ○ / ○
    Flutter ✗(→△) / ✗ ○ / △
    React NativeならReactだしAmplifyあるし簡単っしょ
    決定
    

    View Slide

17. コロナで完全リモート開始から数ヶ月たったある日…
    プロダクトオーナー
    S氏
    社内でポッドキャスト始めたんだけど、
    ちょっと視聴ストリーミングアプリ
    つくってほしいな〜？
    わたし
    過去にSwiftでやっちゃってるから
    React Native+Amplifyの素振りしながらでも
    いっすか？
    えー？いいよ
    

    View Slide

18. 開発開始。
    

    View Slide

19. 実はストリーミングアプリ、
    得意分野だったのです
    ● 無料音楽レーベルの公式アプリを
    2010年に個人リリース
    ● 2016年にSwiftで書き直して
    リニューアル
    ストリーミングアプリ
    ＝技術的お砂場の位置付け
    

    View Slide

20. 開発開始から2日目…
    リスナーは
    ポッドキャストの
    各回を選択して
    視聴することができる
    AppSync DynamoDB
    S3
    React Native
    アプリ
    Amplify API
    Amplify Storage
    

    View Slide

21. 開発開始から2日目…
    ちょっとデザイナーにも参加してもらって
    真面目にプロダクトバックログ書くわ
    わたし
    昔2週間、下手すると1ヶ月ぐらい
    かけてたことが2日…2日…
    デザイナー
    H氏
    ウィッスー
    プロダクトオーナー
    S氏
    

    View Slide

22. 開発開始から2週間後…
    システムは、
    ユーザーを認証・認
    可できる
    （ログイン機能）
    管理者は、エピソード
    を投稿・編集・削除で
    きる（管理画面）
    リスナーは、
    もっとかっこいいア
    プリをさわりたい
    （デザイン適用）
    

    View Slide

23. 開発開始から2週間後…
    AppSync DynamoDB
    S3
    React Native
    アプリ
    Amplify API
    Amplify Storage
    React
    管理画面
    S3
    CloudFront
    WAF
    Amplify Hosting
    Cognito
    Amplify Auth
    システムは、ユーザーを
    認証・認可できる
    （ログイン機能）
    管理者は、エピソードを投
    稿・編集・削除できる（管理
    画面）
    リスナーは、
    もっとかっこいいアプリをさ
    わりたい
    （デザイン適用）
    

    View Slide

24. TIPS: マルチフロントエンドの魔法の言葉
    $ amplify pull
    

    View Slide

25. 開発開始から2週間後…
    よっしゃ運用周りもうちょい充実させたら
    内部向けリリースするぞ
    わたし
    React Native、
    レイアウトとルーティングが違うだけで
    あとReactと全部同じやん
    デザイナー
    H氏
    ウィッスー
    プロダクトオーナー
    S氏
    

    View Slide

26. 開発開始から1ヶ月後…
    リスナーはSlackの
    Botで新着エピソード
    の配信を知ることが
    できる
    リスナーはプッシュ通
    知で新着エピソード
    の配信を知ることが
    できる
    あと色々
    細かいところ…
    

    View Slide

27. 開発開始から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で新着エピ
    ソードの配信を知ることができる
    リスナーはプッシュ通知で新着エ
    ピソードの配信を知ることができる
    ？
    

    View Slide

28. Amplify Push Notificationsにしたかった
    ● Amplify Push Notificationsの実体はAWS Pinpoint
    ● Firebase Analytics ＋ Firebase Cloud Messaging的存在
    ● AWS SNSと比べて、マーケティング寄り
    ● 導通の確立に関するドキュメントが手薄い
    ● トライして撃沈しました（当時は）
    

    View Slide

29. TIPS: APIとFunctionをつなぐ方法
    クエリの定義 ディレクティブ Function名
    LambdaResolverがこれだけで仕上がる
    DataSource,Resolver, Role, VTL…さよなら…
    戻り値の型
    

    View Slide

30. なにはともあれ1ヶ月で完成。
    

    View Slide

31. React Native + Amplify、どうだったか
    ● Reactで作ったhooksや通信部分を流用できる
    ● Amplifyの文脈は全く一緒
    ● コード記述量の投資対効果抜群
    ● レイアウトとルーティングは違う
    ● 各ネイティブの知識は必要なときもある
    

    View Slide

32. React / React Native + Amplifyで
    マルチフロントエンド開発やっていきましょう！
    

    View Slide

33. ご清聴ありがとうございました
    

    View Slide