Firebaseプロジェクトをつくる（5分）

FirebaseはWebサービスです。以下のURLにアクセスしGoogleアカウントでログインします。

https://firebase.google.com

Firebaseには複数のプランがありますが、ここでは無料のプランで開発を進めます。

新しいプロジェクトを作成します。
(プロジェクト名は後で変更できないので注意)

プロジェクトを作成すると、このようなページに遷移します。

Firebaseには沢山のサービスがありますが、今回は２つのサービスを有効にします。

Database

Cloud Firestoreはドキュメントベースのデータベースです。

「データベースの作成」をクリックして新しいデータベースをサービスを有効にします。

デフォルトでは「ロックモードで開始」が選択されてますが「テストモードで開始」を選択します。

テストモードでは、Webアプリからデータベースの読み取りと書き込みが許可されます。

この画面が表示されたら完了です。

Hosting

HostingではCLIを用いてWebアプリを公開・更新できます。

ダッシュボードではデプロイしたWebアプリとドメインの管理ができます。

画面の「使ってみる」をクリックしてサービスを有効にします。

この画面が表示されたら完了です。

Firebaseをインストールする

firebaseをインストールします。

bash
1
 
Copied!
$ npm i -S firebase

Firebaseのトップページからコードスニペットを取得します。

このconfigの内容をコピーして、index.jsを書き換えます。
今回はFirebaseのサービスのうちfirestoreのみを使用するのでfirebase/firestoreを読み込みます。

jsx
12345678910111213141516171819202122232425262728293031
                               
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()

以上でこのパートは終了です。