Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ R...
Search
tatsuaki watanabe
September 03, 2019
Technology
2
1.4k
React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ React Native Tokyo 2019/09/03 ~
tatsuaki watanabe
September 03, 2019
Tweet
Share
More Decks by tatsuaki watanabe
See All by tatsuaki watanabe
4:3のスライド
nabettu
0
270
React Native for WebでもOGP対応がしたい! ~ TECH STAND #2 React Native 2020/12/18 ~
nabettu
1
6.6k
React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~
nabettu
8
10k
OG画像のためだけのFunctionsで、 htmlベタ書き&リダイレクトをやめるんだ
nabettu
3
1.6k
A story till the netlify fun book is made
nabettu
0
680
Netlifyはいいぞ #技術同人誌再販Night
nabettu
1
480
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり
nabettu
3
860
声をかけられるフリーランスエンジニアになるには
nabettu
5
1.3k
2016-01-25いいとも発表Atomパッケージ
nabettu
0
160
Other Decks in Technology
See All in Technology
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
830
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
2025年夏 コーディングエージェントを統べる者
nwiizo
0
140
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
220
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
120
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
3
550
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
1
480
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
Featured
See All Featured
Side Projects
sachag
455
43k
It's Worth the Effort
3n
187
28k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Producing Creativity
orderedlist
PRO
347
40k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Code Review Best Practice
trishagee
70
19k
Building Adaptive Systems
keathley
43
2.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Transcript
React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ React Native Tokyo 2019/09/03 ~
株式会社クリモ CTO 渡邊達明
◉ 自己紹介と最近作っているもの ◉ Expoとは ◉ Firebaseはいいぞ ◉ Firebaseを使っての開発&Web共通化 ◉ Expo
のReact Native Webサポート ◉ 宣伝 目次
◉ 渡邊 達明(わたなべ たつあき) ◉ Twitter,GitHub: @nabettu ◉ 富士通株式会社→面白法人カヤック→独立 ◉
妻(代表)と二人で法人 ◉ ネイティブアプリ(React Native with Expo)& Webフロント (Nuxt.js,React.js)& Firebase周りが専門です 自己紹介
◉ 妻がママ向け・保育士向けのメディア運営 ◉ 私が受託開発と、メディアの技術周り担当 ◉ 空いた時間でWebサービス開発 株式会社クリモ
作ってます
最近作ってるもの
SpoLive NTTコミュニケーションズ 社内ベンチャー発 リアルタイムスポーツ実況解説アプリ もうすぐ始まるラグビー ワールドカップ データ配信します!!!!
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での共通化
tree src ├── 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/nabettu cometsでもどうぞ→ Thanks!
cometsについて こちらの発表は、専用サイトに コメントするとコメントが 発表者のスライドに表示されます。 https://comets.nabettu.com/?id=RNTokyo ちなみにFirebaseとNetlifyで動いています。