【ITニュース解説】I built FireScope: a Chrome DevTools panel for Firestore (open-source)

FireScopeは、Googleが提供するクラウドデータベースサービスであるFirestoreを利用するアプリケーションの開発者を強力にサポートするために開発された、Chromeブラウザの拡張機能である。具体的には、Chrome DevToolsと呼ばれる開発者向けツールのパネルとして動作し、アプリケーションとFirestoreの間で行われるすべての通信をリアルタイムで監視し、その詳細を分かりやすく表示する。システムエンジニアを目指す初心者がWebアプリケーションを開発する際、自分のアプリケーションがデータベースに対してどのようなリクエストを送っているのか、そのリクエストにどのようなデータが含まれているのかを正確に把握することは、デバッグ作業や機能開発において非常に重要になる。しかし、従来のツールではFirestoreの通信を詳細に追うのが難しく、開発者は多くの手間をかけていた。FireScopeは、この「見えない部分」を「見える化」することで、そのような開発者の課題を解決するために作られたツールである。

このツールの中核となる機能は、Firestoreへのあらゆるリクエストをライブで捕捉し、明確な詳細情報を提供する点にある。アプリケーションがFirestoreからデータを読み込む際（リード）、データを書き込む際（ライト）、あるいは特定の条件でデータを検索する際（クエリ）、これらのすべてのアクションがFireScopeのパネルに即座に表示される。表示される情報には、リクエストの種類（メソッド）、通信が行われたデータベースのパス、送信されたパラメーター、そしてデータの書き込み時に使われたボディ（データ本体）などが含まれる。これらの詳細が一目でわかるように整理されているため、開発者は自分のアプリケーションが意図した通りの通信を行っているかを瞬時に確認できる。Chrome DevToolsの「ネットワーク」タブでも同様の通信は見られるものの、FireScopeはFirestoreに特化しているため、余計な情報に惑わされることなく、必要な情報に集中できるという利点がある。

特に便利なのが、ワンクリックでコードをエクスポートする機能である。FireScopeは、監視したFirestoreのリクエスト内容を元に、Angular、Node.js、Flutterといった主要な開発フレームワークや、汎用的なJSON形式のコードスニペットを生成できる。例えば、アプリケーションで特定のデータ取得クエリが実行されたとする。開発者はFireScopeでそのリクエストの詳細を確認した後、ボタン一つでそのクエリを実行するためのコードをAngularのサービス、Node.jsのサーバーサイドヘルパー、またはFlutterのDartコードとして出力できるのだ。これは、同じリクエストを別の環境で再現したり、テストコードを作成したり、チームメンバーと特定のデータベース操作について共有したりする際に非常に役立つ。エクスポートされたコードはそのまま使える「たたき台」であり、開発者はそれをコピー＆ペーストして、必要に応じて微調整するだけで済むため、時間と労力を大幅に節約できる。

他にも、データベース内のコレクションを一覧表示し、素早くナビゲートできるコレクションビュー機能も搭載されている。これにより、大規模なデータベース構造を持つアプリケーションであっても、目的の通信やデータに簡単にアクセスできる。FireScopeはオープンソースとして公開されており、誰でもそのソースコードを閲覧し、改善提案や機能追加に貢献できる。これは、コミュニティの力を借りてツールをさらに進化させ、より多くの開発者のニーズに応えていくことを目指している証である。

FireScopeは、Firestoreのデバッグ作業に多くの時間を費やす開発者、再現可能なコードスニペットをチームメイトと共有したい開発者、そしてエクスポートされたコードを素早く利用して開発を進めたい開発者にとって特に有益である。

利用開始は非常に簡単である。まず、Chrome Web StoreからFireScope拡張機能をインストールする。次に、自身の開発中のアプリケーションを開き、F12キーを押してChrome DevToolsを起動する。DevToolsのパネルの中から「FireScope」タブを選択すれば準備は完了である。あとは、アプリケーション内でFirestoreに関連する操作（例えば、データを表示するページを読み込んだり、データを書き込むボタンを押したりする）を行うと、FireScopeパネルにその通信内容がリアルタイムで表示される。表示されたリクエストのいずれかをクリックすると、その詳細情報が表示され、必要であればコードエクスポート機能を利用できる。もし、FireScopeパネルを開いても何も表示されない場合は、Firestoreに対する何らかのアクションをトリガーする必要があることを意味する。

このツールの開発において、ユーザーのプライバシーとデータセキュリティは非常に重要な要素として考慮されている。FireScopeは完全にユーザーのブラウザ内で動作する。つまり、監視されるFirestoreの通信データが外部のサーバーに送信されたり、記録されたりすることは一切ない。DevToolsを通じてブラウザタブ内のFirestoreネットワークアクティビティを検査するだけであり、いかなるサーバーとの通信も行わず、ユーザー追跡の機能も持たない。これにより、機密性の高い開発データも安心してFireScopeで扱うことができる。

万が一、FireScopeの利用中に問題が発生した場合の基本的なトラブルシューティング方法も提供されている。例えば、FireScopeパネルが表示されない場合は、DevToolsを一度閉じて再度開くか、ページをリロードすると解決することが多い。リストが空の場合は、前述の通りFirestoreに対する操作を行う必要がある。これらの基本的な対処法を試しても問題が解決しない場合は、GitHubのリポジトリにissueを投稿することで、開発者からサポートを受けることが可能である。

FireScopeの開発は現在も継続されており、将来的な機能拡張のアイデアも複数検討されている。具体的には、React、Svelte、Next.jsのサーバーアクションなど、より多くのフレームワークや環境に対応するエクスポートターゲットの追加が計画されている。また、表示されるリクエストを特定の条件で絞り込んだり、過去のセッションを固定して後から参照したりできるフィルター・検索機能、テストコード作成に特化したテンプレート、さらには操作を効率化するショートカットキーの実装などもロードマップに含まれている。これらの機能は、FireScopeをより強力で使いやすいツールにするためのものである。開発者は利用者のフィードバックを積極的に求めており、ツールの改善に貢献したい場合は、GitHubを通じて意見を共有したり、実際にコードの変更を提案したりできる。

このツールは、Firestoreを利用したWebアプリケーション開発におけるデバッグやプロトタイピングのプロセスを大幅に簡素化し、開発者がより効率的に作業を進められるように支援することを目的としている。