【ITニュース解説】Why We Built 2 Local-First B2B Mobile Apps Using Flutter and React 19 + Capacitor 8
2026年10月17日に「Dev.to」が公開したITニュース「Why We Built 2 Local-First B2B Mobile Apps Using Flutter and React 19 + Capacitor 8」について初心者にもわかりやすく解説しています。
ITニュース概要
VanzaLabsは、データプライバシーとオフライン利用を重視するLocal-Firstなモバイルアプリを2つ開発した。Google Sheets連携にはFlutterを、複雑な請求書生成にはReact 19とCapacitor 8を採用。各技術の特性を活かし、AIも活用し2人体制で迅速な開発を実現した。
ITニュース解説
プロダクトエンジニアリングスタジオのVanzaLabsは、クライアントに「ゼロから実用的なソフトウェアを開発できる」ことを証明するため、中小企業や個人事業主が抱える具体的な課題を解決する2つのモバイルアプリを開発し、Google Playに公開した。これは単なる見せかけのモックアップや練習用のアプリではなく、実際に現場で役立つツールを作ることで、自分たちの技術力と開発能力を示したものだ。
彼らがアプリ開発で特に重視したのは、「Local-First(ローカルファースト)」というアーキテクチャの採用だ。これは、アプリがインターネット接続に依存せず、デバイス上で完全に動作するか、ユーザー自身のクラウドサービス(Google Driveなど)と直接連携する設計を指す。この方式を選んだのは、従来の多くのモバイル生産性ツールが抱える2つの大きな課題を解決するためである。一つは「データプライバシーと信頼性」の問題だ。個人事業主や企業は、顧客リストや契約情報などの機密データが、見知らぬ第三者のサーバーに保存されることを嫌がる。もう一つは「オフライン時の信頼性」だ。建設現場や倉庫など、モバイル通信が不安定な場所で作業する人にとって、インターネットがなければ使えないアプリは実用的ではない。Local-Firstの設計を採用することで、データはユーザーのデバイス内か、ユーザー自身が管理するクラウドストレージにのみ存在し、外部のサーバーを介さないため、プライバシーとオフラインでの安定稼働を両立できるのだ。
開発されたアプリの一つ目は、「FormGrid」というGoogle Sheets™とForms™に特化したモバイルワークスペースである。Google Formsでアンケートを作成したり、Google Sheetsに新しい注文データを追加したりする際、スマートフォンのブラウザでは操作しにくいという課題があった。FormGridは、高速な現場作業のために、この問題を解決すべく作られた。技術スタックには、高いパフォーマンスとネイティブに近いUIを実現できる「Flutter」(プログラミング言語はDart)を採用している。FormGridは、モバイルアプリからGoogle APIへ直接接続し、必要なファイルのみにアクセスする「Direct Client-to-API Architecture」を取る。インターネット接続がない状況でシートに行を追加しても、そのデータは一時的にデバイス内に保存され、「Offline Sync Queue」という仕組みによって、接続が回復したときに自動的にGoogle Sheetsへ同期される。さらに、注文書や在庫管理、勤怠管理といったビジネス向けのテンプレートや、フォームにすぐに使えるQRコード生成機能、OSの共有機能を使ったファイルインポートなど、現場での利用を想定した便利な機能が搭載されている。
二つ目のアプリは、「Vanza Invoices & Contracts」という、職人向けの請求書・契約書PDF生成ツールである。建設業者やフリーランスの職人たちは、見積もりを紙やチャットでやり取りしがちだが、クライアントはきちんとしたプロフェッショナルなPDFをその場で求める。このニーズに応えるのがVanza Invoices & Contractsだ。このアプリの開発には、Flutterではなく「React 19」と「Capacitor 8」が選ばれた。Flutterはリスト表示の性能やOSとの連携において高い性能を発揮するが、Vanza Invoices & Contractsでは、複雑な動的フォーム、項目ごとの税金・割引の自動計算、13言語20種類以上の通貨に対応した金額の表記、そして12種類のPDFテンプレートのレンダリングといった、複雑なドキュメントレイアウトの開発が中心だったためだ。React 19とTailwind CSS 4をCapacitor 8の環境で使うことで、これらの複雑なレイアウトをより迅速に開発し、変更を加えられたとされている。Vanza Invoices & Contractsも「Local-First」の原則に従い、顧客情報やサービスカタログ、料金、生成されたドキュメントはすべてユーザーのスマートフォン内に保存されるため、サインアップは必須ではない。「IndexedDB」(Dexie.jsというライブラリを使用)というブラウザのローカルデータベース機能を使って、完全にオフラインで動作する。顧客がスマートフォン画面に指で直接サインしたり、職人が会社のPNGスタンプを重ねて、WhatsAppやメールなどでPDFをワンタップで共有したりする機能も備わっている。オプションとして、ローカルデータをGoogle Driveにバックアップすることも可能だ。
VanzaLabsはたった2人の共同創業者チームでありながら、これら2つのアプリを迅速に開発し、リリースした。その秘訣は、最新のAIコーディングエージェントの活用と、厳格なアーキテクチャレビューにある。AIはコード生成のスピードを大幅に向上させるが、アプリ全体の設計や構造(アーキテクチャ)を決めるのは、人間のエンジニアの役割であるという考え方を彼らは重視している。Google Play Consoleのアカウント設定から、オフライン同期の仕組み、サブスクリプション課金の実装に至るまで、実際に動く製品をリリースするには、あらゆる側面にわたる徹底したエンジニアリングの厳密さが不可欠だと学んだのだ。
VanzaLabsは現在、自社アプリを成長させつつ、他のスタートアップや中小企業向けに、Web・モバイルアプリ開発やAI・ワークフロー自動化の支援も行っている。彼らの開発したアプリや技術選択について、今後も多くのフィードバックを求めている。