カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-2

Firebaseプロジェクトをつくる

Firebaseプロジェクトをつくる(5分)

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

https://firebase.google.com

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

img

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

img

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

img

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

Database

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

img

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

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

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

img

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

img

Hosting

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

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

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

img

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

img

Firebaseをインストールする

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

bash
1
Copied!
$ npm i -S firebase

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

img

この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()

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