GitHub Sparkハンズオン：試して分かった機能5選
2025年 7月23日、「GitHub Spark」 のプレビュー版が発表されました！
現在は GitHub Copilot Pro+（月額$39） プランでのみ使用可能なようです🙄
さっそく触ってみました！
GitHub Sparkとは？
GitHubがリリースしたAI搭載の開発プラットフォームです。
TypeScript・Reactベースで、Webアプリを一瞬で生成 & デプロイできます。
Bolt.newや、Replit Agentsに近い印象ですが、Githubシステムとの結合度が高く、より使いやすい印象を受けました🤔
機能
-
自然言語による反復開発
- 追加の要望を文章で伝えるだけでアプリを洗練
- UI や機能を何度でも、素早くアップデート可能
- Themeタブで配色・フォント・レイアウトをクリック操作で切り替え
-
自動エラー検出＆修正
- エラー発生時にSparkが自動で修正案を適用し、再度ビルド
-
データストアの自動設定
- AIがデータ永続化の必要を検知すると、Key–Valueストアが自動で構築
-
Codespaces連携
- Visual Studio Code環境で手動編集・デバッグも可能、Copilotでさらなる改善提案
コストにご注意！プロンプト１回ごとにプレミアムリクエストを4つ消費します。
追加リクエストは1つ>$0.04なので、1回あたり約$0.16が必要です。
メニュー構成
GitHub SparkのUIは5つのタブから構成されています：
- Iterate — 自然言語で要件を入力し、即時プレビュー
- Theme — 配色・フォント・レイアウトのカスタマイズ
- Data — 外部APIやサンプルデータの連携設定
- Prompts — システムプロンプトの一覧・編集
- Assets — 画像・アイコンなどのアップロード管理
1. Iterate（イテレーション）
-
要件入力
自然言語を入力すると即座にアプリを開発してくれます！今回は「猫と喋れるAIアプリ」 と入力。
-
生成中...(個人的にアプリ生成中の画面がオシャレで素敵でした✨)
-
完成！「猫が喋ってくれるAIアプリ」
-
修正案の提案
「もっとおしゃれなデザインにしてください」と入力。
Sparkが自動で改善ポイントを提示！面白い提案が出てきました。
「猫のギャラリー」を追加してもらいましょう…
プロンプトで「猫のギャラリーを追加」と指示すると、あっという間にギャラリー機能が実装。🐈 ギャラリーが追加されました！
直接TypeScript/Reactのコードを参照できます。
スマホ表示もワンクリックで確認可能。
※ 実際に動かせるURLはこちら → https://talking-cat-companio--gadname.github.app/
2. Theme(テーマ)
テーマエディタで配色・フォント・レイアウト設定をUXライクに変更できます。
- テーマ選択画面
配色を変更すると… 実際のアプリでもこの通り反映！
3. Data（データ）
外部API連携やサンプルデータをDataタブで設定すると、
サーバー側のTypeScriptコードが自動生成されます。
※今回はまだ触れられていませんが、次回以降に解説予定です。
4. Prompts（プロンプト管理）
システムが内部で利用するAIプロンプトを一覧・編集できる専用UI。
細かい調整やテンプレートの切り替えが可能です。
-
プロンプト一覧表示
-
プロンプト編集UI
テキストボックスで直接内容を変更できます。
5. Assets（アセット管理）
画像やアイコン、スタイルシートなどの静的アセットを
アップロード&管理し、プロジェクト内で再利用できます。
Publish とリポジトリ作成
右上のPublishボタンを押すだけで、GitHub Actions経由で本番環境に即時デプロイ！
デプロイ完了後は、GitHub Codespacesを介してVS Codeでさらに手動編集・デバッグが可能。
一瞬でアプリがデプロイされました！
-
GitHub Codespaces との連携
-
リポジトリの新規作成
-
初期設定済みのリポジトリをワンクリックで生成できます。
参考リンク
以上、GitHub Sparkのプレビュー版ハンズオンレポートでした！
開発の自動化がここまで手軽になるとは驚きです。ぜひ皆さんもお試しください🙌
おまけ
「猫と喋れるAIアプリ」
Discussion