❤️‍🔥

ゼロから始めるFirebaseでREST API実装その３~VS Codeでプロジェクトを開く~

2025/03/02に公開

Firebase

VS Code

tech

こんにちは、ワニかず@40歳出戻りエンジニアです。

FirebaseでREST APIを実装するために、今回は、

VS Codeでプロジェクトを開いて、
コーディングをスタートできる状態
まで設定を進めていきたいと思います。

今回の作業をするまでに必要な作業は
こちらにまとめています。

環境

OS：Mac
※Windowsに関しては別途まとめたいと思います。

手順

firebase init functionsを実行

Macでターミナルを開き（アプリケーション > ユーティリティ > ターミナル）

firebase init functions

を実行します。すると、

######## #### ########  ######## ########     ###     ######  ########
##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
######    ##  ########  ######   ########  #########  ######  ######
##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
##       #### ##     ## ######## ########  ##     ##  ######  ########
You're about to initialize a Firebase project in this directory:
/Users/xxxxxxxxx
Before we get started, keep in mind:
* You are initializing your home directory as a Firebase project directory

というメッセージが流れる方もいると思います。

この中の
You are initializing your home directory as a Firebase project directory
という警告メッセージは、

「現在ホームディレクトリでこのコマンドを実行してますよ」
ということを示しています。

これは通常推奨されないということで、
Ctrl+Cでこの処理をキャンセルし、

まず、プロジェクト用の新しいディレクトリを作成＆移動

mkdir my-firebase-project
cd my-firebase-project

そのディレクトリ内で初期化を行う

firebase init functions

とした方がいいそうです。
私は何のこっちゃわからなかったので、そのまま続行してしまいました。

Project Setupの選択

firebase init functions

を実行すると、以下のような選択肢が出ると思います。

=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

このメッセージは、Firebaseプロジェクトの初期設定を行うための選択画面です。
それぞれの意味は、

Use an existing project（既存のプロジェクトを使用）
Create a new project（新しいプロジェクトを作成）
Add Firebase to an existing Google Cloud Platform project（既存のGCPプロジェクトにFirebaseを追加）
Don't set up a default project（デフォルトプロジェクトを設定しない）

ということですが、
こちらの手順でプロジェクトは作成が済んでいるので、Use an existing projectを選択します。

プロジェクトの作成が済んでいない方はこちらの記事をご覧ください。

プロジェクトを選択

Use an existing projectを選択すると、

? Select a default Firebase project for this directory:(Use arrow keys)
❯ xxxxxxxx

という選択肢が出ると思います。
こちらで作ったプロジェクトが選択肢にあると思うので、それを選びます。

選択すると

i  Using project xxxxxxxx (xxxxxxxx)

と表示されて、次の設定に進みます。

Functions Setupの選択

続いて、

=== Functions Setup
Let's create a new codebase for your functions.
A directory corresponding to the codebase will be created in your project
with sample code pre-configured.

See https://firebase.google.com/docs/functions/organize-functions for
more information on organizing your functions using codebases.

Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? (y/

と表示されるかと思いますが、
これはFirebase Cloud Functionsの設定画面で、以下の2つの質問が表示されており、

What language would you like to use to write Cloud Functions?
- Cloud Functionsを書くのに使用するプログラミング言語を選択します
- JavaScriptが選択されている状態です
Do you want to use ESLint to catch probable bugs and enforce style?
- ESLint（コード品質チェックツール）を使用するかどうかを尋ねています
- y/n で回答できます
- ESLintを使用すると：
  - コードの潜在的なバグを見つけてくれる
  - コードスタイルを統一できる
  - コードの品質を保つのに役立つ

ここでは「y」を入力して先に進みます。

セットアップの最終確認

続いて、

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? Yes
✔  Wrote functions/package.json
✔  Wrote functions/.eslintrc.js
✔  Wrote functions/index.js
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? (Y/n)

と表示されると思いますが、
これは、以下のファイルが作成され、必要なパッケージのインストールを確認しています。

作成されたファイル：

functions/package.json - プロジェクトの依存関係管理ファイル
functions/.eslintrc.js - ESLintの設定ファイル
functions/index.js - Cloud Functionsのメインコードファイル
functions/.gitignore - Gitで無視するファイルの設定

質問 Do you want to install dependencies with npm now? は
「npmで必要なパッケージをインストールしますか？」という意味です。

ここではyを入力して Enter を押し、
必要なパッケージのインストールを進めます。

セットアップの完了

✔  Firebase initialization complete!

と表示されればセットアップ完了です。

VS Codeで開く

firebase init functions を実行したディレクトリは、
以下のような構造で作成されており、

your-project-directory/
  └── functions/
      ├── index.js        # メインのコードファイル
      ├── package.json    # 依存関係の設定ファイル
      ├── .eslintrc.js    # ESLintの設定
      └── .gitignore      # Gitの除外設定

your-project-directory、
もしくはfunctionsのフォルダでVS Codeを開きます。

私はホームディレクトリでfirebase init functions を実行してしまったため、
functionsでプロジェクトを開いて作業をすることとしました。

VS Codeでfunctionsのフォルダを開くと、

このような状態まで持っていければ、
このフォルダで開発ができる状態が完了です。