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 渡邊達明

2. ◉ 自己紹介と最近作っているもの ◉ Expoとは ◉ Firebaseはいいぞ ◉ Firebaseを使っての開発＆Web共通化 ◉ Expo

   のReact Native Webサポート ◉ 宣伝 目次

3. ◉ 渡邊 達明（わたなべ たつあき） ◉ Twitter,GitHub: @nabettu ◉ 富士通株式会社→面白法人カヤック→独立 ◉

   妻（代表）と二人で法人 ◉ ネイティブアプリ（React Native with Expo）& Webフロント （Nuxt.js,React.js）& Firebase周りが専門です 自己紹介

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

5. 作ってます

6. 最近作ってるもの

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

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

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

10. Expoとは

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

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

13. ◉ 足元が整った状態から開始できるので開発に専念できる ◦ ビルド、HotReload、実機確認、チーム共有などなど ◉ ライブラリが一通り揃っている＆Expoに対応したものも増えてき ている ◉ OS毎の差分をかなり吸収してくれる（Push通知などもOSを気に せず使える)

    ◉ 完全にJSだけで書ける とはいえ余りあるメリットもたくさん ロジック丸々再利用できる

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

15. Firebaseはいいぞ

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

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

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

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

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

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

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

23. tree src ├── actions　　共通 ├── assets ├── constants ├── native　　アプリ用

    ├── reducers ├── store └── web　　　Webサイト用

24. Expo の React Native Webサポート

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

    Expo v33からReact Native Webがはいった！

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

27. ◉ 簡単なネイティブ＆WebアプリをExpo でワ ンソースで作ってみました ◉ 画像をアップロードして、テロップ画像と文字 を合成して新しい画像を作ります ◉ iOS&Androidアプリ、Chromeで動きます！ （iOS

    Safariはダメでした笑） さっそく触ってみた！作ったやつデモ！ テロップメーカーWeb版

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

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

    Readyではないけど、 対応環境が絞れるとかならなんとか?今後に期待！ テロップメーカーWeb版

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

    ます！気になる人は私かチームメンバー‍♂に声かけて！ 宣伝！

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

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