Flutterアプリケーション開発概論

【Firebase接続】flutterfire configureでfirebase_options.dartを生成する

第6節LINE風チームタスク管理アプリを作りながら、ログイン・データベース・権限管理を学ぶ
FlutteriOSAndroidMacOSWindows基礎から学ぶ開発アプリ開発

このページでやること

このページでは、FlutterアプリとFirebaseを接続します。

ゴールは、Flutterプロジェクトの中に次のファイルを作ることです。

lib/firebase_options.dart

firebase_options.dart とは、FlutterアプリとFirebaseプロジェクトをつなぐための設定ファイルです。

このファイルは手で作りません。

flutterfire configure というコマンドで自動生成します。

Firebase公式でも、FlutterアプリをFirebaseへ接続する流れとして、Firebase CLIのインストール、firebase login、FlutterFire CLIのインストール、flutterfire configure の実行が案内されています。

https://firebase.google.com/docs/flutter/setup

作業の流れ

1. Node.js と npm が使えるか確認する
↓
2. Firebase CLI を入れる
↓
3. Firebaseにログインする
↓
4. FlutterFire CLI を入れる
↓
5. PATHを確認する
↓
6. flutterfire configure を実行する
↓
7. firebase_options.dart ができたか確認する

難しそうに見えますが、やることはほぼコマンドを順番に打つだけです。

まず出てくる単語

単語一言説明
Terminalコマンドを入力する画面
コマンドパソコンに命令する短い文字
Node.jsFirebase CLIを動かすために使う実行環境
npmNode.jsの道具をインストールするための管理ツール
Firebase CLIターミナルからFirebaseを操作する道具
FlutterFire CLIFlutterとFirebaseをつなぐ設定ファイルを作る道具
PATHターミナルがコマンドを探す場所の設定
firebase_options.dartFlutterとFirebaseを接続する設定ファイル

CLIとは、Command Line Interfaceの略です。

ターミナルから使う道具のことです。

作業前の確認

まず、Flutterプロジェクトのフォルダへ移動します。

例：

cd ~/dev/app_flutter_firebase_work

移動できたら、次を実行します。

pwd

pwd は、今いるフォルダを表示するコマンドです。

Flutterプロジェクトの中にいるか確認します。

次に、Flutterが使えるか確認します。

flutter --version

バージョンが表示されればOKです。

Step 1：Node.js と npm を確認する

Firebase CLIを入れるには、Node.jsとnpmが必要です。

まず確認します。

node -v

npm -v

どちらも数字が出ればOKです。

例：

v22.11.0
10.9.0

node -v や npm -v でエラーが出る場合は、Node.jsがまだ入っていません。

その場合は、公式サイトからLTS版を入れてください。

https://nodejs.org/

LTSとは、長く安定して使える推奨版のことです。

Firebase CLIはnpmを使ってインストールできます。Firebase CLIの公式リファレンスでも、Firebase CLIのインストールとログイン手順が案内されています。

https://firebase.google.com/docs/cli

Step 2：Firebase CLIをインストールする

次のコマンドを実行します。

npm install -g firebase-tools
  • g は、パソコン全体で使えるようにインストールするという意味です。 終わったら確認します。
firebase --version

数字が出ればOKです。

例：

14.0.0

エラーが出る場合は、一度ターミナルを閉じて、もう一度開いてから試してください。

Step 3：Firebaseにログインする

次に、Firebaseにログインします。

firebase login

実行すると、ブラウザが開きます。

Googleアカウントでログインしてください。

途中で次のような質問が出ることがあります。

Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?

これは、利用状況やエラー情報をFirebaseに送るかどうかの質問です。

学習中は、どちらでも構いません。

迷ったら No でOKです。

ログインに成功すると、次のような表示になります。

Success! Logged in as your-email@example.com

Step 4：FlutterFire CLIをインストールする

次に、FlutterFire CLIを入れます。

dart pub global activate flutterfire_cli

FlutterFire CLIとは、Flutterプロジェクト用のFirebase設定を作ってくれる道具です。

Firebase公式のFlutterセットアップ手順でも、このコマンドでFlutterFire CLIを入れる流れが案内されています。

https://firebase.google.com/docs/flutter/setup

Step 5：flutterfire コマンドを確認する

次を実行します。

flutterfire --version

数字が出ればOKです。

もし、次のように出た場合は、

flutterfire: command not found

PATHが通っていない可能性があります。

PATHとは、ターミナルがコマンドを探す場所のことです。

Step 6：PATHを通す

Macの場合は、次を実行します。

echo 'export PATH="$PATH:$HOME/.pub-cache/bin"' >> ~/.zshrc

そのあと、設定を読み込み直します。

source ~/.zshrc

もう一度確認します。

flutterfire --version

数字が出ればOKです。

Step 7：Firebaseプロジェクトを作る

Firebase Consoleを開きます。

https://console.firebase.google.com/

画面で次のように進めます。

プロジェクトを追加
↓
プロジェクト名を入力
↓
Google アナリティクスは今回は無効でOK
↓
プロジェクトを作成

プロジェクト名は、たとえば次のようにします。

workboard-firebase

ただし、FirebaseのプロジェクトIDは世界で一意である必要があります。

一意とは、他の人と同じものが使えないという意味です。

もし workboard-firebase が使えなければ、次のように自分の名前や日付を入れてください。

workboard-arton-20260525

Step 8：flutterfire configure を実行する

Flutterプロジェクトのフォルダで実行します。

flutterfire configure

すると、いくつか質問が出ます。

基本的には、画面の指示に従って選びます。

選択1：Firebaseプロジェクトを選ぶ

次のように表示されます。

Select a Firebase project to configure your Flutter application with

先ほど作ったFirebaseプロジェクトを選びます。

キーボードの上下キーで選び、Enterを押します。

選択2：対応するプラットフォームを選ぶ

次のように表示されます。

Which platforms should your configuration support?

最初は、必要なものだけでOKです。

iPhoneとAndroidで使うなら、次を選びます。

android
ios

Webも試したい場合は、web も選びます。

迷ったら、まずはこの3つでOKです。

android
ios
web

スペースキーで選択、Enterで決定です。

選択3：アプリ登録を進める

途中で、AndroidアプリやiOSアプリをFirebaseに登録する処理が入ります。

基本的には、CLIが自動で進めてくれます。

完了すると、最後に次のようなファイルが作られます。

lib/firebase_options.dart

Firebase公式では、flutterfire configure をFlutterプロジェクトのディレクトリで実行すると、Firebase設定ファイルを生成し、アプリをFirebaseに接続できるようにする流れが案内されています。

https://firebase.google.com/docs/flutter/setup

Step 9：ファイルができたか確認する

次のコマンドを実行します。

ls lib

一覧の中に、これがあればOKです。

firebase_options.dart

確認できたら成功です。

Step 10：main.dartで読み込む

main.dart の上の方に、次の読み込みがあるか確認します。

import 'firebase_options.dart';

さらに、main() の中に次の処理があるか確認します。

await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);

完成コードでは、次のようになっています。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const WorkBoardApp());
}

Firebase.initializeApp は、FlutterアプリでFirebaseを使えるようにする準備です。

DefaultFirebaseOptions.currentPlatform は、iOS、Android、Webなど、実行している環境に合わせてFirebase設定を選んでくれます。

Step 11：実行する

最後に、Flutterアプリを実行します。

flutter run

または、VS CodeやAndroid Studioの実行ボタンから起動してもOKです。

アプリが起動してログイン画面が表示されれば、Firebase接続の準備はできています。

ここまでの最短コマンドまとめ

すでにNode.jsが入っている人は、基本的にこれだけです。

cd ~/dev/app_flutter_firebase_work
npm install -g firebase-tools
firebase login
dart pub global activate flutterfire_cli
echo 'export PATH="$PATH:$HOME/.pub-cache/bin"' >> ~/.zshrc
source ~/.zshrc
flutterfire configure
flutter run

ただし、echo の行は何度も実行しないでください。

.zshrc に同じ設定が何行も増えてしまいます。

よくあるエラーと直し方

エラー原因直し方
npm: command not foundNode.jsが入っていないNode.js LTS版を入れる
firebase: command not foundFirebase CLIが入っていないnpm install -g firebase-tools
flutterfire: command not foundPATHが通っていないexport PATH="$PATH:$HOME/.pub-cache/bin" を追加
firebase_options.dart がないflutterfire configure 未実行プロジェクト内で flutterfire configure
Firebaseプロジェクトが表示されないログインアカウントが違うfirebase logout → firebase login
Node.js v25 系でエラーNodeが新しすぎる可能性Node.js LTS版を使う

Node.jsのバージョンでつまずいた場合

Firebase CLIでエラーが出る場合、Node.jsが新しすぎることがあります。

確認します。

node -v

学習中は、LTS版を使うのがおすすめです。

たとえば、v22 系などです。

nvmを使っている場合は、次のように切り替えられます。

nvm install 22
nvm use 22
nvm alias default 22

nvmとは、Node.jsのバージョンを切り替えるための道具です。

すでにNode.jsが普通に動いている人は、この作業は不要です。

.zshrcに手で書く場合

flutterfire: command not found が直らない場合だけ、.zshrc を開いて確認します。

open ~/.zshrc

次の1行が入っていればOKです。

export PATH="$PATH:$HOME/.pub-cache/bin"

保存したら、ターミナルで読み込み直します。

source ~/.zshrc

そのあと確認します。

flutterfire --version

このページでやったこと

このページでは、Firebase接続に必要な準備をしました。

Node.js と npm を確認した
↓
Firebase CLI を入れた
↓
Firebaseにログインした
↓
FlutterFire CLI を入れた
↓
PATHを通した
↓
flutterfire configure を実行した
↓
firebase_options.dart を生成した

ここまでできれば、FlutterアプリからFirebaseを使う準備は完了です。

ミニ確認問題

Q1. firebase_options.dart は何のためのファイルですか？

回答

FlutterアプリとFirebaseプロジェクトを接続するための設定ファイルです。

flutterfire configure を実行すると自動で生成されます。

Q2. Firebase CLIは何をするための道具ですか？

回答

ターミナルからFirebaseにログインしたり、Firebaseプロジェクトを操作したりするための道具です。

Q3. FlutterFire CLIは何をするための道具ですか？

回答

FlutterアプリとFirebaseを接続するための設定を自動生成する道具です。

今回使う firebase_options.dart を作ってくれます。

Q4. flutterfire: command not found と出たら何を確認しますか？

回答

$HOME/.pub-cache/bin にPATHが通っているか確認します。

Macの場合は、次の1行を .zshrc に入れます。

export PATH="$PATH:$HOME/.pub-cache/bin"

このページのまとめ

  • Firebase接続では、firebase_options.dart を作ることがゴール。
  • firebase_options.dart は手で作らず、flutterfire configure で生成する。
  • Firebase CLIは npm install -g firebase-tools で入れる。
  • Firebaseには firebase login でログインする。
  • FlutterFire CLIは dart pub global activate flutterfire_cli で入れる。
  • flutterfire: command not found の場合はPATHを確認する。
  • Flutterプロジェクトの中で flutterfire configure を実行する。
  • lib/firebase_options.dart ができれば成功。
  • main.dart では Firebase.initializeApp と DefaultFirebaseOptions.currentPlatform を使う。

次のページでやること

次のページでは、Firebaseを使うためのパッケージをFlutterプロジェクトに追加します。

firebase_core、firebase_auth、cloud_firestore を入れて、完成コードが動く状態にしていきます。

前の節【Firebase準備】Authentication・Firestore・Security Rulesの役割を理解する次の節【パッケージ設定】firebase_core・firebase_auth・cloud_firestoreを追加する
教材トップへ戻る