ゼロから始めるFirebaseでREST API実装その3~VS Codeでプロジェクトを開く~
こんにちは、ワニかず@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
のフォルダを開くと、
このような状態まで持っていければ、
このフォルダで開発ができる状態が完了です。
Discussion