このページは Cloud Translation API によって翻訳されました。

ウェブ向け Firebase を理解する

1. 概要

この Codelab では、インタラクティブなウェブアプリケーションを作成するための Firebase の基本をいくつか学びます。いくつかの Firebase プロダクトを使用して、予定の出欠確認とゲストブックのチャットアプリを作成します。

このステップのスクリーンショット

ラボの内容

Firebase Authentication と FirebaseUI でユーザーを認証します。
Cloud Firestore を使用してデータを同期する。
Firebase セキュリティルールを作成してデータベースを保護する。

必要なもの

Chrome などの任意のブラウザ。
stackblitz.com へのアクセス（アカウントもログインも不要）。
Google アカウント（Gmail アカウントなど）。GitHub アカウントですでに使用しているメールアカウントを使用することをおすすめします。これにより、StackBlitz の高度な機能を使用できます。
Codelab のサンプルコード。コードを取得する方法については、次のステップをご覧ください。

2. 開始用コードを取得する

この Codelab では、StackBlitz を使用してアプリを作成します。StackBlitz は、複数の Firebase ワークフローが統合されたオンラインエディタです。Stackblitz では、ソフトウェアのインストールや特別な StackBlitz アカウントは必要ありません。

StackBlitz を使用すると、プロジェクトを他のユーザーと共有できます。あなたの StackBlitz プロジェクトの URL を知っている他のユーザーは、あなたのコードを見てプロジェクトをフォークできますが、StackBlitz プロジェクトを編集することはできません。

開始コードの URL https://stackblitz.com/edit/firebase-gtk-web-start に移動します。
[StackBlitz] ページの上部にある [Fork] をクリックします。

このステップのスクリーンショット

これで、独自の StackBlitz プロジェクトとして開始コードのコピーが作成されました。一意の名前と URL が設定されています。ファイルと変更はすべて、この StackBlitz プロジェクトに保存されます。

3. 予定情報を編集する

この Codelab の開始資料では、ウェブアプリ用の構造（いくつかのスタイルシートと 2 つの HTML コンテナなど）を提供します。この Codelab の後半で、これらのコンテナを Firebase にフックします。

まず、StackBlitz インターフェースについてもう少し詳しく見てみましょう。

StackBlitz で index.html ファイルを開きます。
event-details-container と description-container を見つけて、予定の詳細を編集してみてください。

テキストを編集すると、StackBlitz のページの自動再読み込みに新しいイベントの詳細が表示されます。そうなんですか？

<!-- ... -->

<div id="app">
  <img src="..." />

  <section id="event-details-container">
     <h1>Firebase Meetup</h1>

     <p><i class="material-icons">calendar_today</i> October 30</p>
     <p><i class="material-icons">location_city</i> San Francisco</p>

  </section>

  <hr>

  <section id="firebaseui-auth-container"></section>

  <section id="description-container">
     <h2>What we'll be doing</h2>
     <p>Join us for a day full of Firebase Workshops and Pizza!</p>
  </section>
</div>

<!-- ... -->

アプリのプレビューは次のようになります。

アプリのプレビュー

このステップのスクリーンショット

4. Firebase プロジェクトを作成して設定する

イベント情報を表示するのはゲストにとっては便利ですが、イベントを表示するだけでは、誰にとってもあまり役に立ちません。このアプリに動的機能を追加しましょう。そのためには、Firebase をアプリに接続する必要があります。Firebase の使用を開始するには、Firebase プロジェクトを作成して設定する必要があります。

Firebase プロジェクトを作成する

Firebase にログインします。
Firebase コンソールで [プロジェクトを追加]（または [プロジェクトを作成]）をクリックし、Firebase プロジェクトに「Firebase-Web-Codelab」という名前を付けます。
プロジェクト作成オプションをクリックします。プロンプトが表示されたら、Firebase の利用規約に同意します。このアプリではアナリティクスを使用しないため、Google アナリティクスの画面で [有効化しない] をクリックします。

Firebase プロジェクトについて詳しくは、Firebase プロジェクトについて理解するをご覧ください。

コンソールで Firebase プロダクトを有効にして設定する

作成するアプリでは、ウェブアプリで利用可能な次の Firebase プロダクトを使用しています。

ユーザーがアプリに簡単にログインできるようにする Firebase Authentication と Firebase UI。
構造化されたデータをクラウドに保存し、データが変更されたときに即座に通知を受け取る Cloud Firestore。
Firebase セキュリティルール: データベースを保護します。

これらのプロダクトの一部は、特別な構成が必要な場合や、Firebase コンソールを使用して有効にする必要があります。

この Codelab では、ユーザーがウェブアプリにログインできるように、メール/パスワードのログイン方法を使用します。

Firebase コンソールの左側のパネルで、[ビルド] > [Authentication] をクリックします。[開始] をクリックします。すると、認証ダッシュボードが表示され、登録したユーザーの確認、ログインプロバイダの構成、設定の管理を行うことができます。
[ログイン方法] タブを選択します（またはここをクリックすると、このタブに直接移動できます）。
プロバイダのオプションから [メール/パスワード] をクリックし、[有効にする] に切り替えて、[保存] をクリックします。

Cloud Firestore を設定する

このウェブアプリは、Cloud Firestore を使用してチャットメッセージを保存し、新しいチャットメッセージを受信します。

Cloud Firestore を設定する方法は次のとおりです。

Firebase コンソールの左側のパネルで、[Build] > [Firestore Database] をクリックします。次に、[データベースを作成] をクリックします。
[データベースを作成] をクリックします。
[テストモードで開始] オプションを選択します。セキュリティルールに関する免責条項を読みます。テストモードを使用すると、開発中にデータベースに自由に書き込むことができます。[次へ] をクリックします。

注意: この Codelab の最初のステージでは、テストモードを使用します。ただし、この Codelab の後半では、データベースを保護するために Firebase セキュリティルールを作成します。

アプリ、特に本番環境のアプリでは、セキュリティルールを使用してデータベースを保護することが非常に重要です。セキュリティルールについて詳しくは、Firebase のドキュメントをご覧ください。
データベースの場所を選択します（デフォルトをそのまま使用できます）。ただし、この場所を後で変更することはできません。
[完了] をクリックします。

5. Firebase を追加して構成する

Firebase プロジェクトを作成し、いくつかのサービスを有効にしたら、Firebase を使用するコードと、使用する Firebase プロジェクトを指定する必要があります。

Firebase ライブラリを追加する

アプリで Firebase を使用するには、Firebase ライブラリをアプリに追加する必要があります。Firebase のドキュメントで説明されているように、追加の方法があります。たとえば、Google の CDN からライブラリを追加できます。また、Browserify を使用している場合は、npm を使用してローカルにインストールしてから、アプリにパッケージ化することもできます。

StackBlitz では自動的にバンドルされるため、import ステートメントを使用して Firebase ライブラリを追加できます。ライブラリのモジュラー（v9）バージョンを使用します。「ツリーシェイキング」と呼ばれるプロセスにより、ウェブページ全体のサイズを小さくすることができます。モジュラー SDK について詳しくは、こちらのドキュメントをご覧ください。

このアプリをビルドするには、Firebase Authentication、FirebaseUI、Cloud Firestore の各ライブラリを使用します。この Codelab では、次の import ステートメントがすでに index.js ファイルの先頭に含まれています。この後、各 Firebase ライブラリからさらにメソッドをインポートしていきます。

// Import stylesheets
import './style.css';

// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';

// Add the Firebase products and methods that you want to use
import {} from 'firebase/auth';
import {} from 'firebase/firestore';

import * as firebaseui from 'firebaseui';

Firebase ウェブアプリを Firebase プロジェクトに追加する

Firebase コンソールに戻り、左上の [プロジェクトの概要] をクリックして、プロジェクトの概要ページに移動します。
プロジェクトの概要ページの中央にあるウェブアイコンをクリックして、新しい Firebase ウェブアプリを作成します。
アプリをニックネーム Web App で登録します。
この Codelab では、[このアプリの Firebase Hosting も設定します] の横にあるチェックボックスをオンにしないでください。ここでは、StackBlitz のプレビューペインを使用します。
[アプリを登録] をクリックします。
依存関係は Stackblitz によって管理されるため、コンソールに表示される npm install firebase ステップはスキップできます。
Firebase 構成オブジェクトをクリップボードにコピーします。
[コンソールに進む] をクリックして、Firebase 構成オブジェクトをアプリに追加します。
StackBlitz に戻り、index.js ファイルに移動します。
Add Firebase project configuration object here コメント行を見つけて、コメントのすぐ下に構成スニペットを貼り付けます。

initializeApp 関数呼び出しを追加し、独自の Firebase プロジェクト構成を使用して Firebase を設定します。

// ...
// Add Firebase project configuration object here
const firebaseConfig = {
  apiKey: "random-unique-string",
  authDomain: "your-projectId.firebaseapp.com",
  databaseURL: "https://your-projectId.firebaseio.com",
  projectId: "your-projectId",
  storageBucket: "your-projectId.appspot.com",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
initializeApp(firebaseConfig);

6. ユーザーログインを追加する（RSVP）

アプリに Firebase が追加されたので、Firebase Authentication を使用してユーザーを登録する出欠確認ボタンを設定できます。

ユーザーにメールアドレスでログインするよう求める出欠確認ボタンが必要です。そのためには、FirebaseUI を出欠確認ボタンに接続します。FirebaseUI は、Firebase Auth の上にビルド済み UI を提供するライブラリです。

FirebaseUI には、次の 2 つのことを行う構成（ドキュメントのオプションを参照）が必要です。

メール/パスワードのログイン方法を使用することを FirebaseUI に指示します。
ログイン成功のコールバックを処理し、リダイレクトを回避するために false を返します。シングルページウェブアプリを作成しているので、ページを更新したくありません。

FirebaseUI Auth を初期化するコードを追加する

StackBlitz で index.js ファイルに移動します。

上部で firebase/auth インポートステートメントを見つけ、次のように getAuth と EmailAuthProvider を追加します。

// ...
// Add the Firebase products and methods that you want to use
import { getAuth, EmailAuthProvider } from 'firebase/auth';

import {} from 'firebase/firestore';

次のように、initializeApp の直後に auth オブジェクトへの参照を保存します。
```
initializeApp(firebaseConfig);
auth = getAuth();
```
FirebaseUI 構成が開始コードですでに指定されていることに注目してください。メール認証プロバイダを使用するようにすでに設定されています。

index.js の main() 関数の最後に、次のように FirebaseUI 初期化ステートメントを追加します。

async function main() {
  // ...

  // Initialize the FirebaseUI widget using Firebase
  const ui = new firebaseui.auth.AuthUI(auth);
}
main();

HTML への出欠確認ボタンの追加

StackBlitz で index.html ファイルに移動します。
次の例に示すように、出欠確認ボタンの HTML を event-details-container 内に追加します。

この Codelab では、すでに index.js ファイルにこれらの ID のフックがあるため、以下に示すものと同じ id 値を使用してください。

index.html ファイルには、ID が firebaseui-auth-container のコンテナがあります。この ID を FirebaseUI に渡してログインを保持します。
```


<section id="event-details-container">
    
    
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>

```
アプリのプレビュー
RSVP ボタンにリスナーを設定し、FirebaseUI start 関数を呼び出します。これにより、ログインウィンドウを表示したいと FirebaseUI に伝えられます。

次のコードを index.js の main() 関数の一番下に追加します。
```
async function main() {
  // ...

  // Listen to RSVP button clicks
  startRsvpButton.addEventListener("click",
   () => {
        ui.start("#firebaseui-auth-container", uiConfig);
  });
}
main();
```

アプリへのログインをテストする

StackBlitz のプレビューウィンドウで、[RSVP] ボタンをクリックしてアプリにログインします。
- この Codelab ではメール確認の手順を設定していないため、任意のメールアドレスを使用できます（偽のメールアドレスでもかまいません）。
- 「auth/operation-not-allowed」または「The given sign-in provider is disabled for this Firebase project」というエラーメッセージが表示された場合は、Firebase コンソールでメール/パスワードをログインプロバイダとして有効にしてください。
アプリのプレビュー
Firebase コンソールの [Authentication] ダッシュボードに移動します。[ユーザー] タブに、アプリにログインするために入力したアカウント情報が表示されます。

UI に認証状態を追加する

次に、ログインしていることが UI に反映されていることを確認します。

ここでは、ユーザーのログインステータスが変わるたびに通知される Firebase Authentication の状態リスナーコールバックを使用します。現在ログインしているユーザーがいる場合、アプリは [出欠確認] ボタンを [ログアウト] ボタンに切り替えます。

StackBlitz で index.js ファイルに移動します。

上部で firebase/auth インポートステートメントを見つけ、次のように signOut と onAuthStateChanged を追加します。

// ...
// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {} from 'firebase/firestore';

main() 関数の最後に次のコードを追加します。

async function main() {
  // ...

  // Listen to the current Auth state
  onAuthStateChanged(auth, user => {
    if (user) {
      startRsvpButton.textContent = 'LOGOUT';
    } else {
      startRsvpButton.textContent = 'RSVP';
    }
  });
}
main();

ボタンリスナーで、現在のユーザーがいるかどうかを確認してログアウトします。これを行うには、現在の startRsvpButton.addEventListener を次のように置き換えます。

// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener('click', () => {
  if (auth.currentUser) {
    // User is signed in; allows user to sign out
    signOut(auth);
  } else {
    // No user is signed in; allows user to sign in
    ui.start('#firebaseui-auth-container', uiConfig);
  }
});

これで、アプリのボタンが [LOGOUT] になり、このボタンをクリックすると [RSVP] に戻ります。

アプリのプレビュー

このステップのスクリーンショット

7. Cloud Firestore にメッセージを書き込む

ユーザーがゲストに来ていることを知るのは素晴らしいことですが、ゲストにアプリで何か他のことをさせましょう。ゲストがゲストブックにメッセージを残せるとしたらどうでしょうか。参加したい理由や会いたい人について伝えることができます。

ユーザーがアプリで作成したチャットメッセージを保存するには、Cloud Firestore を使用します。

データモデル

Cloud Firestore は NoSQL データベースであり、データベースに格納されるデータはコレクション、ドキュメント、フィールド、サブコレクションに分割されます。チャットの各メッセージを、guestbook というトップレベルのコレクションにドキュメントとして保存します。

複数のメッセージドキュメントを含むゲストブックコレクションを示す Firestore データモデルの図

Firestore にメッセージを追加する

このセクションでは、ユーザーがデータベースに新しいメッセージを書き込む機能を追加します。まず、UI 要素（メッセージフィールドと送信ボタン）の HTML を追加します。次に、これらの要素をデータベースにフックするコードを追加します。

メッセージフィールドと送信ボタンの UI 要素を追加するには:

StackBlitz で index.html ファイルに移動します。

guestbook-container を見つけ、次の HTML を追加して、メッセージの入力フィールドと送信ボタンを含むフォームを作成します。

<!-- ... -->

 <section id="guestbook-container">
   <h2>Discussion</h2>

   <form id="leave-message">
     <label>Leave a message: </label>
     <input type="text" id="message">
     <button type="submit">
       <i class="material-icons">send</i>
       <span>SEND</span>
     </button>
   </form>

 </section>

<!-- ... -->

アプリのプレビュー

このステップのスクリーンショット

ユーザーが [送信] ボタンをクリックすると、以下のコードスニペットがトリガーされます。メッセージ入力フィールドの内容をデータベースの guestbook コレクションに追加します。具体的には、addDoc メソッドはメッセージコンテンツを guestbook コレクションの新しいドキュメント（自動生成された ID を持つ）に追加します。

StackBlitz で index.js ファイルに移動します。

上部で firebase/firestore インポートステートメントを見つけ、次のように getFirestore、addDoc、collection を追加します。

// ...

// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {
  getFirestore,
  addDoc,
  collection
} from 'firebase/firestore';

次に、initializeApp の直後に Firestore db オブジェクトへの参照を保存します。
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

main() 関数の最後に、次のコードを追加します。

auth.currentUser.uid は、Firebase Authentication がすべてのログインユーザーに提供する、自動生成された一意の ID への参照です。

async function main() {
  // ...

  // Listen to the form submission
  form.addEventListener('submit', async e => {
    // Prevent the default form redirect
    e.preventDefault();
    // Write a new message to the database collection "guestbook"
    addDoc(collection(db, 'guestbook'), {
      text: input.value,
      timestamp: Date.now(),
      name: auth.currentUser.displayName,
      userId: auth.currentUser.uid
    });
    // clear message input field
    input.value = '';
    // Return false to avoid redirect
    return false;
  });
}
main();

ログイン中のユーザーにのみゲストブックを表示する

ゲストのチャットは誰にも見られないようにする必要があります。チャットを保護する方法の 1 つは、ログインしているユーザーのみがゲストブックを閲覧できるようにすることです。とはいえ、実際のアプリでは Firebase セキュリティルールを使用してデータベースを保護することも必要です。（セキュリティルールについては、この Codelab で後ほど詳しく説明します）。

StackBlitz で index.js ファイルに移動します。

onAuthStateChanged リスナーを編集して、ゲストブックの表示と非表示を切り替えます。

// ...

// Listen to the current Auth state
onAuthStateChanged(auth, user => {
  if (user) {
    startRsvpButton.textContent = 'LOGOUT';
    // Show guestbook to logged-in users
    guestbookContainer.style.display = 'block';
  } else {
    startRsvpButton.textContent = 'RSVP';
    // Hide guestbook for non-logged-in users
    guestbookContainer.style.display = 'none';
  }
});

メッセージの送信をテストする

アプリにログインしていることを確認します。
「こんにちは」などのメッセージを入力し、[送信] をクリックします。

この操作により、メッセージが Cloud Firestore データベースに書き込まれます。ただし、まだデータの取得を実装する必要があるため、実際のウェブアプリにはまだメッセージは表示されません。これを次に行います。

新しく追加されたメッセージは Firebase コンソールに表示されます。

Firebase コンソールの Firestore Database ダッシュボードに、新しく追加したメッセージを含む guestbook コレクションが表示されます。メッセージを送信し続ける場合、ゲストブックコレクションには次のような多数のドキュメントが含まれます。

Firebase コンソール

このステップのスクリーンショット

8. メッセージを読む

メッセージを同期する

ゲストがデータベースにメッセージを書き込めるのは素晴らしいことですが、まだアプリで確認することはできません。

メッセージを表示するには、データが変更されたときにトリガーされるリスナーを追加してから、新しいメッセージを表示する UI 要素を作成する必要があります。

アプリから新たに追加されたメッセージをリッスンするコードを追加します。まず、メッセージを表示するセクションを HTML に追加します。

StackBlitz で index.html ファイルに移動します。

guestbook-container に、ID が guestbook の新しいセクションを追加します。

<!-- ... -->

  <section id="guestbook-container">
   <h2>Discussion</h2>

   <form><!-- ... --></form>

   <section id="guestbook"></section>

 </section>

<!-- ... -->

次に、データに対する変更をリッスンするリスナーを登録します。

StackBlitz で index.js ファイルに移動します。
上部で firebase/firestore インポートステートメントを見つけ、次のように query、orderBy、onSnapshot を追加します。
```
// ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';
```

main() 関数の最後に次のコードを追加して、データベース内のすべてのドキュメント（ゲストブックメッセージ）をループ処理します。このコードの内容について詳しくは、スニペットの下の情報をご覧ください。

async function main() {
  // ...

  // Create query for messages
  const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
  onSnapshot(q, snaps => {
    // Reset page
    guestbook.innerHTML = '';
    // Loop through documents in database
    snaps.forEach(doc => {
      // Create an HTML entry for each document and add it to the chat
      const entry = document.createElement('p');
      entry.textContent = doc.data().name + ': ' + doc.data().text;
      guestbook.appendChild(entry);
    });
  });
}
main();

データベース内のメッセージをリッスンするために、collection 関数を使用して特定のコレクションに対するクエリを作成しました。上記のコードは、チャットメッセージが保存されている guestbook コレクションの変更をリッスンします。また、メッセージは日付順に並べられ、orderBy('timestamp', 'desc') を使用して最新のメッセージが一番上に表示されます。

onSnapshot 関数は、使用するクエリとコールバック関数の 2 つのパラメータを受け取ります。クエリに一致するドキュメントに変更があると、コールバック関数がトリガーされます。これは、メッセージが削除、変更、または追加された場合などです。詳細については、Cloud Firestore のドキュメントをご覧ください。

メッセージの同期をテストする

Cloud Firestore は、データベースに登録されているクライアントとデータを自動的かつ瞬時に同期します。

データベースに先ほど作成したメッセージがアプリに表示されます。新しいメッセージを自由に書き込んでください。すぐに表示されるはずです。
ワークスペースを複数のウィンドウやタブで開くと、メッセージはタブ間でリアルタイムで同期されます。
（省略可）Firebase コンソールの [データベース] セクションで、メッセージを手動で削除、変更、追加してみてください。変更内容は UI に表示されます。

これで完了です。アプリで Cloud Firestore ドキュメントを読んでいます。

アプリのプレビュー

このステップのスクリーンショット

9. 基本的なセキュリティルールを設定する

最初に、テストモードを使用するように Cloud Firestore をセットアップしました。つまり、データベースは読み取りと書き込みのためにオープン状態になっています。ただし、テストモードは開発のごく初期の段階でのみ使用してください。ベストプラクティスとして、アプリの開発時にデータベースにセキュリティルールを設定することをおすすめします。セキュリティは、アプリの構造と動作に不可欠な要素です。

セキュリティルールを使用すると、データベース内のドキュメントとコレクションへのアクセスを制御できます。柔軟なルールの構文を使用すると、データベース全体へのすべての書き込みから特定のドキュメントに対するオペレーションまで、あらゆるオペレーションに一致するルールを作成できます。

Cloud Firestore のセキュリティルールは Firebase コンソールで記述できます。

Firebase コンソールの [構築] セクションで [Firestore Database] をクリックし、[ルール] タブを選択します（またはこちらをクリックして、[ルール] タブに直接移動します）。
次のデフォルトのセキュリティルールが表示されます。公開アクセスの制限は本日から数週間後です。

このステップのスクリーンショット

コレクションを特定する

まず、アプリがデータを書き込むコレクションを特定します。

既存の match /{document=**} 句を削除します。ルールは次のようになります。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}

match /databases/{database}/documents で、保護するコレクションを特定します。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

セキュリティルールを追加する

各ゲストブックドキュメントのフィールドとして認証 UID を使用しているため、認証 UID を取得して、ドキュメントに書き込もうとするユーザー全員が認証 UID と一致することを確認できます。

以下のように、読み取りルールと書き込みルールをルールセットに追加します。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

[公開] をクリックして新しいルールをデプロイします。ゲストブックの場合、メッセージ（どのようなメッセージでも可）を読むことができるのはログインしたユーザーのみですが、メッセージを作成するにはユーザー ID を使用する必要があります。また、メッセージの編集や削除もできません。

確認ルールを追加する

データ検証を追加して、想定されるすべてのフィールドがドキュメントに存在することを確認します。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

[公開] をクリックして新しいルールをデプロイします。

リスナーをリセットする

現在は認証されたユーザーのみにログインが許可されるため、ゲストブックの firestore クエリを Authentication リスナー内に移動する必要があります。そうしないと、権限エラーが発生し、ユーザーがログアウトしたときにアプリの接続が解除されます。

StackBlitz で index.js ファイルに移動します。

ゲストブックコレクションの onSnapshot リスナーを subscribeGuestbook という新しい関数に pull します。また、onSnapshot 関数の結果を guestbookListener 変数に代入します。

Firestore の onSnapshot リスナーは、後でスナップショットリスナーをキャンセルするために使用できる登録解除関数を返します。

// ...
// Listen to guestbook updates
function subscribeGuestbook() {
  const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
  guestbookListener = onSnapshot(q, snaps => {
    // Reset page
    guestbook.innerHTML = '';
    // Loop through documents in database
    snaps.forEach(doc => {
      // Create an HTML entry for each document and add it to the chat
      const entry = document.createElement('p');
      entry.textContent = doc.data().name + ': ' + doc.data().text;
      guestbook.appendChild(entry);
    });
  });
}

下に unsubscribeGuestbook という新しい関数を追加します。guestbookListener 変数が null でないかどうかを確認し、関数を呼び出してリスナーをキャンセルします。
```
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook() {
  if (guestbookListener != null) {
    guestbookListener();
    guestbookListener = null;
  }
}
```

最後に、新しい関数を onAuthStateChanged コールバックに追加します。

if (user) の最後に subscribeGuestbook() を追加します。

else ステートメントの最後に unsubscribeGuestbook() を追加します。

// ...
// Listen to the current Auth state
onAuthStateChanged(auth, user => {
  if (user) {
    startRsvpButton.textContent = 'LOGOUT';
    // Show guestbook to logged-in users
    guestbookContainer.style.display = 'block';
    // Subscribe to the guestbook collection
    subscribeGuestbook();
  } else {
    startRsvpButton.textContent = 'RSVP';
    // Hide guestbook for non-logged-in users
    guestbookContainer.style.display = 'none';
    // Unsubscribe from the guestbook collection
    unsubscribeGuestbook();
  }
});

10. ボーナスステップ: 学習した内容の実践

参加者の出欠確認の状況を記録する

現時点では、イベントに興味があるユーザーはチャットを開始できるだけです。また、相手がチャットに参加しているかどうかを知る唯一の方法は、そのユーザーがチャットに投稿した場合です。予定を整理して、参加人数を知らせましょう。

イベントへの参加を希望する人を登録し、参加人数のカウントを収集する切り替えボタンを追加します。

StackBlitz で index.html ファイルに移動します。

guestbook-container に、次のように [はい] と [いいえ] ボタンのセットを追加します。

<!-- ... -->
  <section id="guestbook-container">
   <h2>Are you attending?</h2>
     <button id="rsvp-yes">YES</button>
     <button id="rsvp-no">NO</button>

   <h2>Discussion</h2>

   <!-- ... -->

 </section>
<!-- ... -->

アプリのプレビュー

このステップのスクリーンショット

次に、ボタンのクリックに対するリスナーを登録します。ユーザーが [はい] をクリックしたら、ユーザーの認証 UID を使用してレスポンスをデータベースに保存します。

StackBlitz で index.js ファイルに移動します。

上部で firebase/firestore インポートステートメントを見つけ、次のように doc、setDoc、where を追加します。

// ...
// Add the Firebase products and methods that you want to use
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot,
  doc,
  setDoc,
  where
} from 'firebase/firestore';

main() 関数の最後に次のコードを追加して、出欠確認ステータスをリッスンします。

async function main() {
  // ...

  // Listen to RSVP responses
  rsvpYes.onclick = async () => {
  };
  rsvpNo.onclick = async () => {
  };
}
main();

次に、attendees という新しいコレクションを作成し、いずれかの出欠確認ボタンがクリックされた場合にドキュメント参照を登録します。クリックするボタンに応じて、その参照を true または false に設定します。

まず、rsvpYes の場合:

// ...
// Listen to RSVP responses
rsvpYes.onclick = async () => {
  // Get a reference to the user's document in the attendees collection
  const userRef = doc(db, 'attendees', auth.currentUser.uid);

  // If they RSVP'd yes, save a document with attendi()ng: true
  try {
    await setDoc(userRef, {
      attending: true
    });
  } catch (e) {
    console.error(e);
  }
};

次に rsvpNo についても同じですが、値は false にします。

rsvpNo.onclick = async () => {
  // Get a reference to the user's document in the attendees collection
  const userRef = doc(db, 'attendees', auth.currentUser.uid);

  // If they RSVP'd yes, save a document with attending: true
  try {
    await setDoc(userRef, {
      attending: false
    });
  } catch (e) {
    console.error(e);
  }
};

セキュリティルールを更新する

すでに設定されているルールがあるため、ボタンを使用して追加する新しいデータは拒否されます。

`attendees` コレクションへの追加を許可する

attendees コレクションへの追加を許可するように、ルールを更新する必要があります。

attendees コレクションでは、認証 UID をドキュメント名として使用したため、それを取得して、送信者の uid が作成中のドキュメントと同じであることを確認できます。参加者リストには個人データがないため、すべてのユーザーに参加者リストの閲覧を許可しますが、リストを更新できるのは作成者のみです。
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}
```
[公開] をクリックして新しいルールをデプロイします。

確認ルールを追加する

データ検証ルールをいくつか追加して、想定するすべてのフィールドがドキュメントに存在することを確認します。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

忘れずに [公開] をクリックしてルールをデプロイしてください。

（省略可）ボタンのクリック結果を確認できるようになりました。Firebase コンソールで Cloud Firestore ダッシュボードに移動します。

出欠確認の状況を確認する

回答を録画したので、今度は参加者を確認して UI に反映しましょう。

StackBlitz で index.html ファイルに移動します。

description-container に、ID が number-attending の新しい要素を追加します。

<!-- ... -->

 <section id="description-container">
     <!-- ... -->
     <p id="number-attending"></p>
 </section>

<!-- ... -->

次に、attendees コレクションにリスナーを登録し、YES レスポンスの数をカウントします。

StackBlitz で index.js ファイルに移動します。

main() 関数の最後に次のコードを追加して、出欠確認ステータスをリッスンし、[はい] のクリック数をカウントするようにします。

async function main() {
  // ...

  // Listen for attendee list
  const attendingQuery = query(
    collection(db, 'attendees'),
    where('attending', '==', true)
  );
  const unsubscribe = onSnapshot(attendingQuery, snap => {
    const newAttendeeCount = snap.docs.length;
    numberAttending.innerHTML = newAttendeeCount + ' people going';
  });
}
main();

最後に、現在のステータスに対応するボタンをハイライト表示します。

現在の認証 UID に attendees コレクションのエントリがあるかどうかを確認する関数を作成し、ボタンクラスを clicked に設定します。

// ...
// Listen for attendee list
function subscribeCurrentRSVP(user) {
  const ref = doc(db, 'attendees', user.uid);
  rsvpListener = onSnapshot(ref, doc => {
    if (doc && doc.data()) {
      const attendingResponse = doc.data().attending;

      // Update css classes for buttons
      if (attendingResponse) {
        rsvpYes.className = 'clicked';
        rsvpNo.className = '';
      } else {
        rsvpYes.className = '';
        rsvpNo.className = 'clicked';
      }
    }
  });
}

また、サブスクライブを解除する関数を作成しましょう。これはユーザーのログアウト時に使用されます。

// ...
function unsubscribeCurrentRSVP() {
  if (rsvpListener != null) {
    rsvpListener();
    rsvpListener = null;
  }
  rsvpYes.className = '';
  rsvpNo.className = '';
}

Authentication リスナーから関数を呼び出します。

// ...
// Listen to the current Auth state
  // Listen to the current Auth state
  onAuthStateChanged(auth, user => {
    if (user) {
      startRsvpButton.textContent = 'LOGOUT';
      // Show guestbook to logged-in users
      guestbookContainer.style.display = 'block';

      // Subscribe to the guestbook collection
      subscribeGuestbook();
      // Subscribe to the user's RSVP
      subscribeCurrentRSVP(user);
    } else {
      startRsvpButton.textContent = 'RSVP';
      // Hide guestbook for non-logged-in users
      guestbookContainer.style.display = 'none'
      ;
      // Unsubscribe from the guestbook collection
      unsubscribeGuestbook();
      // Unsubscribe from the guestbook collection
      unsubscribeCurrentRSVP();
    }
  });

複数のユーザーでログインしてみると、[はい] ボタンをクリックするたびにカウントが増えます。

アプリのプレビュー

このステップのスクリーンショット

11. お疲れさまでした

Firebase を使用して、インタラクティブなリアルタイムウェブアプリケーションを構築できました。

学習した内容

Firebase Authentication
FirebaseUI
Cloud Firestore
Firebase セキュリティルール

次のステップ

Firebase デベロッパーワークフローの詳細アプリを完全にローカルでテストして実行する方法については、Firebase エミュレータの Codelab をご覧ください。
他の Firebase プロダクトの詳細については、ユーザーがアップロードした画像ファイルを保存する場合は、または、ユーザーに通知を送信しますか？Firebase ウェブ Codelab の Codelab では、ウェブ向け Firebase プロダクトを多数紹介していますので、そちらをご確認ください。
Cloud Firestore について詳しくは、たとえば、サブコレクションとトランザクションについて知りたい場合、Cloud Firestore についてより詳しく説明する Codelab については、Cloud Firestore ウェブ Codelab をご覧ください。または、Cloud Firestore についての YouTube シリーズをご覧ください。

詳細

Firebase サイト: firebase.google.com
Firebase の YouTube チャンネル

いかがでしたか？

皆様からのご意見をお待ちしております。こちらの（簡単な）フォームにご記入ください。

ウェブ向け Firebase を理解する

1. 概要

ラボの内容

必要なもの

2. 開始用コードを取得する

3. 予定情報を編集する

アプリのプレビュー

4. Firebase プロジェクトを作成して設定する

Firebase プロジェクトを作成する

コンソールで Firebase プロダクトを有効にして設定する

Firebase Authentication でメールのログインを有効にする

Cloud Firestore を設定する

5. Firebase を追加して構成する

Firebase ライブラリを追加する

Firebase ウェブアプリを Firebase プロジェクトに追加する

6. ユーザー ログインを追加する（RSVP）

メールログインと FirebaseUI でユーザーを認証する

FirebaseUI Auth を初期化するコードを追加する

HTML への出欠確認ボタンの追加

アプリへのログインをテストする

UI に認証状態を追加する

アプリのプレビュー

7. Cloud Firestore にメッセージを書き込む

データモデル

Firestore にメッセージを追加する

アプリのプレビュー

ログイン中のユーザーにのみゲストブックを表示する

メッセージの送信をテストする

Firebase コンソール

8. メッセージを読む

メッセージを同期する

メッセージの同期をテストする

アプリのプレビュー

9. 基本的なセキュリティ ルールを設定する

コレクションを特定する

セキュリティ ルールを追加する

確認ルールを追加する

リスナーをリセットする

10. ボーナス ステップ: 学習した内容の実践

参加者の出欠確認の状況を記録する

アプリのプレビュー

セキュリティ ルールを更新する

attendees コレクションへの追加を許可する

確認ルールを追加する

出欠確認の状況を確認する

アプリのプレビュー

11. お疲れさまでした

学習した内容

次のステップ

詳細

いかがでしたか？

6. ユーザーログインを追加する（RSVP）

9. 基本的なセキュリティルールを設定する

セキュリティルールを追加する

10. ボーナスステップ: 学習した内容の実践

セキュリティルールを更新する

`attendees` コレクションへの追加を許可する