Help us understand the problem. What is going on with this article?

Firebaseのデータベース(Cloud Firestore)をWebからサクッと使ってみる

More than 1 year has passed since last update.

なにがしたい?

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

はじめに

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

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

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

という感じです。

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

DBの作成

ここからが本題です。

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

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

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

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

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

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

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

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

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

image.png

スクリプトのコードが出てくるのでコピーしておきます。
本来これをヘッダに張り付けて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を変えることで、参照でもなんでもできると思います。

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away