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
680
React Native (Expo) + Firebaseを使って爆速でアプリを作る
Reactの知識を使ってクロスプラットフォームのアプリを開発する
はが
November 02, 2018
Tweet
Share
More Decks by はが
See All by はが
PlayCanvasで始めるWebXR開発
yushimatenjin
2
610
Other Decks in Technology
See All in Technology
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
1
1.7k
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
150
The AI Revolution Will Not Be Monopolized: Behind the scenes
inesmontani
PRO
1
160
AWS学習者向けにAzureの解説スライドを作成した話
handy
3
190
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
270
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
270
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.4k
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
2
400
require(ESM)とECMAScript仕様
uhyo
4
970
IPUT App Dev. Co. -Overview 2024/4
iputapp
0
130
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
5
710
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
400
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
60
4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Six Lessons from altMBA
skipperchong
22
3k
Visualization
eitanlees
137
14k
Building Applications with DynamoDB
mza
88
5.6k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
How GitHub (no longer) Works
holman
305
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
Automating Front-end Workflow
addyosmani
1357
200k
It's Worth the Effort
3n
180
27k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
65
14k
Practical Orchestrator
shlominoach
183
9.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とパソコンを物理的に繋がなかったのは新鮮だった。 • 体力の限界を知ることができた一週間だった (色んな意味で)
ご清聴ありがとうございました。