なにがしたい？

Firebaseのデータベースを使ってみる。
Web（フロントエンド）のJavaScriptから操作してみる。

はじめに

FirebaseのセッティングとHostingできるところまでは持っていってください。
単なるHostngだけならそんなに苦労しないです。

簡単言うと、Firebaseのサイト（コンソール）から、

新しいプロジェクトの作成
Hostingを使ってみるを選ぶとコマンドが出てくる
パソコンのターミナルからfirebase login → init → deployを実行

という感じです。

Basic認証付きという状態で良ければ、手前味噌ながらにこの記事を参考にしてくれてもいいです。
（もっとわかりやすい記事も探せばあると思います）
FirebaseでBasic認証をかけてHostingをする(Windows)

DBの作成

ここからが本題です。

Firebaseのサイト上のメニューから Database を選択して、「データベースの作成」をクリックします。
とりあえず、テストモードで開始します。

後で変えられるので大丈夫です

画面が切り替わるので、「＋コレクションを追加」します。RDBで言うところのでいわゆるテーブル名です。
適当に「data」という雑な名前を付けておきます。

実際は「users」とか意味ある名前にするほうが吉です。

次に、フィールドの設定を行います。RDBで言うところのいわゆるカラム名です。
今回はJavaScriptからカラムを追加したいので、もしフィールドが出ていたらマイナスのボタンを押して消して、空の状態にします。

「保存」を押して終了です。

これでサーバ上にDBの準備が出来ました。

Webからアクセスする準備をする

Firebaseのサイト上のProject Overviewを押して+アプリを追加をクリック。
メニューが開くのでWebのマーク</>をクリック。

スクリプトのコードが出てくるのでコピーしておきます。
本来これをヘッダに張り付けてHTMLを作りますが、いろいろTipsがあるのですが一気にコードに行ってみたいと思います。

Webからデータ追加するHTMLを作る

下記がDBに値を追加するコードです。
APIキーやドメインといった部分だけ上でコピーしたコードをうまく使って埋めてください。

public/add.html

<html>
  <head>
  <script src="https://www.gstatic.com/firebasejs/5.5.9/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.5.9/firebase-firestore.js"></script>
  <script>
    // Initialize Firebase
    // ここの各値を書き換える
    var config = {
      apiKey: "xxxx",
      authDomain: "xxxx",
      databaseURL: "xxxx",
      projectId: "xxxx",
      storageBucket: "xxxx",
      messagingSenderId: "xxxx"
    };
    firebase.initializeApp(config);

    const firestore= firebase.firestore();
    const settings = { timestampsInSnapshots: true };
    firestore.settings(settings);

    // この data をドキュメント名にする。
    // 今回は、サンプルなので LA のデータをいれてみる    
    firestore.collection("data").doc("LA").set({
      name: "Los Angeles",
      state: "CA",
      country: "USA"
    })
    .then(function() {
      console.log("Document successfully written!");
    })
    .catch(function(error) {
      console.error("Error writing document: ", error);
    });
  </script>
  </head>
  <body>
    <p>add data!!</p>
  </body>
</html>

ここで作るデータはチュートリアルからとってきた適当なものです。
いわゆるNoSQL系のDBなので、フィールドを事前に用意してなくても勝手に作ってくれます。

ファイルができたら、デプロイしてみましょう。

> firebase deploy

URLにアクセスしてみます。

https://xxxxxx.firebaseapp.com/add.html

画面にはadd data!!など出てるはずです。

次に、Firebaseのサイトのdatabaseを見てみます。
コレクションdataに、ドキュメントLAが追加されているのがわかると思います。

これにてデータ追加が完了です。

いったんまとめ

これで一通りの流れができました。
あとは、チュートリアルなど参考にJavaScriptからコールするAPIを変えることで、参照でもなんでもできると思います。

次は、セキュリティルールなど、実運用を考えた設定をしたいと思います。
次の記事書くまで少々お待ちください。