12周年記念パーティ開催! 2024/5/10(金) 19:00

一から始めるFirebase 第1回 サービスの特徴と環境整備

WebアプリケーションのバックエンドとしてFirebaseを使う方法を紹介します。まずはその特徴や、プロジェクトを構築していくための準備を見てみましょう。

発行

著者 中島 直博 フロントエンド・エンジニア
一から始めるFirebase シリーズの記事一覧

はじめに

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

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

Firebaseとは

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

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

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

Firebaseの料金体系

Firebaseは無料で利用できるSparkプラン、月額25ドルのFlameプラン、従量制のBlazeプランが用意されています。詳しくは料金のページを参照してください。

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

筆者のFirebaseお勧めポイント

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

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

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

ElectronとFirebase

Webアプリケーションに使えるという点ではElectronでも同じだと思うかもしれませんが、Electronでの利用は認証APIの制約があったり、セキュリティ的なリスクがある点から推奨されません。アプリケーションのバイナリやソースコードを公開せずに、個人用としてなら使えるかもしれません。

Firebaseを始める

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

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

プロジェクトを作成する

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

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

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

設定画面でできること

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

  • Authentication
  • Database
  • Storage
  • Hosting

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

Authentication

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

Authenticationの「ログイン方法」では、ユーザー認証に利用するSNSなどを設定できる

Database

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

Databeseの「ルール」では、データベースへの読み書きに関する権限の設定ができる

Storage

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

Storageの「ファイル」からファイルの管理やアップロードが行える

Hosting

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

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

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

Hostingの「ダッシュボード」ではホスティングに関する設定が行える

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から権限のリクエストを求められるので、利用規約を確認したのちに許可を選択します。

Googleアカウントが複数ある場合は

複数のGoogleアカウントを利用している場合、アカウントの選択画面が表示されます。ここではプロジェクトを作成したときに使用したGoogleアカウントを選択してください。

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

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

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

$ firebase list

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

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

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

まとめ

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

中島 直博
フロントエンド・エンジニア

JavaScriptとCSSへの興味から大学院を中退してWebの世界に飛び込む。大手デジタルコンテンツベンダーにてHTML、CSS、JavaScriptなどフロントエンド全般の担当として、主にスマートフォン向けゲームの開発に従事。2014年1月にフロントエンド・エンジニアとして株式会社ピクセルグリッドへ入社。スマートフォンサイトの実装を得意とする。2019年、退社。 また、在学中からhtml5jのスタッフとして、さまざまな技術系勉強会の運営に関わり、HTML5 Experts.jpのコントリビューターもつとめる。

この記事についてのご意見・ご感想 この記事をXにポストする

全記事アクセス+月4回配信、月額880円(税込)

CodeGridを購読する

初めてお申し込みの方には、30日間無料でお使いいただけます