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.4.0/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.4.0/firebase-analytics.js'
    
        // Add Firebase products that you want to use
        import { getAuth } from 'https://www.gstatic.com/firebasejs/10.4.0/firebase-auth.js'
        import { getFirestore } from 'https://www.gstatic.com/firebasejs/10.4.0/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.4.0
  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);