Check out what’s new from Firebase at Google I/O 2022. Learn more

WebとFirebaseの詳細

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

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

SDKバージョン8および9

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

  • バージョン8。これは、Firebaseが数年間維持しているJavaScriptインターフェースであり、既存のFirebaseアプリを使用するWeb開発者にはおなじみです。 Firebaseはメジャーリリースサイクルの1つ後にこのバージョンのサポートを削除するため、新しいアプリは代わりにバージョン9を採用する必要があります。
  • モジュラーバージョン9 。このSDKは、 WebpackやRollupなどの最新のJavaScriptビルドツールを使用してSDKサイズを縮小し、効率を高めるモジュラーアプローチを導入しています。

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

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

つまり、バージョン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の場合

詳細については、このページで後述する「アプリにWebSDKを追加する方法」および「 FirebaseWebSDKバリアント」を参照してください。

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

Firebaseとの新しい統合を開始する場合は、SDKを追加して初期化するときにバージョン9SDKをオプトインできます。

アプリを開発するときは、コードが主に関数を中心に編成されることに注意してください。バージョン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などの非ブラウザー環境で実行されているかどうかによって異なります。

サポートされている方法のいずれかを使用して、使用可能なライブラリをアプリに追加できます。

  • 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やRollupなどのモジュールバンドラーで使用すると、未使用のコードを「ツリーシェイク」してターゲットポリフィルを適用するための最適化オプションが提供され、アプリのサイズフットプリントを大幅に削減できます。これらの機能を実装すると、構成とビルドチェーンが複雑になる可能性がありますが、さまざまな主流のCLIツールがそれを軽減するのに役立ちます。これらのツールには、 Angular 、 React 、 Vue 、 Nextなどがあります。

要約すれば：

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

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

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

要約すれば：

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

FirebaseWebSDKの亜種

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

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

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

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

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

コードでrequireステートメントを使用している場合、SDKはノード固有のバンドルを検出します。それ以外の場合は、 package.jsonファイル（たとえば、 main 、 browser 、 module ）の正しいエントリポイントフィールドを検出するために、バンドラーの設定を正しく計算する必要があります。 SDKでランタイムエラーが発生した場合は、ご使​​用の環境に適したタイプのバンドルを優先するようにバンドラーが構成されていることを確認してください。

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

アプリでFirebaseを初期化するには、アプリのFirebaseプロジェクト構成を提供する必要があります。 Firebase設定オブジェクトはいつでも取得できます。

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

  • FirebaseプロジェクトでGoogleAnalyticsを有効にした場合、設定オブジェクトにはフィールドmeasurementIdが含まれます。このフィールドの詳細については、アナリティクスのスタートページをご覧ください。

  • FirebaseWebアプリの作成後にGoogleAnalyticsまたはRealtimeDatabaseを有効にする場合は、アプリで使用するFirebase構成オブジェクトが関連する構成値（それぞれmeasurementIdとdatabaseURL ）で更新されていることを確認してください。 Firebase設定オブジェクトはいつでも取得できます。

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

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

利用可能なライブラリ

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

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

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

  1. Firebase SDKの各scriptタグにdeferフラグを追加してから、2番目のスクリプトを使用してFirebaseの初期化を延期します。次に例を示します。

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

<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/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を初期化する必要があるのは単一のデフォルトアプリだけです。そのアプリから2つの同等の方法でFirebaseにアクセスできます。

Web version 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 version 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を使用すると、単一のアプリで複数のFirebaseプロジェクトを同時に初期化して使用でき、各プロジェクトは独自のFirebase構成情報を使用します。

Web version 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 version 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の一部では、ローカルファイルシステムからではなくサーバーからウェブアプリを提供する必要があります。 FirebaseCLIを使用してローカルサーバーを実行できます。

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

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

  1. CLIをインストールする方法、または最新バージョンに更新する方法については、FirebaseCLIのドキュメントにアクセスしてください。

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

    firebase init

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

    firebase serve

FirebaseJavaScriptSDKのオープンソースリソース

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

Firebase JavaScript SDK

ほとんどのFirebaseJavaScriptSDKは、公開されているFirebaseGitHubリポジトリでオープンソースライブラリとして開発されています。

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

Firebaseは、Web上のほとんどのFirebaseAPIのクイックスタートサンプルのコレクションを維持しています。公開されているFirebaseGitHubクイックスタートリポジトリでこれらのクイックスタートを見つけてください。これらのクイックスタートは、FirebaseSDKを使用するためのサンプルコードとして使用できます。