私はFirebaseをアプリへのPush通知では使ったことはあるけれども、Webの方では使ったことはないので、ちょっとやってみたという感じです。
環境はWindows10です。
早い話が、下記の動画を見ればすぐわかります（笑）。
全部英語ですが、まぁソースコード見てると大体わかりますし、どうしても英語聞きたいときは0.5倍ぐらいで聞くとなんとか聞けたりします。
わかりにくいところだけ補足します。
①apikeyとかなんなのかわからない。
const firebaseConfig = {
apiKey:これ
};ですよね~。
これは、Firebaseの方で先にアカウントを作っておいて、「アプリを登録」ということをする必要があります。
下記のFirebaseのサイトにアクセスして、プロジェクトを作ります。
https://console.firebase.google.com/u/0/?hl=ja
その後、作ったプロジェクトに「アプリを追加」します。
アプリを</>というマークがJavascriptですので、Javascriptで登録します。
すると、このapiKeyとかprojectIdとかをコピペすればすむ画面が出てきます。
②ブラウザから動作させてみる
動画の通り、index.jsとindex.htmlを作ります。
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js';
import { getAnalytics } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-analytics.js';;
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "置き換えてね",
authDomain: "置き換えてね",
projectId: "置き換えてね",
storageBucket: "置き換えてね",
messagingSenderId: "置き換えてね",
appId: "置き換えてね",
measurementId: "置き換えてね"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
console.log(analytics);
console.log("にゃー");<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="module" src="index.js"></script>
</head>
<body>
ウキー
</body>
</html>動画内では
serve
というコマンドがさらっと使われております。
これ、Node.jsのコマンドなんですね。事前に
$ npm install -g serve
とやって、serveをnpmでインストールしておきます。
（この動画の冒頭でもnpm使っているので、npmが入っていないということはないと思いますが、npmが入っていなければnpmを先に入れましょう。）
はい、それではindex.jsとindex.htmlがおいてあるディレクトリ（ここではC:\study\firebase）で
serve src
とやります。
へアクセスします。
ちゃんとブラウザのコンソールにAnalyticsのオブジェクトが表示されましたね。
