ほとんどの 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/10.13.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/10.13.2/firebase-analytics.js' // Add Firebase products that you want to use import { getAuth } from 'https://www.gstatic.com/firebasejs/10.13.2/firebase-auth.js' import { getFirestore } from 'https://www.gstatic.com/firebasejs/10.13.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 をインストールする
package.json
ファイルがない場合は、JavaScript プロジェクトのルートから次のコマンドを実行して作成します。npm init
次のコマンドを実行して
firebase
npm パッケージをインストールし、package.json
ファイルに保存します。npm install --save firebase@10.13.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";
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);