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

by tatsuaki watanabe

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

作ってます

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Expoとは

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Firebaseはいいぞ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Expo の React Native Webサポート

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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