リファクタリング : actionsの分割 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

actionsの変更

actions/index.jsのサイズが大きくなってきたので、分割します。また、下記の点もリファクタリングします。

• action typeを定数で定義する
• 個々のactionを定義する

index.jsにaction typeをまとめます。

src/actions/index.js

// todo actions
export const ADD_TODO_REQUEST = 'ADD_TODO_REQUEST';
export const ADD_TODO_SUCCESS = 'ADD_TODO_SUCCESS';
export const ADD_TODO_ERROR   = 'ADD_TODO_ERROR';
export const TOGGLE_TODO_REQUEST = 'TOGGLE_TODO_REQUEST';
export const TOGGLE_TODO_SUCCESS = 'TOGGLE_TODO_SUCCESS';
export const TOGGLE_TODO_ERROR   = 'TOGGLE_TODO_ERROR';

// visibility filter actions
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';

todoActions.jsファイルを新規作成し、index.jsからtodo関連のactionをコピーしたあと、リファクタリングします。

src/actions/todoActions.js

import {ADD_TODO_REQUEST, ADD_TODO_SUCCESS, ADD_TODO_ERROR,
  TOGGLE_TODO_REQUEST, TOGGLE_TODO_SUCCESS, TOGGLE_TODO_ERROR}
   from './'

const addTodoRequest = () => ({
  type: ADD_TODO_REQUEST
})

const addTodoSuccess = () => ({
  type: ADD_TODO_SUCCESS
})

const addTodoError = err => ({
   type: ADD_TODO_ERROR,
   err
})

const toggleTodoRequest = (text, completed) => ({
  type: TOGGLE_TODO_REQUEST,
  text,
  completed
})

const toggleTodoSuccess = (text, completed) => ({
  type: TOGGLE_TODO_SUCCESS,
  text,
  completed
})

const toggleTodoError = (text, completed, err) => ({
  type: TOGGLE_TODO_ERROR,
  text,
  completed,
  err
})

export const addTodo = text => {
  return (dispatch, getState, {getFirebase}) => {
    dispatch(addTodoRequest());
    const firebase = getFirebase();
    firebase.push('todos', {completed: false, text})
    .then(() => {
      dispatch(addTodoSuccess());
    }).catch(err => {
      dispatch(addTodoError(err));
    });
  }
}

export const toggleTodo = id => {
  return (dispatch, getState, {getFirebase}) => {
    const firebase = getFirebase();
    const state = getState();
    const todo = state.firebase.data.todos[id];
    dispatch(toggleTodoRequest(todo.text, !todo.completed));
    firebase.update(`todos/${id}`, {completed: ! todo.completed})
    .then(() => {
      dispatch(toggleTodoSuccess(todo.text, !todo.completed));
    }).catch(err => {
      dispatch(toggleTodoError(todo.text, !todo.completed, err));
    });
  }
}

だいぶ長くなりましたが、プロダクトが大きくなるならばこの方が見通しが良くなります。

次に、visibilityFilterActions.jsファイルを新規作成し、index.jsからvisibilityFilter関連のactionをコピーしたあと、リファクタリングします。

src/actions/visibilityFilterActions.js

import { SET_VISIBILITY_FILTER } from './'

export const setVisibilityFilter = filter => ({
  type: SET_VISIBILITY_FILTER,
  filter
})

export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

reducersの変更

reducerの変更をします。action typeを文字列から定数に変更します。

src/reducers/todos.js

import {ADD_TODO_REQUEST, ADD_TODO_SUCCESS, ADD_TODO_ERROR,
  TOGGLE_TODO_REQUEST, TOGGLE_TODO_SUCCESS, TOGGLE_TODO_ERROR}
   from '../actions/'

const getStringForCompleted = (completed) => (
  completed ? '完了' : '未完了'
)

const todos = (state = {}, action) => {
  switch (action.type) {
    case ADD_TODO_REQUEST:
      return {...state, notice: 'データを送信中'}
    case ADD_TODO_SUCCESS:
      return {...state, notice: '送信完了しました'}
    case ADD_TODO_ERROR :
      return {...state, notice: 'エラーが発生しました'}
    case TOGGLE_TODO_REQUEST:
      return {...state, notice:
        '"' + action.text + '"のステータスを"'
        + getStringForCompleted(action.completed)
        + '"に変更中'}
    case TOGGLE_TODO_SUCCESS:
      return {...state, notice:
        '"' + action.text + '"のステータスを"'
        + getStringForCompleted(action.completed)
        + '"に変更しました'}
    case TOGGLE_TODO_ERROR :
      return {...state, notice:
        '"' + action.text + '"の更新中にエラーが発生しました。'}
    default:
      return state
  }
}

export default todos;

src/reducers/visibilityFilter.js

import { SET_VISIBILITY_FILTER } from '../actions/'
import { VisibilityFilters } from '../actions/visibilityFilterActions'

const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return action.filter
    default:
      return state
  }
}

export default visibilityFilter;

import文の修正

Importを修正していきます。

src/components/Footer.js

import { VisibilityFilters } from '../actions/visibilityFilterActions'  // 変更

src/containers/AddTodo.js

import { addTodo } from '../actions/todoActions'  // 変更

src/containers/FilterLink.js

import { setVisibilityFilter } from '../actions/visibilityFilterActions'  // 変更

src/containers/VisibleTodoList.js

import { toggleTodo } from '../actions/todoActions'  // 変更

以上でactionsの分割とリファクタリングは終了です。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com

タスク完了フラグの切り替え処理の修正 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

タスクの完了フラグの切り替え(toggleTodo)をFirebaseと連携します。

toggleTodoの変更

actionsのtoggleTodoを変更します。

src/actions/index.js

export const toggleTodo = id => {
  return (dispatch, getState, {getFirebase}) => {
    const firebase = getFirebase();
    const state = getState();
    const todo = state.firebase.data.todos[id];
    dispatch({ type: 'TOGGLE_TODO_REQUEST', text: todo.text, completed: !todo.completed });  // #2
    firebase.update(`todos/${id}`, {completed: ! todo.completed})  // #1
    .then(() => {
      dispatch({ type: 'TOGGLE_TODO_SUCCESS', text: todo.text, completed: !todo.completed });  // #2
    }).catch(err => {
      dispatch({ type: 'TOGGLE_TODO_ERROR', text: todo.text, completed: !todo.completed, err });  // #2
    });
  }
}

• タスクの完了フラグの切り替えはupdateで行います(#1)。updateはパスに存在するデータの一部を書き換える時に使います。パスは`todos/${id}`で、テンプレート文字列を使っています。
• どのタスクをどのように変更したか表示したいので、タスクのテキストと完了フラグをactionとして渡しています。(#2)

reducerも書き換えます。

src/reducers/todos.js

const getStringForCompleted = (completed) => (  // #2
  completed ? '完了' : '未完了'
)

const todos = (state = {}, action) => {
  switch (action.type) {
    // 中略
    case 'TOGGLE_TODO_REQUEST':
      return {...state, notice:   // #1
        '"' + action.text + '"のステータスを"'
        + getStringForCompleted(action.completed)
        + '"に変更中'}
    case 'TOGGLE_TODO_SUCCESS':
      return {...state, notice:  // #1
        '"' + action.text + '"のステータスを"'
        + getStringForCompleted(action.completed)
        + '"に変更しました'}
    case 'TOGGLE_TODO_ERROR' :
      return {...state, notice:  // #1
        '"' + action.text + '"の更新中にエラーが発生しました。'}
    // case 'TOGGLE_TODO’: は削除  // #3
    default:
      return state
  }
}

• タスクの追加処理と同様、画面に表示する文言をnoticeにセットします(#1)。
• completedの文字列表現を返す関数を作成しました(#2)。
• case ‘TOGGLE_TODO’ はもう使用しないので削除します(#3)。

動作確認

ブラウザで確認しましょう。

念のため、Firebaseのデータも確認します。

更新されていました。

以上でタスクの完了/未完了切り替え処理の修正はおしまいです。

これで全ての機能をFirebaseと連携することができました！おめでとうございます！

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com

Firebaseへのデータ送信前後でメッセージを表示する (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

前回の記事で、Firebaseへの通信を行う前にADD_TODO_REQUEST、通信完了時にADD_TODO_SUCCESS、エラー発生時にADD_TODO_ERROR actionをそれぞれdispatchしました。今回はそれぞれに対するreducerと画面表示を実装します。 それぞれのactionに対して、メッセージを画面に表示するようにします。

reducerの実装

始めに、reducerのtodosを変更します。

src/reducers/todos.js

const todos = (state = {}, action) => {  // #1
  switch (action.type) {
    case 'ADD_TODO_REQUEST':
      return {...state, notice: 'データを送信中'}  // #2
    case 'ADD_TODO_SUCCESS':
      return {...state, notice: '送信完了しました'}  // #2
    case 'ADD_TODO_ERROR' :
      return {...state, notice: 'エラーが発生しました'}  // #2
    // case 'ADD_TODO': は削除  // #3
    // case 'TOGGLE_TODO': は次回変更
    default:
      return state
  }
}

// 後略

• 初期値を、空の配列から空のオブジェクトに変更します(#1)。
• noticeに表示したい文言をそれぞれセットします(#2)。
• case ‘ADD_TODO’ はもう使用しないので削除します(#3)。

表示用コンポーネントの追加

次に、noticeを画面に表示します。 表示用のコンポーネントをAppの直下に追加します。

src/components/App.js

// 前略
import NoticeForTodo from './NoticeForTodo'  // 追加

const App = () => (
  <div>
    <AddTodo />
    <NoticeForTodo />  // 追加
    <VisibleTodoList />
    <Footer />
  </div>
)

// 後略

表示用コンポーネントを実装します。

src/components/NoticeForTodo.js(新規ファイル)

import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'

let NoticeForTodo = ({ notice }) => {
  if (! notice) {
    return null;
  }
  return (
    <div>
      {notice}
    </div>
  )
}

NoticeForTodo.propTypes = {
  notice: PropTypes.string
}

const mapStateToProps = state => {
  return {
    notice: state.todos.notice
  }
}

NoticeForTodo = connect(
  mapStateToProps
)(NoticeForTodo)

export default NoticeForTodo;

動作確認

ブラウザで確認しましょう。タスクを送信すると、送信完了しましたの文言が表示されます。

通信を切断してから送信ボタンを押すと、データの送信中の文言も確認できました。再び通信を接続すると、送信完了しましたの文言が表示されます。

以上でFirebaseへの送信前後でメッセージを表示することができました。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com

redux-thunkの導入とタスク追加処理の修正 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

state更新のタイミング

Firebaseへの更新の際に、以下の3つのタイミングでstateを更新したいと思います。

• Firebaseへの投稿直前
• Firebaseへの通信が成功した時
• Firebaseへの通信が失敗した時

Reduxでは、通常1回のdispatchで1つのactionしか発行することができませんが、redux-thunkを使うことで、(主にコンポーネント側からの)1回のdispatchで何回ものactionをdispatchをすることができます。また、firebaseからの応答が返ってきてからdispatchしたいという要望にも応えてくれます。

redux-thunkをインストールします。

$ yarn add redux-thunk

redux-thunkをreduxに組み込む

コーディングをしていきます。

始めに、redux-thunkをmiddlewareとして組み込みます。

src/index.js

import { createStore, applyMiddleware, compose } from 'redux'  // #1
import thunk from 'redux-thunk' // #1
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase' // #1
// 他のimportは変更なし

// 中略

const createStoreWithFirebase = compose(
  applyMiddleware(thunk.withExtraArgument({getFirebase})),  // #2
  reactReduxFirebase(firebase, {})
)(createStore);

// 後略

• reduxからapplyMiddleware、redux-thunkからthunk, react-redux-firebaseからgetFirebaseのimportを追加します。
• composeの引数にapplyMiddlewareを追加し、dispathの際ににthunkを使用するよう指定します。firebaseをredux-thunkからも使えるように、getFirebaseを追加の引数として渡しています。

actionの実装

次に、addTodo actionを変更します。

src/actions/index.js

export const addTodo = text => {
  return (dispatch, getState, {getFirebase}) => {  // #1
    dispatch({ type: 'ADD_TODO_REQUEST' }); // #2
    const firebase = getFirebase();
    firebase.push('todos', {completed: false, text})  // #3
    .then(() => {
      dispatch({ type: 'ADD_TODO_SUCCESS' });  // #4
    }).catch(err => {
      dispatch({ type: 'ADD_TODO_ERROR' , err});  // #5
    });
  }
}

// let nextTodoId = 0 は削除する  // #6

元のaddTodoとは全然違う雰囲気になってしまいました。

• redux-thunkを使用するので、オブジェクトを返すのではなく、関数を返すように変更します(#1)。
• 始めに、ADD_TODO_REQUEST actionをdispatchして送信中の旨を画面に表示する用意をします(#2)。対応するreducerは次回で作成します。(ADD_TODO_SUCCESS, ADD_TODO_ERRORも同様)
• Firebaseにデータをpushします(#3)。todosというパスに{completed: false, text}というデータを新規登録しています
• データのpushが終わったら(サーバにデータが登録されたら)、ADD_TODO_SUCCESS actionをdispatchします(#4)。
• 途中でエラーがあれば、ADD_TODO_ERROR actionをdispatchします(#5)。
• nextTodoIdはもう使用しないので削除します(#6)。

#3でデータが送信されると、Firebaseからreact-redux-firebaseに通知がされ、state(state.firebase.data.todos)を書き換えます。そしてタスク一覧が自動で再描画されます。タスクを一覧に追加する処理を実装する必要がないので、楽に実装することができました。

動作確認

ブラウザで確認しましょう。

よい感じですね。

念のためFirebaseにデータが登録されているかどうか見て見ましょう。

登録されていました。

以上でタスク追加処理の実装は終わりです。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com

getVisibleTodosの更新 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

getVisibleTodosを更新します。

todosが配列からオブジェクトになったため、filterを直接todosに対して使うことができません。代わりにキーの配列を作成した後、completedの状態でfilterし、reduceを使って空のオブジェクトに追加します。 また、todosがundefinedの場合もあるので、ガード節を追加します。

src/containers/VisibleTodoList.js

const getVisibleTodos = (todos, filter) => {
  if(!todos) return todos
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return Object.keys(todos)
        .filter(key => todos[key].completed)
        .reduce((filtered, key) => {
            filtered[key] = todos[key];
            return filtered;
          },
          {}
        )
    case 'SHOW_ACTIVE':
      return Object.keys(todos)
        .filter(key => !todos[key].completed)
        .reduce((filtered, key) => {
            filtered[key] = todos[key];
            return filtered;
          },
          {}
        )
    default :
      return todos;
  }
}

ブラウザで確認しましょう。

getVisibleTodosの修正ができました。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com

Firebaseからタスクを読み込む部分の作成 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

データの読み込み部分を、ローカルからFirebase Realtime Database(以下、Firebase)に変更します。

読み込み部分の作成

データ読み込みのコードはcontainerに記載します。タスク一覧(todos)をFirebaseから取得します。

src/containers/VisibleTodoList.js

// importを追加
import { compose } from 'redux'
import { firebaseConnect } from 'react-redux-firebase'

// 中略

const firebaseQueries = ['todos'];  // #3

const VisibleTodoList = compose(   // #1
  firebaseConnect(firebaseQueries),  // #2
  connect(
    mapStateToProps,
    mapDispatchToProps
))(TodoList)

• composeでFirebaseとReduxを合成します(#1)。
• Firebaseからデータを取得するには、firebaseConnectの引数に、取得内容の配列を渡します(#2, #3)。配列の各要素には、Firebaseへの問い合わせ内容を記載します。

const firebaseQueries = ['todos'];

は、以下と同様です。

const firebaseQueries = [
    { type: 'value', path: '/todos' }
];

このように書くことで、/todoというパスのデータを読み取ります。データの変更は、valueイベントでトリガされるようになります。 value以外の設定(onceやchild_added)の設定の仕方や取得件数の設定方法は公式ドキュメント (Queries · React Redux Firebase)を参照してください。

取得したデータは、state.firebase.data.todosに保存されているので、mapStateToPropsを変更します。

src/containers/VisibleTodoList.js

 const mapStateToProps = state => {
   return {
    todos: getVisibleTodos(state.firebase.data.todos, state.visibilityFilter)  // 変更
   }
 }

読み込み部分が完成しました。react-redux-firebaseを使用して簡単に実装することができました。

表示部分の修正

次に、表示部分を変更します。Firebaseのデータが読み込まれるまでに時間がかかるので、isLoadedを利用して読み込みが終わるまで代替のテキストを表示します。 また、リストが空だった場合のために、isEmptyを利用して、空の旨を表示します。 読み込みが完了したら、タスクのリストを表示します。

変更前のtodosのデータは、{id, text, completed}というオブジェクトの配列でしたが、Firebaseから取得したデータは、${key}: {text, completed}というプロパティの集まりです。この場合の対処法として、

1. TodoListでFirebase形式のオブジェクトを扱うように変更する
2. VisibleTodoListでtodosを配列に変更して、TodoListに渡す

の2つが考えられますが、今回は1番目の方法にしました。

TodoListを書き換えます。

src/components/TodoList.js

import React from 'react'
import { isLoaded, isEmpty } from 'react-redux-firebase'  // #1
import PropTypes from 'prop-types'
import Todo from './Todo'

const TodoList = ({todos, onTodoClick}) => {
  if (!isLoaded(todos)) {  // #2
    return <div>タスク一覧を読み込み中…</div>
  }
  if (isEmpty(todos)) {  // #3
    return <div>タスクがありません。</div>
  }

  return (
    <ul>
      {Object.keys(todos).map((key) => (  //#4
        <Todo key={key} {...todos[key]} onClick={() => onTodoClick(key)}/>
      ))}
    </ul>
  )
}

// 後略

• isLoaded、isEmptyをreact-redux-firebaseからimportします(#1)。
• todosがまだ読み込まれていない時に、読み込み中の文言を表示します(#2)。
• todosが空の時に、タスクが空の文言を表示します(#3)。
• 各タスクを表示するために、Object.keys(todos)で一旦keyの配列を作成し、それに対してmapを呼びます(#4)。

PropTypesも変更します。

src/components/TodoList.js

TodoList.propTypes = {
  todos: PropTypes.objectOf(
    PropTypes.shape({
      completed: PropTypes.bool.isRequired,
      text: PropTypes.string.isRequired
    })
  ),
  onTodoClick: PropTypes.func.isRequired
}

動作確認

ブラウザで確認しましょう。 Firebaseに登録したデータが表示されていれば成功です！他の機能は動かなくなってしまったので、次回以降で修正します。

うまく動かない場合は、Firebaseの設定(src/firebase/config.js)は自身のものになっているか、コピペミス、意図しない空白が入っていないか確認してください。 databaseURLが間違っている場合は、 ブラウザのコンソールに @firebase/database: FIREBASE WARNING: Firebase error. Please ensure that you spelled the name of your Firebase correctly (https://todo-sample-xxxxx.firebaseio.com) と表示されます。

コンソールにRRF: Error retrieving data for path: todos, storeAs: undefined. Firebase: Error: permission_denied at /todos: Client doesn't have permission to access the desired data.のエラーが表示される場合は、 Realtime Databaseのパーミッション設定が下記のようになっているかどうか確認してください。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com

firebase, react-redux-firebaseモジュールのインストールと設定 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

モジュールのインストール

開発を始めるにあたり、firebaseのモジュールをインストールします。

$ yarn add firebase

次に、React + Redux + Firebaseでの開発を簡単に行うために、react-redux-firebase モジュールをインストールします。

$ yarn add react-redux-firebase

react-redux-firebaseモジュールは、firebaseのデータをreduxシステムに組み込んでくれたり、firebaseにアクセスする関数を提供しているライブラリです。詳しくは公式ドキュメントを見てください。

• Github : GitHub - prescottprue/react-redux-firebase: Redux bindings for Firebase. Includes React Hooks and Higher Order Components.
• ドキュメント : Read Me · React Redux Firebase

Firebase config の作成

それでは、コーディングを始めていきましょう！(やっとコーディング！)

始めに、src ディレクトリにfirebaseディレクトリを作成します。その下にconfig.js という名前で新規ファイルを作成し、firebaseの設定を記載します。下にサンプルを示しましたので、自身の設定内容に置き換えてください。

src/firebase/config.js

const firebaseConfig = {
  apiKey: 'AxxxxxxxxxxxxxxxxxxxQ',
  authDomain: 'todo-sample-xxxxx.firebaseapp.com',
  databaseURL: 'https://todo-sample-xxxxx.firebaseio.com',
  storageBucket: 'todo-sample-xxxxx.appspot.com',
  messagingSenderId: '00000000000',
  projectId: 'todo-sample-xxxxx'
}

export default firebaseConfig;

自身の設定内容がわからない場合は、こちらの記事を参照してください。

yucatio.hatenablog.com

firebaseとreact-redux-firebaseの初期化

次に、src/index.jsを変更します。

src/index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, compose } from 'redux'  // #1
import { reactReduxFirebase } from 'react-redux-firebase'  // #1
import firebase from 'firebase' // #1
import todoApp from './reducers'
import App from './components/App'
import firebaseConfig from './firebase/config'  // #1
import registerServiceWorker from './registerServiceWorker'

firebase.initializeApp(firebaseConfig);  // #2

const createStoreWithFirebase = compose(  // #3
  reactReduxFirebase(firebase, {})
)(createStore);

const store = createStoreWithFirebase(todoApp);  // #3

render (
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

• composeをreduxから、reactReduxFirebaseをreact-redux-firebaseから、firebaseをfirebaseから、firebaseConfigを./firebase/configからそれぞれimportします。 (#1)
• Firebaseを設定ファイルで初期化します。(#2)
• reactReduxFirebaseをStoreに組み込みます (#3)

reducerの変更

続いてreducerにもreact-redux-firebaseの設定を追加します。

src/reducers/index.js

import { combineReducers } from 'redux'
import { firebaseReducer } from 'react-redux-firebase'  // 追加
import todos from './todos'
import visibilityFilter from './visibilityFilter'

export default combineReducers({
  firebase: firebaseReducer,    // 追加
  todos,
  visibilityFilter
})

以上でfirebaseとreact-redux-firebaseを使用してfirebaseにデータを登録したり読み込んだりする準備ができました。

動作確認

yarn start でサーバを起動し、 エラーが出ていないことを確認してください。

ChoromeのデベロッパーコンソールにFirebaseのwarningが出ますが、今のところ問題ありません。(解決方法がわかったら記載します。)

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com