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

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

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

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

CDN から

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

特定の 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/11.0.2/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/11.0.2/firebase-analytics.js'

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

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 アプリ

Firebase　JavaScript　SDK をインストールする
1. package.json ファイルがない場合は、JavaScript プロジェクトのルートから次のコマンドを実行して作成します。
```
npm init
```
2. 次のコマンドを実行して firebase npm パッケージをインストールし、package.json ファイルに保存します。
```
npm install --save firebase@11.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");
```
  個々の SDK ではなく、Firebase JavaScript SDK 全体を含めます（本番環境アプリには推奨されません）
  
  本番環境のウェブアプリの場合、SDK 全体の読み込みは効率的ではありません。
  この方法は開発環境でのみ使用してください。
```
var firebase = require("firebase");
```
- 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";
```
  個々の SDK ではなく、Firebase JavaScript SDK 全体を含めます（本番環境アプリには推奨されません）
  
  本番環境のウェブアプリの場合、SDK 全体の読み込みは効率的ではありません。
  この方法は開発環境でのみ使用してください。
```
import firebase from "firebase";
```
  注: Node.js で　import　構文を直接使用する方法はまだ試験運用段階ですが、Babel などのコンパイラを使用すると CommonJS 形式（require構文）に変換できます。

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);