Zenn
👌

新時代のアプリケーション開発~bolt.newとGitHub Copilot Workspaceを触ってみた~

2025/01/15に公開
React
コード生成
GitHub Copilot
生成 AI
bolt.new
tech

はじめに

OpenAIが2024年12月に開催した「12 Days of OpenAI」では、「o3」の発表があり、これまでのAIモデルから更に飛躍的な進化を遂げたモデルの紹介がありましたね。
ここ1年ほど、生成AIモデルの進化が著しいですが、当然我々エンジニアの開発スタイルも変化を遂げてきています。

以下の記事は筆者が1年半ほど前に書いた記事ですが、正直現在の各種AIサービスを考えると古い使い方が目立っていますね。。。
https://zenn.dev/raku/articles/7b647a11a7a766

最近個人的に注目しているのが、「テキストのみで自律的にプログラムを生成するAIツール」の登場です。
有名どころだと、以下のようなサービスがあります。

https://www.publickey1.jp/blog/24/_aijulesgoogle.html

上記のうち、「GitHub Spark」及び「GitHub Copilot Workspace」は現在テクニカルプレビュー版で、waitlistに登録したユーザーに対して、順番に提供しているようです。
私はどちらもwaitlistに登録しているのですが、執筆時点（2025年1月）では「GitHub Spark」はまだ利用出来ないため、今回は「GitHub Copilot Workspace」を利用してみたいと思います。

また、「Devin」は一番有名かつ強力なAIサービスですが、価格も月額500ドルと中々強力なので。。。
今回は「Bolt.new」と「GitHub Copilot Workspace」の2つに絞って試してみたいと思います。

参考までに、各サービスの料金表を載せておきます（詳細は各サービスのページをご確認ください）。

サービス名 料金・プラン 備考
Devin 500ドル/月 合計62.5時間/月までの作業依頼が可能
Bolt.new 20ドル/月 ～
（無料プランあり）		 有料/無料どちらも使用するトークン数に制限あり、追加課金でトークン量増加可能
GitHub Spark 不明 GitHub Next による新機能プロトタイプ。正式リリース時の価格は未定。
GitHub Copilot Workspace 10ドル/月～ GitHub Copilot 連携の開発環境。GitHub Copilotの契約をしていれば利用可能

各サービスの紹介

Bolt.new

オンラインIDEを提供するサービス「StackBlitz」を運営するStackBiltz社が提供するサービスです。
Bolt.newのサイトに行くと、下のような画面が開かれます。

テキストボックスに作成したいアプリケーションを記載すれば、すぐに作成してくれます。非常に簡単です！
また、下の各アイコンを選択することで、使用される技術スタックを選ぶことができます。React,Vue,Next.js等、フロントエンドフレームワークの有名どころは一通り抑えていそうです。

また、StackBuiltzとも連携することが可能なため、AIが生成したコードに対して、StackBuiltzから直接編集することも可能です。

細かな使用方法やFAQ等は、以下サイトにまとめられています。

https://support.bolt.new/welcome

GitHub Copilot Workspace

おなじみGitHub社が提供する「Workspace」サービスです。そのため、厳密にはその他のサービスと異なり、全面的にAIによって開発を実現するわけではなく、「タスク」を中心としたAIとの共同開発を行うようなサービスとなっています。
GitHub社としては、いわゆる「自律型プログラム生成AI」の位置づけには「GitHub Spark」があると思いますので、こちらはあくまで「Copilot（副操縦士）」である部分が強いのだと思います。

利用の仕方としては、大きく3種類あります。

  • Issueから使用
    • GitHubのリポジトリに紐づくIssueを作成し、そこからCopilot Workspaceを起動できます。
    • Issueに紐づくタスクをCopilot WorkspaceでAIが実装を進めてくれます。
  • CWダッシュボードから使用
  • リポジトリページから使用
    • GitHubのリポジトリから、直接タスクの説明を書いて、Copilot Workspaceを始めることが可能です

上記を含めたCopilot Workspaceの使い方は、GitHub Next上のリポジトリにユーザーマニュアルが公開されていますので、こちらも確認してみてください。

https://github.com/githubnext/copilot-workspace-user-manual

試行①：新規開発

今回は各サービスに対して、同一のアプリケーションを作成してもらおうと思います。
今回作るのは、PomodoroTimerという、タスク管理にタイマー機能を追加したようなアプリケーションを作ってもらおうと思います。

PomodoroTimerの参考サイトは以下です。

https://pomodorotimer.online/

Bolt.new

それでは早速作っていきましょう！
今回は技術スタックとしてReactを指定したいので、まずはReactのblank appを作成してもらいます（前述の通り、初期画面の下にあるアイコンからReactを選択します）。
少し待つと、画面が切り替わり、以下のようにアプリケーションコードが作成され、Preview画面が表示されます。
Bolt.newで一番の押しポイントがこのプレビュー機能ですね！この機能によって、AIに作成してもらったアプリケーションを即時に試すことができます。

また、当然ですがトグルスイッチからCodeを選択すると、現在のアプリケーションコードを確認・編集することができます。

また、画面右上に「Connect to Supabase」というボタンがあり、ここからSupabaseと連携させることが可能です。
今回はDBにSupabaseを使用してもらう想定で、こちらの連携を使用したうえで開発を進めました。

さて、では早速AIにアプリケーションを作ってもらいましょう。
今回は、以下のように指令しました。

TODO管理とTimer機能を組み合わせたPomodoroTimerアプリケーションを作成したいです。ユーザーが集中して作業を進めるためのサポートを提供し、タスクの整理と時間管理を一元化します。
以下は機能概要です。
1.TODO管理機能
・ツリー形式のタスク構造: TODOタスクは階層的なツリー構造で管理可能です。無限に親子関係を設定でき、複雑なプロジェクトやサブタスクの管理にも対応します。
・タスクの追加・編集・削除: ユーザーは簡単にタスクの追加、編集、削除が行えます。
2.Pomodoroタイマー機能
・TODOタスクに紐づいたタイマーが起動できるようにしてください。タイマー時間は25分の作業と5分間のインターバルを繰り返すようにしてください

プロンプトを与えると、即時にコードの実装が始まります。
新規ファイルの作成及び更新が、リアルタイムで確認出来るようになっています。

しばらく待つと、一通りソースコードの作成が完了し、アプリケーションが起動します。

画面自体はそれっぽいです！
しかし、少し動かしてみると、想定通りの挙動にはならなかった部分があります。（この辺りをすぐフィードバックできるのは便利ですね！）
続けて以下のようにお願いしてみました。

以下の機能の追加及び修正をお願いします。
・サブタスクを作成する際にタスク名を決めることができない状態になっているので修正してください
・タスク画面とタイマー画面を別に分けてください。
・タスクの内容や、タイマーの実行している作業時間等をDBに保存するようにしてください。

先ほどと同じように、ファイルの作成・更新が行われていきます。
今回は、Supabaseのテーブル作成等も行う必要があります。
外部テーブルへの変更は自動では行わず、以下のように確認が入ります（画像ではすでにapplyしてしまったため何もありませんが、実際にはここにボタンが出てきます）

こちらを適用することで、自動でSupabase側のテーブルも更新してくれます。
一通りの更新が終わると、以下のような画面が生成されました。
画像なので伝わらなくて恐縮ですが、DBへの反映も行われたため、画面を再表示してもタスク情報は残りますし、サブタスクのタスク名も自分で決められるようになりました。

まだまだ改善点はあるのですが。。。一先ず形にはなったので、Bolt.newに対する新規開発の検証はここまでにしたいと思います。
簡単なアプリケーションを一から作ってもらう分には十分活躍しそうですね！

GitHub Copilot Workspace

それでは続いてGitHub Copilot Workspaceです。
プロンプトは先ほどと同様のプロンプトで、同じアプリケーションを作ってもらいます。
プロンプトを入力すると、Copilot Workspaceに画面が切り替わります。

どうも英語でしか出力されないようなので、Google Chromeの和英変換をかけて見ていきます。

Cipilot Workspaceはいくつかのフェーズに分かれて作業を進めていきます。
最初は「ブレインストーミング」と呼ばれるフェーズを行っていくようです。
今回のIssueに対して、どのように解決していくかをAIを交えながら決めていくことになります。
AIの提案した解決策をユーザーが採用すれば、それに従ってコードが生成されていきます。

ブレインストーミングでは、Issueを掘り下げて、様々なトピックに対する具体的な解決策を決めていくことになります。
画面の下側には、AIに質問するトピックの推奨事項が並んでいます。
ここから選択をしてタスクを掘り下げていってもいいですし、一番下にあるテキストボックスから自由入力をすることも可能です。

AIが提案する解決策は、複数ある場合があります。
例えば、「タスク階層を表示する最適な方法」を決めてもらおうとAIに聞いた場合、以下のように3つのアイデアを提案されました。
この中で、自分が実現したい方法の「タスクに追加」ボタンを押せば、その方法でコードを生成してくれます。

ある程度タスクの深堀が済んだら、プランの生成及びコードの生成が可能です。
左側の緑色ボタン「プランを生成する」から実行可能で、今回はコードの生成まで一貫して作成してもらいました。

コードの生成が完了すると、以下のようにGitの差分表示で生成されたコードが確認できます。

当然GitHubと繋がっているので、このままプルリクエストの作成をすることが可能なのですが、動作確認をしたいため、VSCodeと接続します。
Copilot WorkspaceとVSCodeの同期機能が提供されていますので、こちらから今回の生成コードをVSCode上で実行していきます。

・・・と思ったのですが、残念ながら型エラーが大量に出ていて動くものではなかったです。
ほとんどはTypeScriptであるのに型定義がされていないことと、適切にexportしていないことによるエラーだったのですが、一つずつ修正していくのが大変そうだったので、一先ず断念。

残念ながら、GitHub Copilot Workspaceで一からアプリケーションを作るのは少し難しいのかもしれないですね。
「IssueからAIがコードを生成する」思想ですので、そもそも一からのアプリケーション開発というより、既存のコードの修正や追加機能開発がターゲットかもしれないですね。

試行②：バグ修正

ということで、それぞれのサービスに機能の修正をしてもらおうと思います。
GitHub Copilot Workspaceの出力したコードは残念ながら動かすことができなかったため、ベースとなるコードは、Bolt.new側で生成したコードを使用していきたいと思います。

先ほどスルーしましたが、Bolt.newのコードには幾つかのバグが残っていました。

  1. タスクの削除が動作しない
  2. タスク画面からタイマーボタンを押してもタイマー画面に遷移しない（ヘッダーのタイマーボタンからは遷移可能）

今回はこれら2つのバグの修正をそれぞれのサービスで実現していこうと思います。

Bolt.new

さて、先ほど作成したBolt.newのプロジェクトを使用すると、先ほどのプロンプトでのやり取りがそのまま残ってしまっています。
これがどれだけコード生成に影響を与えるかは分からないですが、比較用に一からプロジェクトを作成しようと思います。

先述の通り、Bolt.newはStackBuiltzと連携が可能です。そして、StackBuiltzは現在のプロジェクトからGitHubのリポジトリを作成することができます。（下記画像のCreate a repositoryボタン）

この手順を踏むことで、先ほど作成したプロジェクトをGitHubと同期させることができました！（このリポジトリは後程、GitHub Copilot Workspaceでも利用します）

続いて、このGitHubのリポジトリから新たにBolt.newのプロジェクトを作成します。
Bolt.newは、一からプロジェクト作成をすることもできますが、なんとGitHub上のリポジトリをインポートすることも可能です。
やり方はシンプルで、Bolt.newのURLの後ろにGitHubの対象リポジトリのURLをつけるだけです！
例えば、対象のリポジトリが「 https://github.com/xxxxx/yyyyy 」だった場合は、「 https://bolt.new/xxxxx/yyyyy 」として開けば、対象のリポジトリの内容をインポートすることが可能です。（パブリックなリポジトリに限ります）

この方法で、Bolt.new→GitHubリポジトリ→Bolt.new（別プロジェクト）の作成をしました。

さて、本題に・・・。

今回AIに伝えたプロンプトは以下です。

タスク画面にて、タスクの右側にあるタイマーボタンやゴミ箱ボタンを押しても適切に動作しません。
タイマーボタンを押したらタイマーが起動し、ゴミ箱ボタンを押したらタスクが削除できるようにしてください

先ほどと同様、ファイルの修正が行われていきます。
修正点なども説明してくれていますが、それっぽいです。

プレビュー画面から動作確認をしてみましたが、想定通り挙動していました！
ただし、子タスクを持つようなタスクの削除はDB制約があり、出来ませんでした。。。
この辺りはプロンプトが悪かったですね。

GitHub Copilot Workspace

続いてCopilot Workspace側で試していきましょう。

先ほど作成したリポジトリに対して、Issueを作成し、「Open in Workspace」をクリックします。

先ほど同様、ブレインストーミングを作成して、タスクを整理し、コード生成をしました。
(今回は、推奨される質問だけでなく、より具体的な実装方法についても整理してもらいました)


先ほどは新規開発だったのであまり気にならなかったですが、上図のようにAI生成による差分が出てくるのは便利ですね。Bolt.newの場合は
onStartTimer関数が空の関数だったのをこの時初めて知りました（笑）

さて、VSCodeから同じように動作確認をしてみました。

削除機能はBolt.new同様、子タスクを持つタスクは削除出来ませんが、他のタスクは削除可能でした。
しかし、残念ながらタイマー機能は動作しませんでした。
うーむ、どうしてもBolt.newに比べるとAIの精度がやや低いようですね・・・。

比較

さて、色々試してみたので、各サービスのメリット・デメリットをまとめてみようと思います。

Bolt.new

メリット

高い精度

今回の検証ではBolt.newの方が明らかに精度が高かったですね！
簡単なアプリケーションならサクッと作れそうです。

プレビュー機能

先述しましたが、これはイチオシですね！
AIが生成したコードの素早いフィードバックが得られるので、修正ポイントもすぐ指示できます。

デメリット

トークン量の制限

Bolt.newは一応無料枠も提供しているのですが、かなり少ないです。
デイリーで使えるトークン数は15万程度で、一通り実装してもらうとすぐにトークンを消費しきってしまいます。
そのため、修正や追加機能等をチャット形式で少しずつ開発していこうと思うと、トークンは全然足りないです。
20ドル/月の課金で月に一千万トークン使用できるのですが、まともなアプリケーションだと1～2アプリケーション作れるかどうかというところでしょうか。
本格的に使用していくとなると20ドルじゃ少し心もとないかもしれないです。

デグレの危険

今回は発生しなかったのですが、実はBolt.newはコード生成の仕様の都合上、大きなハルシネーションのリスクがあります。
それは、変更対象のファイルを（変更するのではなく）すべて書き換える仕様です。
例えば、GitHub Copilot Chat等にコードを提示してもらう際、よく以下のような出力をすることがありませんか？

// ...existing code...

const hoge = () => {
    return "hoge"
};

// ...existing code...

上記のように、変更部分のコード以外を// ...existing code...と記載し、対象コードのみを出力することはよくあると思います。
GitHub Copilot Chatの場合は、対象のコードをコピペで貼りかえるだけなので、大した問題にはなりませんが、Bolt.newの場合はそうはいきません。
変更対象のファイルが丸ごと上記のようなコードで置き換わります。 つまり、既存のコードはすべて// ...existing code...に置き換わってしまうことがあります（笑）

これがまぁまぁ面倒で。。。
そこのファイルを一から作り直してもらうか、生成前の断面に戻すしか方法はないと思います。
尚、Bolt.newはコードを出力するたびにCheckpointを用意しているので、以前の断面に戻すことは可能です。ただし、Checkpointはプロンプト単位で作成されるので、複数ファイルに同時に変更が入った場合、それらすべてのファイルの変更が戻ってしまいます。

使用できる言語・ライブラリの制限

トップページにTypescriptの利用するフロントエンドフレームワークが並んでいる通り、Bolt.newが想定している技術スタックは基本的にフロントエンドとなります。
そのため、バックエンドコードや異なる技術スタックの生成は、基本的に難しいかと思います。

以下は、Python及びStreamlitを技術スタックに指定してコード生成をさせてみようとした結果です。
実際にPythonの標準ライブラリのみしか使用出来ないかは定かではないですが、すくなくともStreamlitは難しいようですね。（FastAPIも試してみましたが、使用出来なかったため恐らくPythonを使用する場合は標準ライブラリしか使用できなそうです。）

GitHub Copilot Workspace

メリット

GitHubとの連携

やはり一番はGitHubと連携できる点ですね。
今回はVSCodeと連携させましたが、Copilot WorkspaceはGitHubのCodeSpacesとも連携ができるようなので、Issueの作成・開発・テスト・プルリクエストの作成までの開発サイクルをCopilot Workspaceをその連携機能で完結させることができ、ローカルに開発環境を用意する必要がなくなります。

タスクの棚卸しの補助

ある意味Copilot Workspaceはここを押しているかもしれないですが、他の自律型コード生成AIとの一番の違いは「プロンプトから一気通貫でコードを生成する」のではなく、「大きなIssueから小さなタスクおよびその解決方法にブレイクダウンをしていく」ことを生成AIを使いながら考えていき、最終的にできた小さなタスクを解決するコードを生成していくステップになります。

そのため、ざっくりとしたIssueを作成しても、必然的にCopilot Workspace内で棚卸を行っていくことができますし、その補助としてAIを活用することができます。

デメリット

コード自動生成としては微妙

今回の私の検証では、正直微妙と言わざるを得ないですね。。。
もしかしたら、ブレインストーミングでもっと細かくタスクを棚卸する必要があったのかもしれないですが、少なくとも今回の作業では残念ながら効果的な活用はできませんでした。

ちなみに、今回は技術スタックとしてReactを指定しましたが、特段何も指定せずにオセロゲームを作らせてみたところ、ピュアなHTML, CSS, JavaScriptで問題なく実装することができました。
オセロだと世の中に同じようなコードが大量にあると思うので、ここからどれだけ固有ドメインを組み込めるかは分かりませんが、使い方次第では、十分な精度のコードが生成されるのかもしれないです。

まとめ

以上、今回は「Bolt.new」と「GitHub Copilot Workspace」を使用して、それぞれで同じアプリケーションを作らせてみました。

今回の所感としては、Bolt.newがメッチャすごい につきますね！
（繰り返しになりますが、）フロントエンド中心の簡単なアプリケーションならサクッと作れそうです。

ただし、注意事項としては、バックエンドタスクも含めたアプリケーションを作らせようとすると、APIとの連携で大体こけます。 あくまでフロントエンド側の機能を実装してもらって、API連携は後で人間が追加した方がよさそうです。

Devin.aiも以下のように発言しているので、生成AIタスクとしては固有ドメインの少ないフロントエンドの方が得意なのかもしれないですね。

I'm especially good at frontend tasks, bug fixes, refactors and building internal tools.

次回はDevin.aiも触ってみたいと思います！月額500ドルか・・・。

Discussion