9
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ゼロから始めるFirebase入門

Last updated at Posted at 2024-03-03

Firebaseとは

Firebaseは、Googleが提供するアプリ開発プラットフォームで、mBaaSとして知られています。
mBaaSとは、モバイルアプリケーションのバックエンドサービスをクラウド上で提供することで、開発者がバックエンドの構築にかかる手間や時間を大幅に削減し。アプリケーションの開発に集中できるようにするサービスです。
Firebaseは、ユーザー認証、データベース、ファイルストレージ、リアルタイム通信など、アプリ開発に必要な様々な機能を提供します。

主要なFirebase機能

Firebaseの主要な機能には、以下のようなものがあります

Firebase Authentication

多様な認証プロバイダー(Google、Facebook、Twitter、GitHubなど)に対応し、安全かつ簡単にユーザー認証を実装できるサービスです。
これにより、開発者は独自の認証システムをゼロから構築する必要がなくなります。

Cloud FirestoreとRealtime Database

データをリアルタイムで同期させることができる、高性能なNoSQLデータベースサービスです。
これらのデータベースは、アプリケーションの開発とスケーリングを効率的かつ容易にします。

Firebase Hosting

静的ウェブサイトやウェブアプリケーションを迅速かつ安全にデプロイできるウェブホスティングサービスです。
SSL証明書の自動発行やグローバルCDNを利用した高速配信を特徴としています。

Firebase Cloud Functions

サーバーレスコンピューティングを実現するための機能であり、イベント駆動型のバックエンドロジックをクラウド上で実行できます。
これにより、サーバーの管理やスケーリングの必要がなくなります。

Firebase Crashlytics

アプリのクラッシュレポートをリアルタイムで収集し、問題の原因を迅速に特定できるよう支援するツールです。

Firebase Performance Monitoring

アプリのパフォーマンスを測定し、ユーザー体験の向上に役立つ洞察を提供します。

これらの機能によって、開発者がアプリを効率的に構築し、運用することをサポートします。

Firebaseプロジェクトの作成

Firebaseプロジェクトを作成し、それをローカルのリポジトリと連携させる手順を説明します。

ブラウザでFirebaseコンソールにアクセスします。

プロジェクトを追加をクリックします。
create-project.png

プロジェクト名に任意の値を入力し、チェックボックスにチェックを入れた後、続行をクリックします。
project-name.png

Googleアナリティクスの設定は、プロジェクトのニーズに応じて選択してください。
google-analytics.png

Googleアナリティクスを有効にした場合は、必要な設定を行った上でプロジェクトを作成ボタンをクリックします。
create-project.png

プロジェクトの作成が完了したら、続行ボタンをクリックします。
created-project.png

これで、Firebaseの様々な機能を利用できるプロジェクトのダッシュボードが表示されます。
project-dashboard.png

Firebase CLI

Firebase CLIは、Firebaseプロジェクトの管理やFirebaseサービス(Firestore、Authentication、Hostingなど)の設定をコマンドラインから行うためのツールです。
Firebase CLIを利用して、プロジェクト管理、開発、テストを行う方法について解説します。

Firebase CLIのインストール

Firebaseプロジェクトの管理やFirebaseサービス(Firestore, Authentication, Hostingなど)の設定をコマンドラインから行うために、Firebase CLIが必要です。
まず、以下のコマンドを実行して、Firebase CLIをグローバルにインストールします。

$ npm install -g firebase-tools

インストール後、バージョン情報を確認して、正しくインストールされたことを確認します。

$ firebase --version

Firebaseにログイン

次に、Firebaseプロジェクトを管理するためにFirebase CLI経由でGoogleアカウントにログインします。

$ firebase login

ブラウザが開くので、ログインプロセスを完了させます。
Firebaseコンソールで使用している同じアカウントでログインしてください。
select-account.png
login-firebase-cli.png
request-google-account.png
ログインに成功すると以下の画面に遷移します。
firebase-successful.png

プロジェクトの初期化

プロジェクトディレクトリに移動し、以下のコマンドを実行してFirebaseプロジェクトを初期化します。

$ firebase init

いくつかの質問が表示されるので、プロジェクトに必要なFirebaseの機能(Firestore、Functions、Hostingなど)を選択し、先ほど作成したFirebaseプロジェクトを選択して連携させます。

プロジェクトの設定

firebase initコマンドによって、firebase.jsonが作成されます。
このファイルは、Firebase CLIでアセットをデプロイするために必要です。
例えば、Firebase Hosting、Cloud Firestore、Cloud Functions for Firebaseを利用する場合、デフォルトのfirebase.jsonの設定例は以下の通りです。

firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  }
}

これで、ローカルのプロジェクトがFirebaseプロジェクトと連携され、Firebaseの各種サービスを利用できるようになりました。

プロジェクトの管理

自分のFirebaseプロジェクトのリストを表示できます。

$ firebase projects:list

デプロイの実行

プロジェクトディレクトリから以下のコマンドを実行すると、ローカルプロジェクトの変更をFirebaseプロジェクトにデプロイできます。

$ firebase deploy

特定のFirebaseサービスまたは機能だけをデプロイしたい場合は、部分デプロイを利用できます。
例えば、Hostingサービスだけに変更をデプロイする場合は、以下のコマンドを使用します。

$ firebase deploy --only hosting

その他のサービスに対しても、--onlyオプションに続けてサービス名を指定することで、特定のサービスのみをデプロイできます。

ローカルテスト

Firebase CLIは、firebase servefirebase emulators:startの2つのコマンドを提供し、Firebaseプロジェクトのローカルでのテストを支援します。

firebase serve

firebase serveコマンドは、Firebase Hostingにホストされる静的ファイルやFirebase Cloud Functionsをローカル環境で簡単にテストするために使用されます。
これにより、デプロイメント前にウェブサイトやアプリケーションの静的コンテンツとサーバーレス関数の動作を確認できます。

Firebase Hostingの静的コンテンツをテストする際には、以下のコマンドを使用します。

$ firebase serve --only hosting

HTTP関数をテストする際には、以下のコマンドを使用します。

$ firebase serve --only functions

firebase emulators:start

firebase emulators:startコマンドは、Firebaseの複数のサービスをローカルでエミュレートします。
Firebaseのサービス(Firestore、Functions、Hostingなど)をローカルでエミュレートし、開発中のアプリケーションをテストできます。

$ firebase emulators:start

開発中のアプリケーションがFirebaseのさまざまなサービスとどのように連携するかを、本番環境にデプロイする前に確認することが可能です。

Firebase CLIを活用することで、開発プロセスが大きく効率化され、Firebaseの強力な機能を最大限に活用することができます。

まとめ

この記事では、Firebaseの基本について説明しました。
Firebase CLIのセットアップから、プロジェクトの作成、ローカルでのテスト、デプロイまでの手順を解説しました。
このガイドを活用して、Firebaseを使ったアプリ開発の効率化と、プロジェクト管理の改善を図ってください。

間違っている箇所や疑問に思ったことがあれば、ぜひコメントをください!
最後まで読んでいただき、ありがとうございました。

9
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?