Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

WebとFirebaseの詳細

Firebaseを使用してWebアプリを開発しているときに、なじみのない概念や、プロジェクトの正しい決定を行うためにより多くの情報が必要な領域に遭遇する可能性があります。このページは、これらの質問に答えたり、詳細を知るためのリソースを紹介したりすることを目的としています。

このページでカバーされていないトピックについて質問がある場合は、私たちの1訪問オンラインコミュニティを。また、このページは定期的に新しいトピックで更新されるため、学習したいトピックが追加されているかどうかを確認してください。

SDKバージョン8および9

Firebaseは、Webアプリ用に2つのSDKバージョンを提供します。

  • バージョン8これはFirebaseは数年のために維持し、既存のFirebaseアプリケーションとWeb開発者にはよく知られていることをJavaScriptのインタフェースです。 Firebaseは1つのメジャーリリースサイクルの後にこのバージョンのサポートを削除するため、新しいアプリは代わりにバージョン9を採用する必要があります。
  • モジュラーバージョン9。このSDKは、次のような近代的なJavaScriptのビルドツールで還元SDKのサイズと大きな効率を提供モジュラーアプローチ紹介WebPACKのか、ロールアップを。

バージョン9は、アプリで使用されていないコードを取り除くビルドツールとうまく統合されます。これは「ツリーシェイク」と呼ばれるプロセスです。このSDKで構築されたアプリは、サイズのフットプリントが大幅に削減されるというメリットがあります。バージョン8はモジュールとして利用できますが、厳密にモジュール化された構造ではなく、同程度のサイズ縮小は提供されません。

バージョン9SDKの大部分はバージョン8と同じパターンに従いますが、コードの構成は異なります。一般に、バージョン8は名前空間とサービスパターンを対象としていますが、バージョン9は個別の機能を対象としています。例えば、バージョン8つのドット・チェーンなど、 firebaseApp.auth() 、単一によってバージョン9で置換されgetAuth()とる関数firebaseAppし、認証インスタンスを返します。

つまり、バージョン8以前で作成されたWebアプリは、バージョン9のモジュラーアプローチを利用するためにリファクタリングが必要です。 Firebaseは、その移行を容易にする互換ライブラリを提供します。参照アップグレードガイド詳細については、を。

何がサポートされていますか？

バージョン8とバージョン9のコードスタイルは異なりますが、Firebaseの機能とオプションは非常によく似ています。このガイドで詳しく説明するように、両方のSDKバージョンは、SDKを追加/インストールするためのいくつかのオプションとともにJavaScriptとNode.jsのバリアントをサポートしています。

SDKを追加する8.0（名前空間） 9.0（モジュラー）
npm
  • JavaScriptの場合
  • Node.jsの場合
  • JavaScriptの場合
  • Node.jsの場合
CDN（コンテンツ配信ネットワーク）
  • JavaScriptの場合
  • JavaScriptの場合
ホスティングURL
  • JavaScriptの場合
  • Node.jsの場合

詳細については、あなたのアプリケーションへのWeb SDKを追加する方法をしてFirebaseのWeb SDKは、変異体は、このページに後で。

新しいアプリのバージョン9

あなたはFirebaseとの新しい統合を開始している場合は、とき、あなたはバージョン9 SDKに選ぶことができます追加して、SDKを初期化します。

あなたのアプリを開発する際、あなたのコードが機能を中心に、主に開催されることに注意してください。バージョン9では、サービスが最初の引数として渡され、関数はサービスの詳細を使用して残りを実行します。例えば：

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

以上の実施例および詳細については、各製品領域のためのガイドとしてだけでなく、参照バージョン9参照ドキュメントを。

WebSDKをアプリに追加する方法

Firebaseは、Remote Config、FCMなどを含むほとんどのFirebase製品にJavaScriptライブラリを提供します。 Firebase SDKをWebアプリに追加する方法は、アプリで使用しているツール（モジュールバンドラーなど）、またはアプリがNode.jsなどの非ブラウザー環境で実行されているかどうかによって異なります。

あなたは、任意の追加することができます使用可能なライブラリをサポートする方法のうちの1つを介して、あなたのアプリに：

  • npm（モジュールバンドラーおよびNode.js用）
  • CDN（コンテンツ配信ネットワーク）

詳細な設定手順については、 JavaScriptのアプリケーションにFirebaseを追加します。このセクションの残りの部分には、使用可能なオプションから選択するのに役立つ情報が含まれています。

npm

Firebase npmパッケージ（ブラウザとNode.jsバンドルの両方を含む）をダウンロードすると、Firebase SDKのローカルコピーが提供されます。これは、Node.jsアプリ、React Native、Electronなどの非ブラウザアプリケーションに必要な場合があります。ダウンロードには、一部のパッケージのオプションとしてNode.jsとReactNativeのバンドルが含まれています。 Node.jsバンドルは、SSRフレームワークのサーバー側レンダリング（SSR）ステップに必要です。

バンドラのようなモジュールでNPMを使用してWebPACKのか、ロールアップ「ツリー・シェイク」の未使用コードに最適化オプションを提供し、大幅にアプリのサイズのフットプリントを減らすことができます対象polyfillsを、適用します。これらの機能を実装すると、構成とビルドチェーンが複雑になる可能性がありますが、さまざまな主流のCLIツールがそれを軽減するのに役立ちます。これらのツールは、角度、リアクト、 Vueの、次の、そして他の人を。

要約すれば：

  • 貴重なアプリサイズの最適化を提供します
  • モジュールを管理するための堅牢なツールが利用可能です
  • Node.jsを使用したSSRに必要

CDN（コンテンツ配信ネットワーク）

FirebaseのCDNに保存されているライブラリを追加することは、多くの開発者に馴染みのある単純なSDKセットアップ方法です。 CDNを使用してSDKを追加する場合、ビルドツールは必要ありません。また、ビルドチェーンは、モジュールバンドラーと比較して、よりシンプルで操作しやすい傾向があります。アプリのインストールサイズを特に気にせず、TypeScriptからのトランスパイルなどの特別な要件がない場合は、CDNが適しています。

要約すれば：

  • なじみのあるシンプルな
  • アプリのサイズが大きな問題ではない場合に適切
  • Webサイトがビルドツールを使用していない場合に適しています。

Firebase WebSDKの亜種

現在、Firebaseは2つのWebSDKバリアントを提供しています。

  • ブラウザで使用するすべてのFirebase機能をサポートするJavaScriptバンドル。
  • すべてではありませんが、多くのFirebase機能をサポートするクライアント側のNode.jsバンドル。リストを参照してください。サポートされる環境を。

これらのSDKバリアントはどちらも、Node.jsデスクトップやIoTアプリケーションなど、エンドユーザーアクセス用のWebアプリまたはクライアントアプリの構築を支援するように設計されています。あなたの目標は、使用します（サーバなど）、特権の環境からの管理アクセスを設定する場合はFirebase管理SDKを代わりに。

バンドラーとフレームワークによる環境検出

npmを使用してFirebaseWeb SDKをインストールすると、JavaScriptバージョンとNode.jsバージョンの両方がインストールされます。このパッケージは、アプリケーションに適切なバンドルを有効にするための詳細な環境検出を提供します。

Node.jsのは、あなたのコードが使用されている場合はrequire書類を、SDKには、ノード固有のバンドルを検索します。そうでない場合は、お使いのバンドラの設定が正しく右エントリポイントフィールドを検出するために考え出ししなければならないpackage.jsonファイル（例えば、 main 、 browser 、またはmodule ）。 SDKでランタイムエラーが発生した場合は、ご使​​用の環境に適したタイプのバンドルを優先するようにバンドラーが構成されていることを確認してください。

Firebase構成オブジェクトについて学ぶ

アプリでFirebaseを初期化するには、アプリのFirebaseプロジェクト構成を提供する必要があります。あなたはできるあなたのFirebase configオブジェクトを取得する任意の時点で。

  • ：我々は、特に以下の必要な「Firebaseオプション」、あなたのconfigオブジェクトを編集し、手動ではお勧めしませんapiKey 、 projectId 、およびappID 。これらの必須の「Firebaseオプション」の値が無効または欠落している状態でアプリを初期化すると、アプリのユーザーに重大な問題が発生する可能性があります。

  • あなたはFirebaseプロジェクトでGoogle Analyticsを有効にした場合、あなたのconfigオブジェクトは、フィールドが含まmeasurementId 。このフィールドの詳細情報ページを始める解析。

すべてのサービスが有効になっている構成オブジェクトの形式は次のとおりです（これらの値は自動的に入力されます）。

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

利用可能なライブラリ

追加のセットアップオプション

Firebase SDKの読み込みを遅らせる（CDNから）

ページ全体が読み込まれるまで、FirebaseSDKの組み込みを遅らせることができます。あなたがバージョン9つのCDNスクリプトを使用している場合は<script type="module">これはデフォルトの動作です。モジュールとしてバージョン8CDNスクリプトを使用している場合は、次の手順を実行して読み込みを延期します。

  1. 追加defer毎にフラグをscript次に、例えば、第二のスクリプトを使用してFirebaseの初期化を遅らせる、FirebaseのSDKのタグ：

    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

  2. 作成init-firebase.jsファイルを、そのファイルに次のものがあります。

    // TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

1つのアプリで複数のFirebaseプロジェクトを使用する

ほとんどの場合、Firebaseを初期化する必要があるのは単一のデフォルトアプリだけです。そのアプリからFirebaseにアクセスするには、次の2つの方法があります。

Webバージョン9

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();
app_default_init_options.js

Webバージョン8

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();
firebaseapp.js

ただし、複数のFirebaseプロジェクトに同時にアクセスする必要がある場合もあります。たとえば、あるFirebaseプロジェクトのデータベースからデータを読み取り、別のFirebaseプロジェクトにファイルを保存したい場合があります。または、2番目のプロジェクトを認証せずに、1つのプロジェクトを認証することもできます。

Firebase JavaScript SDKを使用すると、1つのアプリで複数のFirebaseプロジェクトを同時に初期化して使用でき、各プロジェクトは独自のFirebase構成情報を使用します。

Webバージョン9

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);
app_multi_project_init_options.js

Webバージョン8

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();
firebaseapp.js

開発用にローカルWebサーバーを実行する

ウェブアプリを構築している場合、Firebase JavaScript SDKの一部では、ローカルファイルシステムからではなくサーバーからウェブアプリを提供する必要があります。あなたは使用することができますFirebase CLIをローカルサーバを実行します。

アプリにFirebaseHostingを既に設定している場合は、以下のいくつかの手順をすでに完了している可能性があります。

ウェブアプリを提供するには、コマンドラインツールであるFirebaseCLIを使用します。

  1. する方法を学ぶためにFirebase CLIのドキュメントをご覧くださいCLIのインストールまたはその最新バージョンにアップデートを。

  2. Firebaseプロジェクトを初期化します。ローカルアプリディレクトリのルートから次のコマンドを実行します。

    firebase init

  3. ローカルサーバーを起動発展のために。ローカルアプリディレクトリのルートから次のコマンドを実行します。

    firebase serve

Firebase JavaScriptSDKのオープンソースリソース

Firebaseはオープンソース開発をサポートしており、コミュニティの貢献とフィードバックを奨励しています。

Firebase JavaScript SDK

ほとんどのFirebaseのJavaScriptのSDKは、当社の公共の場でのオープンソースライブラリとして開発されているFirebase GitHubのリポジトリ。

クイックスタートサンプル

Firebaseは、Web上のほとんどのFirebaseAPIのクイックスタートサンプルのコレクションを維持しています。私たちの公共の場でこれらのクイックスタートを探すFirebase GitHubのクイックスタートリポジトリ。これらのクイックスタートは、FirebaseSDKを使用するためのサンプルコードとして使用できます。