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

ウェブ向け Firebase を理解する

1. 概要

この Codelab では、インタラクティブなウェブアプリケーションを作成するための Firebase の基本を学びます。複数の Firebase プロダクトを使用して、イベントの RSVP とゲストブックのチャットアプリを作成します。

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

ラボの内容

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

必要なもの

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

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

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

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

開始コードについては、次の URL にアクセスしてください。https://stackblitz.com/edit/firebase-gtk-web-start
StackBlitz ページの上部にある [Fork] をクリックします。

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

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

3. イベント情報を編集する

この Codelab の開始用資料には、ウェブアプリの構造が用意されています。これには、いくつかのスタイルシートと、アプリ用の 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 コンソールの左側のパネルで、[Build] > [Authentication] をクリックします。[開始する] をクリックします。認証ダッシュボードが表示されます。ここでは、登録済みのユーザーの確認、ログインプロバイダの設定、設定の管理を行うことができます。
[ログイン方法] タブを選択します（または、ここをクリックしてタブに直接移動します）。
プロバイダオプションで [メール/パスワード] をクリックし、スイッチを [有効にする] に切り替えて、[保存] をクリックします。

Cloud Firestore を設定する

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

Firebase プロジェクトで Cloud Firestore を設定する方法は次のとおりです。

Firebase コンソールの左側のパネルで [Build] を開き、[Firestore データベース] を選択します。
[データベースを作成] をクリックします。
[データベース ID] は (default) のままにします。
データベースのロケーションを選択し、[次へ] をクリックします。
実際のアプリの場合は、ユーザーに近いロケーションを選択します。
[テストモードで開始] をクリックします。セキュリティルールに関する免責条項を確認します。
この Codelab の後半で、セキュリティルールを追加してデータを保護します。データベースのセキュリティルールを追加せずに、アプリを配布または公開しないでください。
[作成] をクリックします。

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

Firebase プロジェクトが作成され、一部のサービスが有効になったので、Firebase を使用することと、使用する Firebase プロジェクトをコードに指示する必要があります。

Firebase ライブラリを追加する

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

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

このアプリをビルドするには、Firebase Authentication、FirebaseUI、Cloud Firestore のライブラリを使用します。この Codelab では、次のインポートステートメントが 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 ウェブアプリを作成します。
アプリを「ウェブアプリ」というニックネームで登録します。
この 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.firebasestorage.app",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
initializeApp(firebaseConfig);

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

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

メールアドレスでログインするようユーザーに求める RSVP ボタンが必要です。これを行うには、FirebaseUI を RSVP ボタンに接続します。FirebaseUI は、Firebase Auth 上に構築済みの UI を提供するライブラリです。

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

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

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

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

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

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

import {} from 'firebase/firestore';

initializeApp の直後に、認証オブジェクトへの参照を保存します。次に例を示します。
```
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 に RSVP ボタンを追加する

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

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

index.html ファイルには、ID が firebaseui-auth-container のコンテナがあることに注意してください。これは、ログインを保持するために FirebaseUI に渡す ID です。
```


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

```
アプリのプレビュー
RSVP ボタンにリスナーを設定し、FirebaseUI の開始関数を呼び出します。これにより、ログインウィンドウを表示するように 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 コンソールの認証ダッシュボードに移動します。[ユーザー] タブに、アプリへのログイン時に入力したアカウント情報が表示されます。

認証状態を UI に追加する

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

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

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

上部で firebase/auth import ステートメントを見つけ、次のように 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);
  }
});

これで、アプリのボタンに [ログアウト] と表示され、クリックすると [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 メソッドは、メッセージコンテンツを新しいドキュメント（自動生成された ID を持つ）に追加し、guestbook コレクションに追加します。

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

上部で firebase/firestore import ステートメントを見つけ、次のように 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';

次に、Firestore db オブジェクトへの参照を initializeApp の直後に保存します。
```
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();

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

ゲストのチャットを誰でも見ることができるようにしたくない。チャットを保護するためにできることの一つは、ログインしたユーザーのみがゲストブックを閲覧できるようにすることです。ただし、独自のアプリの場合は、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';
  }
});

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

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

このアクションにより、メッセージが 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 import ステートメントを見つけ、次のように 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 コンソールの [Database] で直接、メッセージを手動で削除、変更したり新しいメッセージを追加したりしてみてください。これらの変更も UI に反映されるはずです。

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

アプリのプレビュー

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

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

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

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

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

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

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

コレクションを特定する

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

既存の 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.
  }
}

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

各ゲストブックドキュメントで Authentication UID をフィールドとして使用したため、Authentication UID を取得して、ドキュメントへの書き込みを試みるすべてのユーザーに一致する Authentication 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 クエリを認証リスナー内に移動する必要があります。そうしないと、権限エラーが発生し、ユーザーがログアウトするとアプリの接続が切断されます。

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

ゲストブックコレクションの onSnapshot リスナーを subscribeGuestbook という新しい関数に引き込みます。また、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 に、[YES] ボタンと [NO] ボタンのセットを追加します。

<!-- ... -->
  <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 import ステートメントを見つけ、次のように 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() 関数の一番下に、次のコードを追加して RSVP ステータスをリッスンします。

async function main() {
  // ...

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

次に、attendees という新しいコレクションを作成し、どちらかの RSVP ボタンがクリックされた場合にドキュメント参照を登録します。クリックされたボタンに応じて、その参照を 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);
  }
};

にします。

// ...
// 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() 関数の一番下に、次のコードを追加して RSVP ステータスをリッスンし、[YES] のクリック数をカウントします。

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();
    }
  });

複数のユーザーとしてログインし、[YES] ボタンを追加でクリックするたびにカウントが増加することを確認します。

アプリのプレビュー

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

11. 完了

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

学習した内容

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

次のステップ

Firebase デベロッパーワークフローの詳細を確認するアプリを完全にローカルでテストして実行する方法については、Firebase エミュレータの Codelab をご覧ください。
他の Firebase プロダクトの詳細については、こちらをご覧ください。ユーザーがアップロードした画像ファイルを保存したい場合などです。または、ユーザーに通知を送信しますか？ウェブ向けの Firebase プロダクトについて詳しく学ぶには、Firebase Web Codelab をご覧ください。
Cloud Firestore について詳しくは、以下をご覧ください。サブコレクションとトランザクションについて学びたい場合は、Cloud Firestore について詳しく学ぶには、Cloud Firestore ウェブコードラボをご覧ください。または、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 に RSVP ボタンを追加する

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

認証状態を UI に追加する

アプリのプレビュー

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

データモデル

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

アプリのプレビュー

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

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

Firebase コンソール

8. メッセージを読む

メッセージを同期する

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

アプリのプレビュー

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

コレクションを特定する

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

検証ルールを追加する

リスナーをリセットする

10. ボーナス ステップ: 学んだことを実践する

参加者の出欠確認ステータスを記録する

アプリのプレビュー

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

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

検証ルールを追加する

出欠確認のステータスを読み取る

アプリのプレビュー

11. 完了

学習した内容

次のステップ

詳細

結果はいかがでしたか？

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

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

10. ボーナスステップ: 学んだことを実践する

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

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