GitHub Sparkでアプリを作ってみた ～Refactoring Dojo～

皆さんはGitHub Sparkをご存じですか？
GitHub Copilot Pro+プランになると使える、自然言語だけでWebアプリケーションが開発できるサービスです。
自然言語だけでどれだけのアプリが、どのように開発できるのか気になったので、高い金（月額USD39！）を払って試してみました。

最終的にできたもの

https://www.refactoringdojo.com/

プログラミング言語、難易度、リファクタリングトピックを選択するとそれに合わせて問題のあるコードを生成します。

問題が生成されるのでそれをリファクタリングします。

AIからヒントをもらったり、リファクタリングした内容をAIに評価してもらうことができます。

プロンプト

下記のプロンプトをSparkに投げてアプリを作ってもらいました。

プログラミング力向上アプリ「リファクタリング道場」を作成してください

## 概要
プログラミングに関する様々な項目に対してAIが修正を要するコードを提案し、それをユーザーがリファクタリングしてプログラミング力を向上できるアプリです。

## 要件
・言語はJava、C＃、JavaScript、TypeScript、Ruby、Python、PHP、Goなど様々なものに対応してください
・リファクタリングの項目はデザインパターンやオブジェクト指向やリーダブルコード、良いコード/悪いコードで学ぶ設計入門などの内容などを参考にしてください
・問題は項目と言語に合わせて、リファクタリングを要するコードを自動で生成してください
・エディターはVSCodeライクな体験ができるものとし、言語に合わせたシンタックスハイライトなどを実装してください
・ユーザーはリファクタリングが完了するとAIに評価してもらうことができます
・ユーザーは手が詰まった際にAIにヒントを求めることができます（完全な回答は出さず、答えにつながる小さなヒントだけ）
・ユーザーは最終的な答えを表示することができます。AIは自動で最適と思われるリファクタリング後のコードを提案してください

最初にできたもの

TypeScript + Clean Codeでやってみます。

こんな問題が出てきました。

ちょっくらリファクタリングして評価してもらってみます。

いい点と足りない点を補足してくれています。
型付けのオプショナル指定やマジックナンバーなど、対応が漏れていた点に気づかされます。

改良してみる

言語の選択、難易度の選択、エディターのリッチ化を依頼しました。

ちゃんとリッチなエディターになっています。

GitHub Copilot AgentでNext化

GitHub SparkはそのままPublishすることもできるのですが、LLMの上限がすぐ来てしまったこともあったのでClaude APIを利用するようにしました。
GitHub SparkはGitHubのリポジトリを作成する機能も持っていたので下記手順でNext.jsに置き換えました。

1. GitHub SparkでGitHubリポジトリを作成
2. GitHubリポジトリをクローン
3. ローカルでGitHub Copilot Agentを使ってNext.js化を依頼

これからなんやかんやAgentで依頼して機能改善や見た目の修正を行った結果、最終的なものができました。

まとめ

GitHub Sparkはアイデアが一瞬で形になって、プロトタイプがすぐにできてしまう驚愕のサービスでした。
UIだけでなく、AI機能やKVストアなども内包しているので多様なアプリができてしまいます。
今回のようにReactから移植したい場合でもGitHub Copilot Agentと組み合わせることで、自然言語だけで開発を進めることができ、プロトタイプから本番環境までAI駆動による開発が一貫して行えたのは良い体験でした。
（もしかしたらAgentだけでもゼロから開発ができたかも、とも思っています。今度また試してみます）