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
770
React Native (Expo) + Firebaseを使って爆速でアプリを作る
Reactの知識を使ってクロスプラットフォームのアプリを開発する
はが
November 02, 2018
Tweet
Share
More Decks by はが
See All by はが
PlayCanvasで始めるWebXR開発
yushimatenjin
2
940
Other Decks in Technology
See All in Technology
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
670
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Agile that works and the tools we love
rasmusluckow
328
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Designing for humans not robots
tammielis
250
25k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Side Projects
sachag
452
42k
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とパソコンを物理的に繋がなかったのは新鮮だった。 • 体力の限界を知ることができた一週間だった (色んな意味で)
ご清聴ありがとうございました。