はじめに

ちょっとしたサイトやアプリケーションを作成したときに、データの保存先やホスティング場所で困ったことはありませんか。「VPSを借りるまででもないし、サーバーの設定とかよくわからないし」といったように悩んだことはないでしょうか。

筆者も同じように困っていましたが、本連載で紹介するFirebaseを利用することで、これらの悩みを解決できました。本連載では数回にわたってFirebaseの基礎的な使い方を解説します。

Firebaseとは

FirebaseはGoogleが提供している、アプリケーションのためのバックエンドサービスです。Firebaseには次のような機能が備わっています。

• データを保存するデータベース
• ファイルを保存するストレージ
• ユーザー認証機能
• Webアプリケーションのホスティング

Firebaseには2つの有料プランと、1つの無料プランがあります。無料プランであっても、機能的な制限はほとんどなく、同時接続数やデータ転送量に上限が設けられている程度です。個人のプロジェクトで作るアプリケーションなどであれば、無料プランで十分に活用できるでしょう。

本連載では、ちょっとしたWebアプリケーションのバックエンドとしてFirebaseを使う方法を解説します。

筆者のFirebaseお勧めポイント

筆者は個人のプロジェクトでFirebaseを使っていますが、次のような点が特にお勧めだと感じています。

• Single Page Application（SPA）をホスティングできる
• データベースの変更がリアルタイムにクライアントに反映される
• 認証機能が簡単に実装できる

データベース、認証API、ホスティングと、Webアプリケーション開発に必要なものが揃っています。これらの機能は、サーバーサイドなどの知識がなくても使えるように設計されているので、Webアプリケーション開発の大きな助けになります。

Firebaseを始める

FirebaseはGoogleアカウントを持っている人であれば、だれでもすぐに利用できます。面倒な登録などは一切なく、Firebase consoleにアクセスしてGoogleアカウントでログインするだけです。

このFirebase consoleでプロジェクトの作成や、プロジェクトごとのデータベースのルール、認証周りの設定が行えます。Firebase consoleについての詳細は後述します。

プロジェクトを作成する

早速プロジェクトを作成してみましょう。

新しいプロジェクトは、Firebase consoleから「プロジェクトを追加」を選択して作成します。「プロジェクトを追加」を選択すると、次のようなダイアログが表示されます。

「プロジェクト名」にプロジェクトの名前を入力し、「国/地域」を選択して、プロジェクトを作成します。プロジェクトを作成すると、そのプロジェクトの設定画面へと遷移します。

設定画面でできること

プロジェクトの設定画面には多くの項目があり、細かな設定や管理が行えますが、本記事では次の4つの項目に絞って扱います。

• Authentication
• Database
• Storage
• Hosting

これらの項目について簡単に解説します。

Authentication

Authenticationはユーザー認証の設定と管理を行う項目です。Firebaseには、Googleアカウントや各種SNSアカウントでの認証を簡単にできるようにするAPIが用意されています。Authenticationでは、アプリケーションでどういった種類のアカウントで認証するかの設定と、認証済みユーザーの管理が行えます。

Database

Databaseはデータベースの管理を行う項目です。保存されているデータの確認や追加、データベースへの読み書きに関する権限の設定、使用状況の確認などが行なえます。権限を設定することで、ユーザーごとにアクセスできる範囲を細かく調整できます。

Storage

Storageは画像や音声、動画といったファイルの管理と、権限の設定を行う項目です。Firebaseには、ファイルのアップロードが簡単に行えるAPIが用意されています。プロジェクト作成時にファイルのアップロード先としてGoogle Cloud Storageが設定され、5GBまでは無料で利用できます。

Hosting

Hostingはアプリケーションのホスティングに関する設定を行う項目です。Firebaseではデータの保存だけでなく、アプリケーションのホスティングも可能です。デフォルトではfirebaseapp.comというドメインでホスティングされますが、独自のドメインも設定可能です。

また、デプロイ時には履歴が自動的に保存されるので、ある時点の状態へのロールバックを簡単に実行できます。

特筆すべきなのは、SPAの動作に必要な「どのパスにアクセスしたときでも/index.htmlを返す」という設定が用意されていることです。これによって、サーバーの設定をすることなく、SPAのホスティングが可能になっています。

Firebase CLI

Firebaseには、ターミナルからプロジェクトの管理を行うためのFirebase CLIが用意されています。Firebase CLIでは、開発のためのローカルサーバーの起動や、デプロイといったコマンドが利用できます。

Firebase CLIのインストール

Firebase CLIのインストールはnpmにて行います。次のコマンドをターミナルで実行してFirebase CLIをインストールします。

$ npm install -g firebase-tools

インストール後、firebaseコマンドが実行できるようになります。

Firebaseアカウントと接続する

コマンドを利用するには、Firebaseアカウントと接続する必要があります。次のコマンドを実行すると、ブラウザが起ち上がりGoogleアカウントでのログインが行われます。

$ firebase login

ログインとともにFirebase CLIから権限のリクエストを求められるので、利用規約を確認したのちに許可を選択します。

アカウントが接続されると、次のようにログインが成功のメッセージが表示されます。

プロジェクトの一覧を表示する

アカウントが正しく接続できているかの確認のために、次のコマンドを実行します。

$ firebase list

アカウントが正しく接続できていれば、次のように作成したプロジェクトの一覧が表示されます。

┌───────────────┬───────────────────────┬─────────────┐
│ Name          │ Project ID / Instance │ Permissions │
├───────────────┼───────────────────────┼─────────────┤
│ codegrid-demo │ codegrid-demo-xxxxx   │ Owner       │
└───────────────┴───────────────────────┴─────────────┘

これで開発を進めるための環境が整いました。

まとめ

今回は、Firebaseの特徴と、Firebase consoleとFirebase CLIについて解説しました。次回はFirebase CLIでプロジェクトの初期化と、データの保存と取得について解説します。