本記事では、npmを使用する方法でインストールします。

大まかな流れは以下の通りです。

1. NVMのインストール
2. Node.jsのインストール
3. Firebase CLIのインストール

1.NVMのダウンロード

Firebase公式サイトにあるnvm-windowsのリンクから、NVMをダウンロードできます。

Firebase公式サイト、Firebase CLIのインストール手順

リンクを押すと、画像のようなGitHubの画面に遷移します。
「Download Now!」というボタンがあるので、クリックします。

「Download Now!」ボタンからダウンロード

すると、リリースされたバージョンの一覧ページに遷移します。
「Latest」のマークのあるバージョンの「Assets」の「nvm_setup.exe」をクリックし、ダウンロードします。

「Latest」のマークがついている

「Assets」内、「nvm_setup.exe」をクリック

2.NVMのインストール

ダウンロードが完了したら、次はインストールします。
nvm_setup.exeを実行するとウィザードが表示されるので、それに従いインストールします。
このとき、最初だけ「同意する」を選び直す必要がありますが、その後は全てデフォルトのまま「Next」で進めて大丈夫です。

「I accept the agreement」にチェックを入れる

その後、
・NVMのインストール先フォルダの選択
・シンボリックリンクを作成するフォルダの選択
が続きます。

最後に、以下の画面が表示されたら、NVMのインストールは完了です。

NVMのインストールの最後のウィザード

完了したら、nvmコマンドが使えるようになります。
試しに、コマンドプロンプトで以下のコマンドを実行してみます。

nvm list available

その結果、以下のようにインストール可能なNode.jsのバージョンのリストが表示されたらOKです。

コマンド「nvm list available」の実行結果

続いて、Node.jsをインストールしていきます。

1.Node.jsのダウンロード

まずはNode.jsをダウンロードします。
NVMと同様、Firebaseの公式サイトにあるNode.jsのリンクからダウンロードできます。
リンクを押すと、画像のようなNode.jsの画面に遷移します。

この画面からNode.jsをインストール

左の「18.16.0.LTS」のボタンをクリックします。
その結果、「node-v18.16.0-x64.msi」がダウンロードされます。

ちなみに、「LTS」と「Current」には以下の違いがあります。

LTS	Long Term Supportの略。 長期の保守運用が約束されたバージョン。
CURRENT	最新版。 安定性は約束せず、機能追加を盛り込んだバージョン。

2.Node.jsのインストール

次に、ダウンロードした「node-v18.16.0-x64.msi」を実行し、表示されるウィザードに従いインストールを進めます。
こちらも、「同意する」にチェックを入れる以外はデフォルトのまま進めて問題ありません。

「I accept the terms in the License Agreement」にチェックを入れる

この後、
・インストール先フォルダの選択
・インストールするコンポーネントの選択
・C/C++からのコンパイルが必要なモジュールをインストールする際に必要なツールを自動でインストールするかどうかの選択
と続きます。

最後に、以下の画面が表示されたら、Node.jsのインストールは完了です。

Node.jsのインストールの最後のウィザード

Node.jsがインストールされると、
nodeコマンドと
npmコマンドが使えるようになります。では、それぞれ以下のコマンドを実行して試してみます。

node --version

npm --version

その結果、それぞれのバージョンが表示されたらインストール完了です。

コマンド「node –version」、「npm –version」の実行結果

1.インストール

これでようやく、Firebase CLIをインストールできます。
では、以下のコマンドを実行します。

npm install -g firebase-tools

実行後は少し待ちますが、以下のような表示になったらインストール完了です。

コマンド「npm install -g firebase-tools」の実行結果

2.認証とテスト

では、GoogleアカウントでFirebaseにログインします。
以下のコマンドを実行します。

firebase login

ログインできたら、さらに以下のコマンドを実行します。

firebase projects:list

その結果、画像のようにfirebaseで作成したプロジェクトの一覧が表示されればOKです。

コマンド「firebase projects:list」の実行結果

以上で、Firebase CLIのインストールは完了です。

では、さっそく進めていきます。
ここでは、以下のコマンドを実行するだけです。

dart pub global activate flutterfire_cli

すると、以下のような画面になります。

コマンド「dart pub global activate flutterfire_cli」の実行結果-1

コマンド「dart pub global activate flutterfire_cli」の実行結果-2

flutterfire configure

一点、Flutterプロジェクトのディレクトリで実行することだけ注意してください。
今回は、「flutterfire_test」というFlutterプロジェクトを使います。

上記のコマンドの実行から、表示に従って作業を進めていきます。

1.Flutterアプリを接続するFirebaseプロジェクトを選択する。

プロジェクトを選択

2.Flutterアプリの対象とするプラットフォームを選択する。

プラットフォームを選択

3.Firebase構成ファイルを作成し、lib/ディレクトリに追加する。

プラットフォーム選択後

lib配下に追加された「firebase_options.dart」

　　　　
1. Flutterアプリにコアプラグインをインストールする
2. FlutterアプリのFirebase構成を最新化する
3. コアプラグインと構成ファイルをインポートする
4. Firebaseを初期化する
5. Flutterアプリを再ビルドする

それでは、順番に作業を進めていきます。

1.Flutterアプリにコアプラグインをインストールする

以下のコマンドを実行し、コアプラグインをインストールします。

flutter pub add firebase_core

この際も、Flutterプロジェクトのディレクトリで実行する点に注意してください。

すると、画像のようにプロジェクトにプラグインが追加されていきます。

コマンド「flutter pub add firebase_core」の実行結果

2.FlutterアプリのFirebase構成を最新化する

実は、この作業はひとつ前の「Firebase用にアプリを構成」と同じです。
以下のコマンドを実行し、接続するFirebaseプロジェクトとプラットフォームを選択します。

flutterfire configure

3.コアプラグインと構成ファイルをインポートする

続いて、lib/main.dartファイルで、Firebase Coreプラグインと以前に生成した構成ファイルをインポートします。
lib/main.dartファイルに以下を追加します。

 import 'package:firebase_core/firebase_core.dart';
 import 'firebase_options.dart';

main.dartのimportに追加

4.Firebaseを初期化する

次は、lib/main.dartファイルで、構成ファイルによってエクスポートされたDefaultFireOptionsオブジェクトを使用してFirebaseを初期化します。
具体的には、以下のコードをlib/main.dart内のvoid main()内に追加します。

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

main.dartのmain()関数内に追加

もしエラーがなければ以下のコマンドを実行し、
上の画像のようなエラーが出ていたら、この後紹介している方法で修正してから、以下のコマンドを実行してください。
コマンドプロンプトかターミナルで実行できます。

flutter run

そして画像のようなページが開いたら成功です。

成功！

まず、エラー内容を確認します。
私の場合、
main.dartファイルに発生しているエラーは、

そして、firebase_options.dartに発生しているエラーは

というものでした。

main.dartのエラー

firebase_options.dartのエラー

コマンドプロンプトで以下のコマンドを実行します。

flutter pub add firebase_core

これで、main.dartに発生している

そして、firebase_options.dartに発生している

の3つのエラーが一度に解消されます。

ただ、これだけでは解消されず、以下のようなメッセージが表示されるかもしれません。

"firebase_core" is already in dependencies. Use pub upgrade firebase_core to upgrade to a later version!

もしそうなっていたら、コマンドプロンプトの表示に従い、以下のコマンドを実行します。

flutter pub upgrade firebase_core

私はこれでエラーが解消されました。

コマンド「flutter pub add firebase_core」の実行結果

では、残りの

を修正していきます。
こちらは、エラーが出ているmain()関数の

void main(){

となっている部分を、

void main() async{

とすれば完了です。

void main() async{　に修正し、エラーが消えました

【参考】