React Native (Expo) + Firebaseを使って爆速でアプリを作る

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とパソコンを物理的に繋がなかったのは新鮮だった。 • 体力の限界を知ることができた一週間だった (色んな意味で)

ご清聴ありがとうございました。

React Native (Expo) + Firebaseを使って爆速でアプリを作る

React Native (Expo) + Firebaseを使って爆速でアプリを作る

はが

More Decks by はが

Other Decks in Technology

Featured

Transcript