$30 off During Our Annual Pro Sale. View Details »

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

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

tatsuaki watanabe

September 03, 2019
Tweet

More Decks by tatsuaki watanabe

Other Decks in Technology

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で一部分だけ出してあとはアプリに導
    線を」とかの場面でならちょうど良いかも!
    触ってみた感想1
    テロップメーカーWeb版

    View Slide

  29. ◉ WebpackがかなりExpoに隠蔽されてる
    ◉ webpack.config.jsをカスタマイズしていく感
    じでビルドがかなりシビアなので、Webpack
    がわからないと速攻で詰む
    ◉ Webは対応しているモジュールだけ
    触ってみた感想2
    まだまだ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