Firebase を JavaScript プロジェクトに追加する別の方法

ほとんどの Firebase ウェブアプリでは、npm を介して SDK を使用することを強くおすすめします。ただし、特別な要件があるユーザーのために、Firebase には SDK を追加する別の方法が用意されています。このページでは、以下の方法の詳細な設定手順を示します。

  • CDN（コンテンツ配信ネットワーク）
  • Node.js アプリ用の npm

これらの方法を使用すると、使用可能なライブラリをアプリに追加できます。

CDN から

Firebase JavaScript SDK の部分的なインポートを構成し、必要な Firebase プロダクトのみを読み込むことができます。Firebase は、Firebase JavaScript SDK の各ライブラリをグローバル CDN（コンテンツ配信ネットワーク）に格納しています。

  1. 特定の Firebase プロダクト（Authentication や Cloud Firestore など）のみを含めるには、Firebase サービスを使用する前に、次のスクリプトを <body> タグの末尾に追加します。

    <body>
  <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js'

    // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
    import { getAnalytics } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-analytics.js'

    // Add Firebase products that you want to use
    import { getAuth } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js'
    import { getFirestore } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore.js'
  </script>
</body>

  2. Firebase 構成オブジェクトを追加して、アプリで Firebase を初期化します。

    <body>
  <script type="module">
    // ...

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

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
  </script>
</body>

Node.js アプリ

  1. Firebase　JavaScript　SDK をインストールする

    1. package.json ファイルがない場合は、JavaScript プロジェクトのルートから次のコマンドを実行して作成します。

      npm init

    2. 次のコマンドを実行して firebase npm パッケージをインストールし、package.json ファイルに保存します。

      npm install --save firebase@10.14.1

  2. アプリで Firebase モジュールを使用するには、次のオプションのいずれかを使用します。

    • require を使用して、任意の JavaScript ファイルからモジュールを組み込む。

      特定の Firebase プロダクト（Authentication や Cloud Firestore など）のみを含めるには:

      // Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
var firebase = require("firebase/app");

// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");


    • ES2015 を使用して、import でモジュールをインポートする。

      特定の Firebase プロダクト（Authentication や Cloud Firestore など）のみを含めるには:

      // Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";

  3. Firebase 構成オブジェクトを追加して、アプリで Firebase を初期化します。

    import { initializeApp } from 'firebase/app';

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

// Initialize Firebase
const app = initializeApp(firebaseConfig);