【ITニュース解説】Why We Built HuTouch: Automating Figma to Flutter Without “Vibe Coding”

システムエンジニアを目指す人にとって、現代のソフトウェア開発の現場では、多くの新しい技術やツールが登場し、その進化は目覚ましいものがある。特に、モバイルアプリ開発の分野では、ユーザーインターフェース（UI）のデザインから実際のアプリケーションのコード生成まで、様々な工程が効率化されようとしている。しかし、その過程で新たな課題も生まれているのが現状だ。

この記事は、モバイルアプリ開発フレームワークの一つであるFlutterを用いた開発において、現在多くの開発者が直面している課題と、それを解決するために「HuTouch」という新しいツールがどのように役立つのかを解説している。Flutterは、Googleが開発したオープンソースのUIソフトウェア開発キットであり、iOSやAndroidなど複数のプラットフォーム向けに、一つのコードベースから高性能なアプリケーションを構築できることで人気を集めている。

記事の筆者は、150人以上のFlutter開発者と話し合い、彼らの開発ワークフローにおける共通の課題を浮き彫りにした。その中でも特に重要だったのは、デザインツールであるFigmaからAIを使ってFlutterコードを生成する、いわゆる「Figma to Flutter（F2F）」の現状に対する不満だ。Figmaは、Webサイトやモバイルアプリのデザインを行うためのクラウドベースのデザインツールで、デザイナーが直感的にUIを設計できる。最近では、このFigmaで作成されたデザインから、AIが自動的にコードを生成する機能が注目を集めている。しかし、開発者たちの声によると、AIが生成するF2Fのコードは、そのまま本番環境で利用できる品質には達していないという。

具体的には、AIが生成したコードはプロジェクトで定められたコーディング規約や標準を無視することが多く、結果として開発者が手動で修正する手間が増え、かえって時間がかかってしまうのだ。開発者は、AIに指示を出すための「プロンプト」の記述を「Vibe Coding」（フィーリングや感覚に頼ったコーディング）と表現している。これは、明確な指示を与えても信頼性の高い結果が得られず、まるで手探りでコードを書いているような状態を指す。また、どのプロジェクトでも繰り返し必要となる「ボイラープレートコード」（定型的な繰り返しコード）の記述に、依然として多くの時間を費やしていることも明らかになった。AIは、こうした退屈で反復的なコーディング作業をなくすどころか、それを新しいワークフローの中に組み込んでしまっただけだと開発者は感じている。

このような現状の課題を解決するために開発されたのが「HuTouch」だ。HuTouchは、AIによるプロンプト入力に依存するのではなく、「自動化」に焦点を当てることで、これまでのツールとは異なるアプローチをとる。

HuTouchの大きな特徴は、開発者がすでに使用しているさまざまなツールと統合し、プロジェクトの仕様を自動で抽出する点にある。具体的には、UIデザインのFigma、APIテストツールのPostman、そしてコードを書くための統合開発環境（IDE）などと連携する。これにより、HuTouchはプロジェクトの全体像を正確に把握し、必要な情報を自動で収集できるのだ。

次に、HuTouchはコミュニティで確立され、テストされてきた「ブループリント」（設計図やテンプレート）を適用する。これには、「状態管理」（アプリケーションのデータや状態をどのように管理するか）のパターン、特定の「コーディング標準」（コードの書き方のルール）、そして「クリーンアーキテクチャ」（保守性や拡張性の高いアプリケーション構造の設計思想）などが含まれる。これらのブループリントを適用することで、生成されるコードは単なる羅列ではなく、信頼性が高く、将来的な変更にも柔軟に対応できる基盤を持つことになる。

最終的にHuTouchは、感覚的なプロンプト入力やVibe Codingに頼ることなく、強固で「本番環境対応」（実際にサービスとして公開できる品質）のFlutterの「足場」（Scaffolding、プロジェクトの基本的な構造やテンプレートコード）を生成する。この足場がしっかりしていれば、開発者は基本的な部分に時間を取られることなく、すぐにアプリケーションの具体的な機能開発に着手できる。

HuTouchは、開発者を完全に置き換えることを目的としていない。むしろ、プロジェクトにおける繰り返し発生する作業、例えば足場の構築、プロトタイプの作成、そしてボイラープレートコードの記述といった、全体の30%から40%を占める退屈な部分をHuTouchが肩代わりする。これにより、開発者は本来集中すべき、より価値の高い作業に時間を割けるようになる。具体的には、美しい「デザイン原則」の適用、アプリケーションの「カスタマイズ」、複雑なビジネスロジックの実装、そして自分自身が本当に「所有したい」と思える、創造的で価値のあるコードの記述に集中できるのだ。

なぜこのアプローチが重要なのか。150人以上の開発者との対話から、一般的なFlutterプロジェクトでは、全体の30%から40%もの時間がプロトタイプ作成やボイラープレートコードに費やされていることが判明している。また、開発者たちは、AIがランダムにコードを吐き出すような「AIマジック」を求めているわけではないことも明らかになった。彼らが本当に求めているのは、自分たちのコーディング標準を尊重し、より迅速なアプリケーションのリリースを可能にする、信頼性の高い「自動化」なのである。

HuTouchは、まさにこの原則、「プロンプトよりも自動化」に基づいて構築されている。現在、HuTouchは早期ベータ版として、50人のFlutter開発者に向けて公開されている。もし、開発ワークフローにおける繰り返しの部分を削減したいと考えるなら、この新しいツールを試すことができる。記事には、HuTouchが実際に動作する様子を示す短いデモ動画へのリンクも含まれており、興味を持った開発者がその具体的な機能を確認できるようになっている。

筆者は最後に、現在のFlutter開発ワークフローで最も繰り返しが多く退屈に感じる部分や、ボイラープレートコードと「本当の」コーディングに費やす時間の割合、そしてAIアシストツールを試して実際に時間が節約できたかどうかについて、開発者コミュニティからのフィードバックを求めている。HuTouchは、このような直接的なフィードバックを基に、より良いツールへと進化していく方針であることが示されている。これは、開発者自身の声が、新しいツールの未来を形作る上でいかに重要であるかを示していると言えるだろう。