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
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
150
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
170
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
130
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
180
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
What’s new in Android development tools
yanzm
0
320
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
260
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Automating Front-end Workflow
addyosmani
1370
200k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Rails Girls Zürich Keynote
gr2m
95
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
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とパソコンを物理的に繋がなかったのは新鮮だった。 • 体力の限界を知ることができた一週間だった (色んな意味で)
ご清聴ありがとうございました。