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を使って爆速でアプリを作る
Search
はが
November 02, 2018
Technology
1
800
React Native (Expo) + Firebaseを使って爆速でアプリを作る
Reactの知識を使ってクロスプラットフォームのアプリを開発する
はが
November 02, 2018
Tweet
Share
More Decks by はが
See All by はが
PlayCanvasで始めるWebXR開発
yushimatenjin
2
980
Other Decks in Technology
See All in Technology
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
130
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
530
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
130
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
480
Operating Operator
shhnjk
1
590
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Code Reviewing Like a Champion
maltzj
524
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Statistics for Hackers
jakevdp
799
220k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Thoughts on Productivity
jonyablonski
69
4.7k
4 Signs Your Business is Dying
shpigford
184
22k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
React Native (Expo) + Firebaseを使って爆速でアプリを 作る React Nativeで開発時に使うとUIのコン ポーネントライブラリなどの紹介
自己紹介 名前 はが (羽賀 流登) Twitter : @mxcn3 趣味 野菜を育てること
年齢 21歳 | 居住地 東京 | 休日 土日 (株) FACTBASE 仕事中 : React Native, Node, Vue 仕事以外 : React, React Native, Elm(興味を持ち始めた)
補足・本日話すこと • React LT用にReact Native(Expo)でアプリを作ったのでその話しをします。 • 使用したUIのライブラリやExpoなどについてをしようと思います
React Nativeについて • React NativeとはFacebookが開発しているクロスプラットフォーム開発のフレームワーク。 • React.jsを書いたことがあれば簡単に書くことが出来る。
React NativeでHello, World! ソース : https://snack.expo.io/@yutten/hello-world Expo Client(アプリ)を入れた後 QRコードを読み込むと実行でき る
Hello World
Expoとは • Expoとは、React Native開発を限りなくWebアプリ開発の体験に近づ ける事ができるプラットフォーム兼ライブラリ群。 • アプリのビルドをせずとも、専
モチベーション • 普段 React Native Init(Expoではない方)で開発をしているが、Expoでの開発が爆速だという よく話を聞いていたのでLT発表という機会が得れたので LT駆動形で作らせていただいた。
Sorry... 参考 : Expo Client can only be used to
view your own projects... 自分以外が作っ たExpoのデモアプリはiPhoneでロード不可になったそうです http://hiroga.hatenablog.com/entry/2018/05/09/080108 Expoは簡単にアプリが共有できるのですが iPhoneに対しては、作者以外にはデモアプリの共有が出 来ないことをスライドを作っている段階で知りました...
ExpoならでLT会で共有できると、テンションを上げな がら作りました iPhoneの方ごめんなさい > < ExpoクライアントからQRコードを読み込 むことで実行できる
アプリ 1. ログイン周り Firebase | 匿名ログイン 2. データベース Firestore |
メッセージ・ユーザ情報・いい ね周りの保存 Storage | プロフィール画像の保存 3. 状態管理 Redux ・Redux Saga 4. ナビゲーション React Navigation
React Nativeでの開発をはかどらせた ライブラリを紹介
0. React Navigation • react-navigation★10000↑ React Native コミュニティが開発しておりかなり使われているイ メージ ナビゲーション周りのデザインはこのライブラリが全て提供してい
る物を使用 https://github.com/react-navigation/react-navigation
1. NativeBase (UI Components) • native-base★10000↑ UIのコンポーネントを充実して提供している OSSのライブラリ https://github.com/GeekyAnts/NativeBase
2. スワイプのアニメーション • react-native-swiper ★6000↑ 他のマッチングアプリを使っているとよく見るアニメーションが 用意に作ることが出来る。 https://github.com/leecade/react-native-swiper
3. チャット • react-native-gifted-chat ★6000 ライブラリチャットの機能・ UIを提供してくれる。 • 配列を渡すと後はだいたいやってくれる https://github.com/FaridSafi/react-native-gifted-chat
一週間を終えた • 積極的にOSSのライブラリを取り入れてくことで、爆速でアプリを作ることが出来た。 • 実機ビルドで一回もiPhoneとパソコンを物理的に繋がなかったのは新鮮だった。 • 体力の限界を知ることができた一週間だった (色んな意味で)
ご清聴ありがとうございました。