Google Firebase 向け快適な開発環境 (言語:Typescript)

Firebase は Google クラウドサービスの一員で、低コスト・スケーラブルなWebシステムを開発できる。使わなければ維持費0円なので気軽に始められるし、仮に人気が出てアクセスが急増しても十分対応できる性能がある。本稿では筆者が4年くらい使い続けている快適な開発環境の作り方を紹介する。

快適な開発環境の条件

• コーディング⇒ビルド⇒テスト実行⇒修正のサイクルをすばやく行えること。そのためには、コードを修正したら自動で直ちにビルドされて、開発用のサーバに反映され、ブラウザ画面も自動で再表示されること
• デバッガが使えること。ブレークポイントの設定、ステップ実行、変数の内容を確認する機能が必須。サーバ側で動くプログラムとブラウザ内部で動くプログラムの両方についてこれらの機能が使えること
• 開発時に使用するテストサーバーが使えること。クラウドなので、本番サーバはGoogleの施設内にあるが、アップロードして反映させるにはどうしても時間がかかる。普段の開発中にすばやく結果を確認するためには、手元のPC上で動作するテストサーバーが必要だ
• テキストエディタと連携してコーディングを楽にしてくれること。構文エラーや、エラーではないが書き方が一貫してないなどの問題も直ちに指摘してくれること。自動補間機能などにより、長い関数名・変数名を楽に入力できるよう支援してくれること

利用するシステムやソフトウェアの概要

中心となるのは Vite で、上に挙げた条件のうちテストサーバー以外の条件をほぼ満たしいる。Firebase によってテストサーバーが提供されているので、これらを組み合わせて使おうというのが本稿の主旨である。

• Vite - 一言で言うと、ビルドツールと開発サーバの機能が一体になったラピッド開発環境。Vueの作者が作った。作者以外が作ったソフトをうまく組み合わせていて、esbuild を使って Typescript を高速にコンパイル、rollup.js で複数のファイルをバンドル（一つにまとめる）する。Vite の機能は Node.js を利用したテストサーバー部分で、プログラムの修正を監視して、修正されたら自動でコンパイルして、変更が必要なファイルをブラウザから読み直してブラウザ画面に反映させる。詳しい仕組みは知らないがよくできていて、プログラムでも、あるいはプログラムを含まない静的なHTMLファイルでも、画面表示に影響するファイルを修正したら数秒で自動的に画面が更新される。結果をすぐに確認できるから開発効率がいい
• Cloud Functions for Firebase - Typescript 言語で書いたプログラムをサーバー上で実行する機能。起動するサーバーの数を調整できる。例えば最小0、最大10に設定しておくと、普段はサーバーが起動していない状態で待機する。誰かがアクセスしたらサーバーが1個起動する。続けてアクセスが増えたら自動で追加のサーバーが最大10個まで起動する。逆にアクセスが減ると順次停止する。サーバーは利用料がかかるが、0個のときは0円で維持できるのでリーズナブルだ。逆に将来どんなにアクセスが増えても、サーバーの数を増やすことで対応できるし、世界各地にあるリージョン（サーバーが入ってる施設）を複数利用してさらなる需要（ユーザー）にも対応できる
• Cloud Firestore - クラウド型のデータベース。簡単に言うとRDBより単純・低機能だがスピードがRDBよりずっと速い。容量も最初から決める必要がなくて、使った分だけいくらでも自動で拡張される。RDBサービスはたいてい月額数千円くらいの維持費がかかるが、Firestore の維持費はストレージ（＝ハードディスクのレンタル代）だけなので安い (1GB当たり月額30円ぐらい) もちろん使ったら別途アクセス量がかかるが、使った分だけで済む。使いこなすには少しクセがあるが、魅力的な価格なので試す価値はあると思う
• Firebase Hosting - Webサーバーの機能を提供する。こちらも固定の維持費がかからなくて、ストレージ維持費とアクセス料がかかる。つまり使わなければ無料で、使えば使った分だけ課金される（なお、App Hostingという新しいサービスもあるが別物。ここでは Hosting の利用を紹介する）
• Firebase Local Emulator Suite - Firebase の開発元から提供されているエミュレータ―で、Firebase の一部の機能を手元のPCで模擬動作させる。プログラムを修正したとき、本番サーバーを更新するよりもすばやく更新を反映させて結果を確認することができる。またデータベースに格納されている内容を表示・変更できるGUIもある
• Vue.js (vue3) - JavaScript 向けの人気の Web フレームワーク。Typescript もサポートしている
• Vue.js devtools - Vue.js を使って作られたアプリのデバッグに便利なブラウザの拡張機能。ブレークポイントの設定などはブラウザ本体の機能だけでできるが、これを使うとさらに Vue のコンポーネントの状態などを見ることができる。
• TypeScript - JavaScript に型チェック機能を追加したプログラミング言語。プログラミング作業の中で大きな割合を占めるのがバグ取りであり、型チェック機能はバグの発生を抑えるのに効果的なので人気がある
• Visual Studio Code (vscode) - テキストエディタにはvscodeを使用する。加えて、Vue - Official プラグインと VS Code ESLint extension プラグインを組み合わせて使用する
• Vue - Official プラグイン - Web画面を作るときに、一つの画面に対してプログラムとHTMLテンプレートとCSSの3つの要素が関わっている。vue3 ではこれらを一つのファイルに格納するSFCという便利な機能が使える。このvue独自のSFCフォーマットを認識して、その中に含まれるプログラムやHTML、CSS の構文エラーなどを表示するために使用する
• VS Code ESLint extension プラグイン - Typescript プログラムをコンパイルすると、間違った型を使用したときなどにエラーを指摘してくれるが、コンパイルには時間がかかる。ESLint を使うと、コンパイルしなくても素早くエラーを指摘してくれる。このプラグインは ESLint を vscode と連携させ、エラー内容を vscode 画面に表示する
• Git - 本稿と直接関係ないが、Git でバージョン管理することももちろん可能
• その他、必要に応じて他の Firebase サービスや GCP (Google Cloud Platform) とも組み合わせられる。例えばログインなどの認証機能を提供する Firebase Authentication、セキュリティを強化してフィッシング詐欺等を防止する App Check、サイズの大きいファイルを効率よく配信する Cloud Storage、システム構成の設定変更や、ユーザの種類別に少し動作を変えたりすることが簡単に構成できる Firebase Remote Config などがある。もちろん、AIとか高度なサービスも利用できるが、ここで挙げたものは多くのWebシステムに共通した基本的な機能を簡単に作るために役立つお奨めの機能だ

準備

Firebase プロジェクトの作成

1. クレジットカードが必要。本稿で紹介する内容は、低コストが大きな選択理由で、たくさん使わなければ0円の可能性も高い。それでも先にカード情報を入力しないとGoogle が納得してくれないので仕方ない（プリペイドのカードとかはダメかも知れない）
2. ブラウザで Firebase を開いて、右上のログインをクリックしてGoogle アカウントでログインする（Google アカウントとは、Google のサイトにログインできるメールアドレスのこと。なければ GMAIL で無料で作成できる）
3. Firebase プロジェクトを作成する。Firebase のドキュメント の右上の方にある「Go to console」をクリックするとプロジェクトの選択画面になるので「プロジェクトを作成」をクリックする。後は画面の指示に従って進める
4. リージョンを選択する。地図はこちら。地理的にどこにサーバーを配置するかを選択する。サービスによっては後から変更できない場合がある。（変更するにはプロジェクトを作り直す）日本で利用するなら東京リージョン (asia-northeast1)、価格が安いのはアイオワ (us-central1) などを選択する （Firestore はサービスを有効化する段階で選択する。Functions はプログラムの中で指定できるなど、サービスによって少し異なる。ただし、Firestore はアイオワで Functions は東京とか、ちぐはぐな構成も可能だが、すごく効率悪いと思われるのでやめた方がいい）
5. プロジェクトの課金を有効にする。新しいプロジェクトを作った直後では「Sparkプラン」となっていて、有料のサービスが使えない状態になっている。これなら課金されることがないから安心とも言える。残念ながらこれではまともに使えないので課金は必須。ただし、切り替えてもすぐに費用が発生するわけではなくて、課金されるのはあくまで何かサービスを使ったときだ。（当然だが）プロジェクトの画面で (URL=[https://console.firebase.google.com/project/<プロジェクトID>/overview]) 左下に「Sparkプラン」と表示されていたら、変更をクリックして「Blazeプラン」に変更する
6. 利用する Firebase サービスのAPIを有効化する。プロジェクトごと、利用するサービスごとに有効化をしないと使えない。Functions, Firestore, Hosting, Storage などを有効化する。やり方は、Firebase のコンソールを表示して（Go to consoleをクリック）、プロジェクトを選択、左のカラムで対象の製品を選択する。各製品トップ画面で「使ってみる」とか「Get Started」などと書かれている説明に従えば簡単にできる

vscode のインストール

もちろん任意のテキストエディタを利用可能だが、本稿で紹介しているエディタとの連携を試すには、Visual Studio Code (vscode) をインストールする。

さらに vscode を実行して、Extensions view を開く(Ctrl+Shift+X)。左上の検索窓で検索して、Vue - Official プラグイン と VS Code ESLint extension プラグイン をインストールする。

Node.js と firebase-tools のインストール

• Node.js をダウンロードしてインストールする。安定バージョンの中で最新のものは本稿執筆時点で v20 だが、このバージョンは Firebase がまだ対応していない （参照）ので v18 をインストールすること
• Firebase CLI をインストールする。そのためには、Windows のコマンドプロンプトや Unix シェルターミナルで以下を実行する

command.com

    npm install -g firebase-tools

• Vue3、Vite、Typescript、ESlint などについては、Node の機能でインストールされるので、別途インストールする必要はない

Vue.js devtools のインストール

Firefox や Chrome ブラウザの拡張機能の画面を開いて検索ボックスに Vue.js devtools を入力して、インストールする（Vue.js devtools）

環境構築（簡単な方法）

1. GitHub で公開している構築済みの環境をダウンロードする。

   緑色の「Code」ボタンクリックして「Download ZIP」を選択するか、git クローンする。

   command.com

   git clone https://github.com/yosikawa/altalk-test4.git
   

2. vscode で開く

   vscode の File メニュー "Open Workspace from File" で workspace.code-workspace ファイルを開く。ESLint が動作しているはずなので、プログラムを変更するなどして確認する。

3. ビルドする

   command.com

   npm i
   npm run build
   

4. vite テストサーバーを実行する

   command.com

   npm run dev
   

   vue のプログラムやHTMLテンプレートなどを修正すると、vite によって自動的に更新される。

5. Functions のソースをコンパイルする

   別のコマンドプロンプトを開いて以下を実行する。

   command.com

   cd functions
   npm i
   npm run build:watch
   

   tsc --watch コマンドにより、TypeScript プログラムを監視して、変更があれば自動的に更新する。次の Firebase エミュレータも変更を検知して更新される。

6. Firebase エミュレータを実行する

   さらに別のコマンドプロンプトを開いて以下を実行する。

   command.com

   firebase emulators:start
   

   Functions のデバッグをするときは代わりに以下を実行する。

   command.com

   firebase emulators:start --inspect-functions
   

7. Firebase エミュレータのGUIを開く

   ブラウザで [http://127.0.0.1:4000/] を開く。

8. アプリのサンプル画面を開く

   ブラウザで [http://localhost:5173/] を開く。ブラウザ画面でF12を押すと、TypeScript のデバッグができる。

9. vscode のデバッガを起動する

   vscode の Run and Debug view を表示して（Ctrl+Shift+D）左上の緑の三角アイコンをクリック(F5)してデバッグモードにする。

   Functions の任意のソースファイル functions/src/index.ts などを開いて、適当な行の行番号のすぐ左をクリックしてブレークポイントを設定する。ブラウザのアプリ画面から Functions の機能を呼び出せば、ブレークポイントで停止するはず。

   準備が整うまで数秒～10秒くらい、やや待たされることがある。

環境構築（最初から自分で構築する方法）

概要としては npm create vite で vite+vue+ts 環境を作って、同じディレクトリで firebase init を実行して Firebase 環境を重ねて構築する。そのままだと独立して動くだけなので、連携して動作する仕掛けを追加する。

詳細は環境構築手順を参照。

その他

• Firebase エミュレーターは Ctrl-C で終了させるが、うまく停止しない場合がある。画面に「停止させるには～」と表示されていればそれで止めてもいいし、ダメならタスクマネージャーの詳細タブで java を探して強制終了させる。
• vscode のデバッガから Firebase エミュレーターに接続するポート番号はデフォルトで9229だが、使用中などのときは変わるかも知れない。画面に表示されているので確認する。
• 完成したアプリを Google のサーバーにアップロードするには、npm run build と firebase deploy を実行する
• watch モードで Functions のコンパイルを実行したまま firebase deploy すると、失敗することがある。また、 Functions のプログラムを何も修正しないで deploy したときに、エラーになることがあった。何か変更して再度 deploy すると2回目はたいてい成功する。firebase のスクリプトのバグかも知れない
• アプリのURL はデフォルトで [https://project-id.web.app] のようになる。ドメイン名を買って、独自ドメイン名にすることもできる
• Firebase Hosting は cookie が一つしか使えず、名前は __session に固定されている（参照）
• デフォルトではルートの index.html が唯一の html ファイルで、
  vue でシングルページのアプリを作っていく状態になっている。複数の html を使う場合は vite.config.js を修正する（マルチページアプリを参照）
• テスト環境で Firebase Authentication を使いたいときは、認証の設定が必要（管理者の認証情報を設定するを参照）