Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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で一部分だけ出してあとはアプリに導 線を」とかの場面でならちょうど良いかも! 触ってみた感想1 テロップメーカーWeb版
Slide 29
Slide 29 text
◉ WebpackがかなりExpoに隠蔽されてる ◉ webpack.config.jsをカスタマイズしていく感 じでビルドがかなりシビアなので、Webpack がわからないと速攻で詰む ◉ Webは対応しているモジュールだけ 触ってみた感想2 まだまだ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で動いています。