ウェブと Firebase の詳細

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

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

SDK バージョン 8 および 9

FirebaseはWebアプリ用に2つのSDKバージョンを提供しており、そのうちの1つは現在ベータ版です。

• バージョン8。これは、Firebaseが数年間維持しているJavaScriptインターフェースであり、既存のFirebaseアプリを使用するWeb開発者にはなじみがあります。
• モジュラーバージョン9（ベータ版） 。この SDK は、 WebpackやRollupなどの最新の JavaScript ビルド ツールを使用して、SDK のサイズを縮小し、効率を向上させるモジュラー アプローチを導入しています。

バージョン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のバリアントをサポートしています。

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

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

Firebase との新しい統合を開始する場合は、SDKを追加して初期化するときに、バージョン 9 ベータ版 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アプリに追加する方法は、アプリにFirebase Hostingを使用することを選択したかどうか、アプリで使用しているツール（モジュールバンドラーなど）、またはアプリがブラウザー以外で実行されているかどうかによって異なります。 Node.jsなどの環境。

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

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

各メソッドの詳細な設定手順については、JavaScriptアプリへのFirebaseの追加をご覧ください。このセクションの残りの部分には、使用可能なオプションから選択するのに役立つ情報が含まれています。

npm

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

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

要約すれば：

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

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

Firebase の CDN に保存されているライブラリを追加することは、多くのデベロッパーにとってなじみのある簡単な SDK セットアップ方法です。 CDN を使用して SDK を追加すると、ビルド ツールは必要なくなり、ビルド チェーンは、モジュール バンドラーに比べて単純で作業が容易になる傾向があります。アプリのインストール サイズを特に気にせず、TypeScript からのトランスパイルなどの特別な要件がない場合は、CDN が適しています。

要約すれば：

• 身近でシンプル
• アプリのサイズが重要でない場合に適しています
• Webサイトがビルドツールを使用していない場合に適しています。

ホスティングURL

Firebase Hostingは、同じオリジンからファイルを読み込むことでパフォーマンスを向上させる予約済みURLを提供します。アプリでFirebaseHostingをすでに使用している、または使用する予定がある場合は、ホスティングURLを介してJavaScript SDKを追加し、このパフォーマンスの向上を活用できます。さらに、このメソッドは SDK の自動初期化をサポートしているため、開発、ステージング、本番などの複数の環境の管理を簡素化できます。予約済みの Hosting URL を介して SDK を追加する方法の詳細をご覧ください。

要約すれば：

• CDN よりもパフォーマンスがわずかに優れています。
• 複数の開発環境での作業を簡素化できます
• すでにFirebaseHostingを使用しているアプリに便利

Firebase WebSDKの亜種

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

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

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

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

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

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

利用可能なライブラリ

<script src="/__/firebase/8.6.7/firebase-app.js"></script>

<script src="/__/firebase/8.6.7/firebase-analytics.js"></script>

<script src="/__/firebase/8.6.7/firebase-auth.js"></script>

<script src="/__/firebase/8.6.7/firebase-firestore.js"></script>

<script src="/__/firebase/8.6.7/firebase-functions.js"></script>

<script src="/__/firebase/8.6.7/firebase-messaging.js"></script>

<script src="/__/firebase/8.6.7/firebase-storage.js"></script>

<script src="/__/firebase/8.6.7/firebase-performance.js"></script>

<script src="/__/firebase/8.6.7/firebase-database.js"></script>

<script src="/__/firebase/8.6.7/firebase-remote-config.js"></script>

<script src="/__/firebase/8.6.7/firebase.js"></script>

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

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-analytics.js"></script>

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

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

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-functions.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-messaging.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-storage.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-performance.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-database.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-remote-config.js"></script>

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

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

ページ全体が読み込まれるまで、Firebase SDK の組み込みを遅らせることができます。

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

   <script defer src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js"></script>
   
   <script defer src="https://www.gstatic.com/firebasejs/8.6.7/firebase-auth.js"></script>
   <script defer src="https://www.gstatic.com/firebasejs/8.6.7/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つの方法があります。

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

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

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

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

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

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

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

// Initialize Firebase with a second Firebase project
var 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
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

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

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

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

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

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

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

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

   firebase init

   この初期化コマンドは何をしますか?

   • ローカルアプリディレクトリをFirebaseにリンクします

   • firebase.jsonファイル(Firebase Hosting に必要なファイル) を生成します

   • パブリック静的ファイル（HTML、CSS、JSなど）を含むパブリックルートディレクトリを指定するように求められます

     Firebaseが検索するディレクトリのデフォルト名は「public」です。 firebase.jsonファイルを直接変更して、後でパブリック ディレクトリを設定することもできます。

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

   firebase serve

Firebase JavaScript SDK のオープンソース リソース

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

Firebase JavaScript SDK

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

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

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