GitHubのissueに指示を出すだけ！OpenHands ResolverでFlutterアプリをAIに作らせてみた

はじめに

はじめまして！横浜市内でシステム開発の仕事をしている、ショウ（@shou-dev19）と申します。

最近、AIを使ったコーディングが大きな話題になっていますが、「何だか難しそう…」「何から手をつければいいのだろう？」と感じ、なかなか一歩を踏み出せずにいました。

そんなある日、フリーランスの先輩と飲む機会があり、こんな一言を言われました。

「今はもうGitHubにissueを作るだけでAIがコーディングをしてくれるよ」

その言葉に衝撃を受け、帰りの電車で早速「Github issue AI」と検索してみたところ、以下の記事がヒットしました。

この記事を読んで、「これなら自分にもできるかもしれない！」と感じ、早速AIコーディングに挑戦してみることにしました。
本記事は、私と同じようにAIコーディングに興味はあるけれど、まだ実践できていない方々の背中を少しでも押せたら、という思いで執筆しています。

なぜFlutterでカフェアプリ開発？

今回AIに開発を依頼するにあたり、テーマとして「Flutterを使ったカフェの注文アプリ」を選びました。
理由は以下の2つです。

1. 業務でFlutterを使っているから
   普段の業務でFlutterを使ったフロントエンド開発に携わっているため、基本的な知識があります。万が一AIのコーディングがうまくいかなくても、自分で修正したり、より的確な指示を出したりと、リカバリーがしやすいと考えました。

2. 趣味と実益を兼ねて
   個人的にカフェでモーニングをするのが趣味なので、自分で使うことを想像しながらカフェの注文アプリを作れたらシンプルに楽しいだろうな、と思ったのがきっかけです。

実際にAI開発で私がやったこと

自分でも驚いたのですが、今回のアプリ開発で私自身は一度もコードを書いていません。

私が実施したことは、本当に以下の準備と指示出しだけでした。

• GitHubにリポジトリを作成

  • まずはソースコードを管理するための空のリポジトリを用意しました。

• OpenHands Resolverを使うための準備

  • こちらは先ほど紹介した参考記事の手順通りに進めました。非常に分かりやすく、詰まることなく準備ができました。

• READMEにアプリの仕様・要件を記載

  • どんなアプリを作りたいのか、どんな機能が欲しいのかを自然言語で記述しました。（初めてだったのでかなりざっくり書いています）

• GitHubのissueで作業を指示

  • 「Flutterプロジェクトの初期インストールをお願いします。」「README.mdの情報をインプットとして、メニュー表示機能の実装をお願いします。」といった形で、やってほしいことをissueに起票していきました。
    • 今回、アプリの完成形のUIイメージは別の生成AIで作成し、pngファイルをリポジトリ内に置いてそれをUIイメージのインプットとしました。
    • fix-meというラベルを付けると、自動でOpenHandsがGithub Actions上でコーディングを開始してくれます。（OpenHands started fixing the issue! You can monitor the progress here.というコメントが自動で付くので、hereのリンクを押すとActionのjobを見に行けます）

• AIが作成したPull Requestのレビューとエラー解消指示

  • AIが作業を終えるとPull Requestが作られるので、その内容をレビューします。もちろん、AIも完璧ではないため、ビルドエラーやテストのエラーが発生することもありました。その場合は、「CIで以下のエラーが発生してしまいました。修正をお願いします。」とコメントで修正を指示するだけで、AIが自律的に修正してくれます。

これだけで、みるみるうちにアプリの形が出来上がっていきました。

AIコーディングを初体験して驚いたこと

今回初めてAIコーディングを体験してみて、未来感あふれるいくつかのポイントに衝撃を受けました。

1. 本当にコーディング作業が不要だった

一番の驚きは、前述の通り自分では一行もコードを書かずにアプリが完成したことです。
これまでは、仕様を基に自分でエディタに向き合い、うんうんと唸りながらコードを書いていましたが、今回は日本語で「次はこの機能をお願いします」と指示を出すだけ。まるでプロジェクトマネージャーやディレクターのような立場で開発が進んでいく感覚は、非常に新鮮でした。

2. スマホだけで開発が進められる

issueの作成やPull Requestのレビューは、GitHubのWebサイトやアプリから行えます。
つまり、パソコンを開かなくても、スマホさえあれば開発が進められるということです。
実際に、通勤中の電車内や休憩時間にスマホからサッとissueを起票したり、AIからの提案をレビューしたりしていました。時間や場所を選ばずに開発を進められるこのスタイルは、働き方を大きく変えるポテンシャルがあると感じます。

3. 自分のPCに開発環境が不要

Flutterで開発する場合、通常はPCにFlutter SDKやAndroid Studio/Xcodeなどの開発環境を構築する必要があります。しかし、OpenHands Resolverを使った開発では、コーディングからビルドまで、すべてクラウド上で完結します。

自分のPC上に開発環境を一切構築せずにアプリ開発ができたので、セットアップの手間が省け、信じられないほど手軽に感じました。新しい技術を試したいけれど環境構築が面倒…と感じる人にとって、これは大きなメリットだと思います。

成果物

今回、AIとの共同作業（？）によって作成したFlutterアプリのリポジトリはこちらです。

• 成果物: shou-dev19/flutter-cafe-app-ai

まだまだ改善点は多いため、引き続きアプリの修正をAIと共に進めていこうと思っています。AIとのやり取りの全記録がissueやPull Requestに残っているので、ご興味があればそちらもぜひご覧ください。

おわりに

今回初めて生成AIを用いたアプリ開発を実践してみました。本当に自分でコーディングをせずにここまでアプリを開発を進めてこれたことに改めて驚きました。

「AIが人間の仕事を奪う」という言葉を聞くこともありますが、今回OpenHands Resolverを使ってみて、「これは、単純作業はAIに任せ、人間はより創造的で本質的な作業に集中できるようになる。ということか」と、その言葉の意味が少しだけ、解像度高く理解できた気がします。

ただ、AIも決して万能ではないことも同時に体感しました。直してほしいエラーが直ってこなかったり、一つのエラーを直したら別のところでエラーが発生してしまったり。
これは私の指示が曖昧だったため、AIとしても「指示された範囲の作業はやったよ。何か文句ある？」という気持ちだったのかもしれません笑
このあたりは対人間でも対AIでも同じだな。と痛感しました。

生成AIの分野はとんでもない早さで新しいモデル・サービスが出てくるため、今後も置いて行かれないように新しい情報をキャッチアップしていこうと思います。

この記事が、皆さんのAIコーディングの世界への第一歩を踏み出すきっかけになれば幸いです。
最後までお読みいただき、ありがとうございました。

参考記事