はじめに
フロントにReactNative、バックエンドにfirebaseを使ってログイン機能を作ってみたので記事を書いてみることにした。
完成形を紹介するだけではなく、実装した順に説明していきます。
Qiita初めてなので、わかりにくいのは大目に見てくれたら嬉しいです。
どんどんご意見お願いします！
作る機能とこの記事について
- ReactNativeによるサインアップ、サインインの画面
- ログイン、ログアウトに伴う画面遷移
- Reduxによるstate管理(ducksパターンを採用)
- Expoによる開発
- firebaseによる認証機能
このアプリの開発を、最初から順に書いていきたいと思います
今回は、概要とExpoの初期画面までを書きたいと思います。
使ったライブラリ
- Expo
- ReactNative
- ReactNavigation(画面遷移)
- ReactNativeDebugger(デバッグ)
- Redux(state管理)
- redux ducksパターン
- firebase
- Firebase Authentication(パスワード認証)
ディレクトリ構成
root/
├ src/
├ App.tsx
├ store.ts
├ Styles.ts
├ components/
├ Counter.tsx
├ Signin.tsx
├ containers/
├ Counter.ts
├ Signin.ts
├ modules/
├ index.ts
├ CounterModule.ts
├ node_modules/
├ package.json
Expoはデフォルトでroot/App.jsを読み込みますが、root/src/App.tsxに移しています(詳しくは次回で)
ハマったところ
ReactNavigation
現時点での最新は5.x
ネットの情報は3.xや4.xの情報も混ざっているが、redux周りがかなり書き方に変更があり、注意が必要
ReactNativeDebugger
この記事を参考にした
ExpoアプリにReact Native Debuggerをセットアップする方法 [Mac OS用]
上の記事通りではうまく動かなかったので、少し修正した(詳しくは次回で)
作るときのオススメ
僕がこのアプリを作ろうとした時に、Qiitaの記事を集めてきて、組み合わせながら作ろうとしたところ、バグがいっぱいでかなり苦労しました。
結局公式のドキュメントを読むと解決したことが多いので、英語がしんどいですが公式ドキュメントを読むことをオススメします。
ドキュメントに載っているコードをベースに作っていくと、ハマりにくく進められますよ
React チュートリアル(日本語)
Redux Basic Tutorial
ReactNavigation Fundamentals
Expoの準備
こちらの記事を参考に
誰でもアプリが作れちゃう！EXPOでreact-native入門
自分のデバイスで実行するためには、パソコンと同じwifiに接続する必要があるみたい
↑ yarn startしたところの画面
次回
今回は、Expoで開発を行う準備をしました。次回では、ReactNativeの開発をはじめ、Reduxを導入していきたいと思います。
Expo+Redux(+firebase)でログインフォーム② 〜Reduxの導入〜