React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ React Native Tokyo 2019/09/03 ~

Transcript

1. React Nativeにおける
   ExpoとFirebaseの活用
   Webとの共通化
   ~ React Native Tokyo 2019/09/03 ~
   株式会社クリモ CTO 渡邊達明
   

   View Slide

2. ◉ 自己紹介と最近作っているもの
   ◉ Expoとは
   ◉ Firebaseはいいぞ
   ◉ Firebaseを使っての開発＆Web共通化
   ◉ Expo のReact Native Webサポート
   ◉ 宣伝
   目次
   

   View Slide

3. ◉ 渡邊 達明（わたなべ たつあき）
   ◉ Twitter,GitHub: @nabettu
   ◉ 富士通株式会社→面白法人カヤック→独立
   ◉ 妻（代表）と二人で法人
   ◉ ネイティブアプリ（React Native with Expo）& Webフロント
   （Nuxt.js,React.js）& Firebase周りが専門です
   自己紹介
   

   View Slide

4. ◉ 妻がママ向け・保育士向けのメディア運営
   ◉ 私が受託開発と、メディアの技術周り担当
   ◉ 空いた時間でWebサービス開発
   株式会社クリモ
   

   View Slide

5. 作ってます
   

   View Slide

6. 最近作ってるもの
   

   View Slide

7. SpoLive
   NTTコミュニケーションズ
   社内ベンチャー発
   リアルタイムスポーツ実況解説アプリ
   もうすぐ始まるラグビー
   ワールドカップ
   データ配信します！！！！
   

   View Slide

8. tabmemo
   タブで仕分けできるメモアプリ
   

   View Slide

9. 両方React Native with Expo製です！！！
   みなさんExpoご存じでしょうか？？？
   知らない方はcometsで「」ボタンをPUSH!
   

   View Slide

10. Expoとは
    

    View Slide

11. ◉ React Nativeを完全にJSだけで作れるOSSの開発・ビル
    ド環境
    ◉ Expo製アプリのビルドやPush通知サービス、OTAサー
    バーなどを運営しているスタートアップ
    とは
    爆速でReact Nativeアプリが作れる！
    

    View Slide

12. ◉ Expo対応のライブラリしか使えない
    ◉ →ネイティブコードと両立するようなことは無理（ネイティブSDKな
    ども使えない）
    ◉ その際はejectして、expo-kit入りのReact Nativeプロジェクトとし
    て開発を継続はできる
    便利な分デメリットもある
    

    View Slide

13. ◉ 足元が整った状態から開始できるので開発に専念できる
    ○ ビルド、HotReload、実機確認、チーム共有などなど
    ◉ ライブラリが一通り揃っている＆Expoに対応したものも増えてき
    ている
    ◉ OS毎の差分をかなり吸収してくれる（Push通知などもOSを気に
    せず使える)
    ◉ 完全にJSだけで書ける
    とはいえ余りあるメリットもたくさん
    ロジック丸々再利用できる
    

    View Slide

14. ◉ React Native Expoのアプリと別でReact.jsで作っている
    管理画面があり、ラグビーのプレイ結果等入力したもの
    を、アプリで表示する流れ
    ◉ 点数計算ロジックをまるごと再利用しています
    SpoLiveでの活用事例
    共通化＆スイッチングコストが低くて楽！
    

    View Slide

15. Firebaseはいいぞ
    

    View Slide

16. ◉ SpoLiveでもtabmemoでも利用しているBaaS
    ◉ Firebaseは機能がたくさんあるので説明は省きます
    ◉ メリットは色々ありますが、特に認証の手軽さや
    リアルタイムデータの利用の実装が超楽です
    Firebaseはいいぞ
    WebSocketサーバーなどを用意する必要がなく、同時接続
    100万ユーザーとかに自動でスケールできてすごいぞ！
    

    View Slide

17. ◉ ラグビーのプレイデータを管理画面で入力
    →アプリで自動的にリアルタイムに反映＆表示
    ◉ 自分でサーバーとか何も用意することなくできる
    ◉ クライアント側はコードでonSnapshotって書くだけ
    SpoLiveでの活用事例
    JSのSDKを通して少し書くだけで動くので楽！
    

    View Slide

18. Firebaseを使っての開発
    ＆Web共通化
    

    View Slide

19. ◉ Expoで完全JavaScript書くだけでアプリ開発ができる
    ◉ WebでもJavaScriptで開発してる(React.js)
    ◉ 両方一緒のFirebaseのJavaScript SDKを使う
    今までのおさらい
    これってかなりの部分を
    Webとアプリで共通化できるのでは
    

    View Slide

20. ◉ React Native アプリExpoを使ってまず開発
    ◉ 次にWebでのアプリをReact.jsで開発して・・・
    tabmemoでの活用事例
    Firebaseへのデータアクセス周りと
    Reduxでのデータ管理周りを共通化してみました
    

    View Slide

21. Fluxでいうとこの
    ここらへんがWebもアプリも一緒のコードで動いています
    

    View Slide

22. ◉ Reduxでのデータ管理周り
    ◉ Firebaseでのアカウント作成・ログイン
    ◉ Firebaseへのデータ保存・同期周り
    アプリとWebで全く同じJSで動作
    tabmemoでの共通化
    

    View Slide

23. tree
    src
    ├── actions　　共通
    ├── assets
    ├── constants
    ├── native　　アプリ用
    ├── reducers
    ├── store
    └── web　　　Webサイト用
    

    View Slide

24. Expo の
    React Native Webサポート
    

    View Slide

25. ◉ Expo公式がβサポート
    ◉ React Nativeで書いているコードをWeb用にBuild
    ○ →大体そのままブラウザで動く！やばい！
    ◉ tabmemoでReduxとかのコードの共通化！とかなんとか言って
    たけど。。。
    Expo v33からReact Native Webがはいった！
    

    View Slide

26. さっきのFluxでいうと・・・とか関係なしで
    全部いけるじゃん（※ちゃんと動くなら）
    

    View Slide

27. ◉ 簡単なネイティブ＆WebアプリをExpo でワ
    ンソースで作ってみました
    ◉ 画像をアップロードして、テロップ画像と文字
    を合成して新しい画像を作ります
    ◉ iOS&Androidアプリ、Chromeで動きます！
    （iOS Safariはダメでした笑）
    さっそく触ってみた！作ったやつデモ！
    テロップメーカーWeb版
    

    View Slide

28. ◉ まだβ版なのでコンシューマ向けのアプリ
    ケーションとして出すには心もとないけどリ
    ソースが足りない現場ならあり？
    ◉ 「Webで一部分だけ出してあとはアプリに導
    線を」とかの場面でならちょうど良いかも！
    触ってみた感想１
    テロップメーカーWeb版
    

    View Slide

29. ◉ WebpackがかなりExpoに隠蔽されてる
    ◉ webpack.config.jsをカスタマイズしていく感
    じでビルドがかなりシビアなので、Webpack
    がわからないと速攻で詰む
    ◉ Webは対応しているモジュールだけ
    触ってみた感想２
    まだまだProduction Readyではないけど、
    対応環境が絞れるとかならなんとか?今後に期待！
    テロップメーカーWeb版
    

    View Slide

30. ◉ 技術書典(9/22)でこのアプリを、サンプルとしてもうちょっといじっ
    てからExpoでのReact Native Web周りをまとめた技術同人誌を
    書くので買いに来て！
    ◉ SpoLiveでFirebase×React Native書きたいマン（特にまだ
    TypeScriptとHooksを導入途中なのでその辺り特に）募集してい
    ます！気になる人は私かチームメンバー‍♂に声かけて！
    宣伝！
    

    View Slide

31. 質問あればTwitterでも
    https://twitter.com/nabettu
    cometsでもどうぞ→
    Thanks!
    

    View Slide

32. cometsについて
    こちらの発表は、専用サイトに
    コメントするとコメントが
    発表者のスライドに表示されます。
    https://comets.nabettu.com/?id=RNTokyo
    ちなみにFirebaseとNetlifyで動いています。
    

    View Slide