教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
FirebaseはWebサービスです。以下のURLにアクセスしGoogleアカウントでログインします。
Firebaseには複数のプランがありますが、ここでは無料のプランで開発を進めます。
新しいプロジェクトを作成します。
(プロジェクト名は後で変更できないので注意)
プロジェクトを作成すると、このようなページに遷移します。
Firebaseには沢山のサービスがありますが、今回は2つのサービスを有効にします。
Cloud Firestoreはドキュメントベースのデータベースです。
「データベースの作成」をクリックして新しいデータベースをサービスを有効にします。
デフォルトでは「ロックモードで開始」が選択されてますが「テストモードで開始」を選択します。
テストモードでは、Webアプリからデータベースの読み取りと書き込みが許可されます。
この画面が表示されたら完了です。
HostingではCLIを用いてWebアプリを公開・更新できます。
ダッシュボードではデプロイしたWebアプリとドメインの管理ができます。
画面の「使ってみる」をクリックしてサービスを有効にします。
この画面が表示されたら完了です。
firebaseをインストールします。
bash1 Copied!$ npm i -S firebase
Firebaseのトップページからコードスニペットを取得します。
このconfig
の内容をコピーして、index.jsを書き換えます。
今回はFirebaseのサービスのうちfirestore
のみを使用するのでfirebase/firestore
を読み込みます。
jsx12345678910111213141516171819202122232425262728293031 Copied!// ./src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import firebase from 'firebase/app'
import 'firebase/firestore'
// Firebaseを初期化する
firebase.initializeApp({
apiKey: 'xxxx',
authDomain: 'uzxeszyjuzny.firebaseapp.com',
databaseURL: 'https://uzxeszyjuzny.firebaseio.com',
projectId: 'uzxeszyjuzny',
storageBucket: 'uzxeszyjuzny.appspot.com',
messagingSenderId: '268923130736',
})
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()
以上でこのパートは終了です。