React NativeにおけるExpoとFirebaseの活用Webとの共通化~ React Native Tokyo 2019/09/03 ~株式会社クリモ CTO 渡邊達明
View Slide
◉ 自己紹介と最近作っているもの◉ Expoとは◉ Firebaseはいいぞ◉ Firebaseを使っての開発&Web共通化◉ Expo のReact Native Webサポート◉ 宣伝目次
◉ 渡邊 達明(わたなべ たつあき)◉ Twitter,GitHub: @nabettu◉ 富士通株式会社→面白法人カヤック→独立◉ 妻(代表)と二人で法人◉ ネイティブアプリ(React Native with Expo)& Webフロント(Nuxt.js,React.js)& Firebase周りが専門です自己紹介
◉ 妻がママ向け・保育士向けのメディア運営◉ 私が受託開発と、メディアの技術周り担当◉ 空いた時間でWebサービス開発株式会社クリモ
作ってます
最近作ってるもの
SpoLiveNTTコミュニケーションズ社内ベンチャー発リアルタイムスポーツ実況解説アプリもうすぐ始まるラグビーワールドカップデータ配信します!!!!
tabmemoタブで仕分けできるメモアプリ
両方React Native with Expo製です!!!みなさんExpoご存じでしょうか???知らない方はcometsで「」ボタンをPUSH!
Expoとは
◉ React Nativeを完全にJSだけで作れるOSSの開発・ビルド環境◉ Expo製アプリのビルドやPush通知サービス、OTAサーバーなどを運営しているスタートアップとは爆速でReact Nativeアプリが作れる!
◉ Expo対応のライブラリしか使えない◉ →ネイティブコードと両立するようなことは無理(ネイティブSDKなども使えない)◉ その際はejectして、expo-kit入りのReact Nativeプロジェクトとして開発を継続はできる便利な分デメリットもある
◉ 足元が整った状態から開始できるので開発に専念できる○ ビルド、HotReload、実機確認、チーム共有などなど◉ ライブラリが一通り揃っている&Expoに対応したものも増えてきている◉ OS毎の差分をかなり吸収してくれる(Push通知などもOSを気にせず使える)◉ 完全にJSだけで書けるとはいえ余りあるメリットもたくさんロジック丸々再利用できる
◉ React Native Expoのアプリと別でReact.jsで作っている管理画面があり、ラグビーのプレイ結果等入力したものを、アプリで表示する流れ◉ 点数計算ロジックをまるごと再利用していますSpoLiveでの活用事例共通化&スイッチングコストが低くて楽!
Firebaseはいいぞ
◉ SpoLiveでもtabmemoでも利用しているBaaS◉ Firebaseは機能がたくさんあるので説明は省きます◉ メリットは色々ありますが、特に認証の手軽さやリアルタイムデータの利用の実装が超楽ですFirebaseはいいぞWebSocketサーバーなどを用意する必要がなく、同時接続100万ユーザーとかに自動でスケールできてすごいぞ!
◉ ラグビーのプレイデータを管理画面で入力→アプリで自動的にリアルタイムに反映&表示◉ 自分でサーバーとか何も用意することなくできる◉ クライアント側はコードでonSnapshotって書くだけSpoLiveでの活用事例JSのSDKを通して少し書くだけで動くので楽!
Firebaseを使っての開発&Web共通化
◉ Expoで完全JavaScript書くだけでアプリ開発ができる◉ WebでもJavaScriptで開発してる(React.js)◉ 両方一緒のFirebaseのJavaScript SDKを使う今までのおさらいこれってかなりの部分をWebとアプリで共通化できるのでは
◉ React Native アプリExpoを使ってまず開発◉ 次にWebでのアプリをReact.jsで開発して・・・tabmemoでの活用事例Firebaseへのデータアクセス周りとReduxでのデータ管理周りを共通化してみました
FluxでいうとこのここらへんがWebもアプリも一緒のコードで動いています
◉ Reduxでのデータ管理周り◉ Firebaseでのアカウント作成・ログイン◉ Firebaseへのデータ保存・同期周りアプリとWebで全く同じJSで動作tabmemoでの共通化
treesrc├── actions 共通├── assets├── constants├── native アプリ用├── reducers├── store└── web Webサイト用
Expo のReact Native Webサポート
◉ Expo公式がβサポート◉ React Nativeで書いているコードをWeb用にBuild○ →大体そのままブラウザで動く!やばい!◉ tabmemoでReduxとかのコードの共通化!とかなんとか言ってたけど。。。Expo v33からReact Native Webがはいった!
さっきのFluxでいうと・・・とか関係なしで全部いけるじゃん(※ちゃんと動くなら)
◉ 簡単なネイティブ&WebアプリをExpo でワンソースで作ってみました◉ 画像をアップロードして、テロップ画像と文字を合成して新しい画像を作ります◉ iOS&Androidアプリ、Chromeで動きます!(iOS Safariはダメでした笑)さっそく触ってみた!作ったやつデモ!テロップメーカーWeb版
◉ まだβ版なのでコンシューマ向けのアプリケーションとして出すには心もとないけどリソースが足りない現場ならあり?◉ 「Webで一部分だけ出してあとはアプリに導線を」とかの場面でならちょうど良いかも!触ってみた感想1テロップメーカーWeb版
◉ WebpackがかなりExpoに隠蔽されてる◉ webpack.config.jsをカスタマイズしていく感じでビルドがかなりシビアなので、Webpackがわからないと速攻で詰む◉ Webは対応しているモジュールだけ触ってみた感想2まだまだProduction Readyではないけど、対応環境が絞れるとかならなんとか?今後に期待!テロップメーカーWeb版
◉ 技術書典(9/22)でこのアプリを、サンプルとしてもうちょっといじってからExpoでのReact Native Web周りをまとめた技術同人誌を書くので買いに来て!◉ SpoLiveでFirebase×React Native書きたいマン(特にまだTypeScriptとHooksを導入途中なのでその辺り特に)募集しています!気になる人は私かチームメンバー♂に声かけて!宣伝!
質問あればTwitterでもhttps://twitter.com/nabettucometsでもどうぞ→Thanks!
cometsについてこちらの発表は、専用サイトにコメントするとコメントが発表者のスライドに表示されます。https://comets.nabettu.com/?id=RNTokyoちなみにFirebaseとNetlifyで動いています。