Firebaseで遊ぶ

Firebase

Firebaseを利用して簡単なWebアプリを作ります。Firebaseの一通りの使い方を紹介するつもりです。

プログラミングの勉強で何か作ったらいいと言われたけど、どこで何したらいいかわからないという方の参考になればいいなと思います。Firebase使ってこんなことができるよ、という例にもなると思います。

背景

以前はこのサイトをFirebaseでホスティングしていたのですが、無料アカウントでのホスティング容量の上限に到達しました。それからはこのサイトはNetlifyでホスティングしています。

FirebaseeにはRealtimeDatabaseとかFinctionなどさまざまな機能があります。それらを使ってみようと思ったので遊びました。無料で使える範囲で遊んでいます。

概要

以下概要です。ざっくりとですが「プログラミングで何か作ろう」というときの例になると思います

「勉強はしている！次何したらいいかわからない」「実際に作るのが大切！らしいけど何から初めたらいいんだ！」という方の参考になったらいいです。

勉強は大切ですが何かを作ってみることも大切です。手を動かすことで、わかったつもりで本当はわかっていないことを発見できます。Firebaseは無料枠でいろいろな機能が使えるのでおすすめです。

何より自分で考えて、自分で作ったものが動く、世界に向けて発信されることは嬉しいことだと思います。プログラミングについての知識や技術を身に着けた後は、ぜひ実際に作るのがおすすめです。

以下の内容で少しずつ進めていきます。この記事では2までやります。

Firebaseの準備
Hostingにページをデプロイ
Functionを使ってみる
Databaseへの書き込み、読み出し

Firebaseの準備

アカウントを作ってプロジェクトを作ります。実際に Firebase のサイトに従って進めるといいです。

次はプロジェクト作成です。
任意の名前を入力します。URLに使われるので、なるべくわかりやすいものにしておくとおすすめです。国はJAPANにしておきましょう。私の場合はプロジェクトの名前を「tenka-ichi」にしたので、デフォルトで「tenka-ichi.web.app」というURLが対応付けられています。自分で取得したドメインを後から設定することもできるので、厳密に気にしなくてもいいです。

プロジェクト作った後はnpmで「firebase-tools」のインストール。Firebaseの管理画面で説明があるのでそれに従って進めれば問題ないです。プロンプトやCLIに慣れていない人も、こういった所から慣れていけばいいです。そんなに難しいものではありません。

npm install -g firebase-tools

もしもエラーが出てうまくいかない場合は、エラーの内容をグーグルで調べましょう。何かしら出てきますのでそれらを参考にすれば良いです。

そのあとは以下のコマンドを実行して、プロジェクトの準備をします。説明に従って必要な設定を行いましょう。

firebase login

firebase init

Hostingにページをデプロイ

最初はHostingにファイルをアップします。管理画面のHostingメニューからWebアプリのドメインにアクセスできます。この状態では何もアップされていないのでアクセスしても「Site Not Found」と表示されるエラー画面です。

以下のコマンドを実行すれば、プロジェクトのpublic/以下のディレクトリがFirebase Hostingにデプロイされます。デプロイコマンドにオプションでhostingのみ反映する用に指定しています。他の機能はセットアップが必要なので、エラーになってデプロイ出来ない場合があります。

firebasee deploy --only hosting

作成されたローカルのプロジェクトにはデフォルトでindex.htmlが用意されています。ですので上記コマンドを実行することで、そのファイルが反映されます。URLにアクセスすると、「Welcome Firebase Hosting Setup Complete」と表示されるようになります。

あとは自分でpublic/index.htmlを変更したり、他のページを作ったりしてみましょう。これだけでとりあえずWebサイトが出来ます。

Hostingでは静的なコンテンツの発信のみ有効です。PHPやRubyなど、サーバで動作するプログラムを実行させることは出来ません。HTML・CSS・JavaScriptなら発信できるということです。

Functionを使ってみる

次はCloud Functionを試します。これはHostingとは異なりプログラムを実行して結果を返すことが出来ます。JavaScriptまたはTypeScriptで作成したプログラムを設置することが出来ます。

簡単なものをデプロイ・実行してみます。functions以下にindex.jsがあり、その中にコメントアウトされているhelloWorldという関数があるのでそれを有効にします。コメントアウトを取り除けばいいだけです。メソッドの処理はテキストを返すだけですが、まずはリクエストしてみましょう。

firebasee deploy --only functions

コマンドを実行すると変更が反映されます。管理画面に関数が表示されるようになります。トリガーとなるURLが表示されているのでアクセスすると処理が実行されテキストが返されます。HostingのURLとはドメインが異なっているので注意しましょう。

もう少しやってみます。公式のドキュメントを参考に色々触ってみるのがおすすめです。

無料の枠ではHTTPリクエストで動作するメソッドのみ利用できます。課金するとサーバでスケジュールしたバッチ処理などを動かせます。やろうと思えば外部のサービスを利用して、定期的にHTTPメソッドを動かすことが出来るようです。

functions.https.onRequest()  
→ HTTPリクエストで動作する処理、無料枠で利用可  

functions.pubsub.schedule().onRun()  
→ スケジュールに従い動作する処理、有料のBlazeプランでないと利用できない

ローカルで確認できる

ちなみにfirebase deployを実行しなくてもローカルで動作を確認することが出来ます。 firebase serveを実行すると、ローカルでサーバが立ち上がります。

http://localhost:5000/?でHosting、functionも帰ってくるメッセージに記載のURL(localhost:5001で始まるやつ)で実行・確認できます。

他にもdeploy時には文法などのチェックをしてくれているようです。エラーの箇所はチェックがかかりdeployが途中で止まりました。親切ですね。

Databaseへの書き込み、読み出し

次はFirestoreを利用します。管理画面でデータベースを作成します。

ひとまずFunctionにデータベースの処理を作成して、そこからデータを書き込み・読み出ししてみます。以下のような感じでメソッドを作成して、デプロイ。URLでメソッドを実行するとデータが作成されます。超単純にGETでパラメータ渡しました。

「コレクション」や「ドキュメント」という単語を目にすることになります。このあたりはFirebaseのドキュメントを見て理解するといいです。時間あれば情報をまとめようと思います。NoSQLベースなのでRDBとは大きく異なります。注意しましょう。

exports.ichibanWrite= functions.https.onRequest((request, response) => {
  const title = "テスト";
  const name = "名前";
  const memo = "メモ";
  var docRef = db.collection('ichiban').doc('test');
  var setRecord = docRef.set({
    name: name,
    title: title,
    memo: memo
  });
  response.send("dataWriten,Thank you " + name);
});

管理画面のdatabaseのタグから登録した実データが確認出来ます。管理画面上で追加したり、編集したりもできます。

データの読み出しはドキュメントを参考に以下のようにやったら出来ます。こちらではデータをログに出力するようにしています。Firebaseの管理画面でfunction実行時のログを確認できるので、そこで正常に動作していること・出力の内容を確認しました。

exports.dataRead= functions.https.onRequest((request, response) => {
  db.collection('users').get()
    .then((snapshot) => {
      snapshot.forEach((doc) => {
        console.log(doc.id, '=>', doc.data());
      });
    })
    .catch((err) => {
      console.log('Error getting documents', err);
    });
});