AI駆動プログラム開発、一気入門 2025年版
目指せAI時代の本命、AI駆動開発で次世代AI技術者に！
絵本でわかるAIシリーズ5
AI Driven Development
このドキュメントは、全てMarkdown AIで作成しました。2025.09.27
Markdown is all you need! Markdown AI社 Founder & Architect 永田浩一 著
参考絵本
コークが転生したら、プログラマは魔法使いだった件！
絵本概要
少年プログラマのコークは、ロボットのモスペンくんと散歩中、自動運転トラックにひかれそうになり、気を失います。目覚めるとそこは中世風の異世界。しかも自分は赤ちゃんの姿に転生していました。
その世界では人々が洞窟に暮らし、暴れるゴブリンと戦う剣士が英雄です。ある日暴走するゴブリンを前に、コークはそれがロボットだと見抜き、プログラミングで修復。人々はそれを「魔法」と呼び、コークを「魔法剣士」と称えました。
王様からドラゴン退治を頼まれ、コークは仲間とともに洞窟を登ります。そこで彼は、火を吹くドラゴンの正体がAIドローンであると見破り、操縦に成功。地上へ出ると、そこには崩壊した未来のサンフランシスコと、文明を忘れた人類の姿が。
地球は温暖化で人が住めなくなり、地下に逃げ延びた人類だけが生き残っていたのです。コークは皆を地上へ導き、復興を誓います…
はじめに
２０２４年にAI駆動開発一気入門を執筆してから、約１年が経ちました。
おかげさまで、発表したQiitaやZenでのビュー数や評価も高く、さまざまな反響をいただいた事に深く感謝します。
AI駆動開発一気入門２０２４年版
https://qiita.com/coke_kouichi/items/fd0236a6188066bb7625
しかし、AI駆動開発の世界は変化も早く、どんどん新しいAI駆動開発ツールが発表されて、バイブコーディングや仕様駆動開発などの新しい概念に基づいた製品も続々と登場しています。
そこで新しい時代に合わせて本書を書き換える事を決意しました。
現在、AI駆動開発ツールには、大きく３つの流れがあると私は思います。
１つ目は、OpenAI、Google、Anthropicなどの生成AIそのものを提供しているベンダーが、シンギュラリティ後の、AIが次のバージョンのAIを自動作成する時代に備え、AI駆動開発ツールを主力サービスとして位置付け、サードパーティーのAI駆動開発ツールを凌駕しはじめた事
２つ目は、バイブコーディングツールの台頭で、LovableやReaddyなどの、プロンプトだけで生成されたサイトやアプリの品質が、お客様への納品レベルに達したツールが出始めた事
３つ目は、ほんの数ヶ月前にトレンド入りしたバイブコーディング（仕様を決めずに、こんなものを作りたいと指示する方法）とは正反対の「仕様駆動開発ツール」が、特にビジネスの世界での導入が盛んになってきた事
の３点です。
その３つの観点に伴い、V0、Bolt、Replit Agent、Cursorという、前著で紹介したAI駆動開発ツールは、思い切って巻末に付録として追いやって、新しく発表された製品を中心に、大きく記事を変更し、再執筆を行いました。
また、一度はSpecKitとAI駆動CLIツールという仕様駆動開発ツールを元に、３点目を説明しようと一度は作成してみましたが、より使い勝手のいいツールが発表された事をきっかけに、その記事も巻末に付録としました。
AI駆動開発の歴史は始まったばかりですが、まだまだ変革は続くことでしょう。
今回この教本２０２５年版で紹介したツールが来年には時代遅れになっているかも知れません。
AI駆動開発時代の覇者には、どのツールが輝くのでしょうか？
AI駆動開発とは？
AI時代がやってきた！
あの大変だったプログラミング作業を、AIが勝手にやってくれるという、とんでもない時代がやってきました。
そこで、本書では、汎用AIツールのClaude、Web開発ツールの「Readdy」、仕様(Spec)駆動開発ツールの「Kiro」の３つのツールを用いて、AIプログラミングに挑戦します。
プログラミングは難しい、昔プログラミングに挑戦して挫折した、そんな方もAI時代は大丈夫です、ご心配なく。
本書でもう一度プログラミングに挑戦してみましょう。
プログラミングスキル習得の壁
今までプログラム学習には、３つの大きな壁がありました。
その壁とは？
１ プログラムを学ぶにも、質問する相手がいない → AIに聞く！これからは分厚い本や、難解なプログラマが書いたブログを読む必要はありません。
２ プログラムの勉強はしたが、どう作れば目的のプログラムが出来るかわからない → 大丈夫AIにお願いすれば作ってくれます。
３ プログラムを作ってたらバグで原因がわからず断念 → なんとAIが勝手に直してくれます。
と、プログラミング学習の３つの壁全てをAIが克服してくれるのです。
ただし、AIは元は人間が作ったであろうネット上の膨大な開発データを学習して、人間と同じように順番にプログラムを一行づつ作成します。
AIが作成しても、複雑なプログラムだと、多くのバグが発生する事があります。
AIにバグの修正指示を出したり、作りたい仕様がAIに伝わらず、何度も何度も作り直して、はじめて目的のプログラムが完成するのです。
あなたが思い描いた目的のプログラムを完成させるためには、やっぱり粘り強い根気が必要です。
しかし考えてみてください、自分でゼロからプログラムを学習して、よくわからない環境を整えて、複雑なバグを修正しながら、プログラムを開発するのに比べると、プログラムの規模にもよりますが、何１００分の１の時間で、思い通りのプログラムが出来あがるのです。
覚えなきゃいけないのは、環境のみ
AI開発ツールは、環境の構築（プログラム言語と、フレームワークやライブラリの中からどれを使うか決めて、準備をする事）も、あなたの代わりにやってくれます。
人間は、どういうプログラムを作りたいのかAIにお願いするだけなのですが、環境だけはAIに作ってもらいながらでも、人間がきちんと把握する必要があります。
例えばあなたの会社では、WebではTypeScriptとReactを使っているのに、あなたがpythonとFlaskで出来たプログラムを持ってきて、「これ会社で使えるようにしてよ！」と言っても、会社では言語やフレームワークが増えると運用に莫大な費用がかかるので、断られる事でしょう。
個人でも、自分が契約しているサーバにそのプログラムを移植（デプロイ）する時に、環境の知識が無いと何も出来ません。
そこで、AIには明確に、「Webで、TypeScript、Reactで作成してください！」とお願いする必要があります。
そう指定しないと、AIは全く違うプログラム言語とフレームワークで作り始めてしまうかもしれません。
プログラム言語は一般の人にもある程度は聞き覚えがあるでしょうが、フレームワークやライブラリは馴染みがある人は少ないでしょう。
そうした環境毎にその特性や機能、出来る事と出来ない事をしっかりと把握する事が重要です。
今は全然わからない人も、心配はいりません。
作りながら、知らない拡張子のファイルや、知らない設定が出てきたら、どんどんAIに質問すればいいのです。
本書でも、ツール毎の環境の説明に力を入れて解説しますので、今後もAIが扱える環境の勉強を続けていってください。
そうするといつの間にか、プログラム言語の記述も徐々に覚えてしまって、AI時代のプログラム開発のプロフェッショナルになれるはずです。
AI時代に本当に必要とされる人になりましょう！
小さい、簡単なプログラムから作り始めよう！
プロのプログラマは、まず機能を削り落とした、必要最低限の仕様のプログラムを作る事から始めます。
例えば数十行のプログラムを組んでも、人間にはミスがつきもので、エラーが数件必ず発生します。
ところが数百行のプログラムだと、行数は約１０倍なのに、エラーは３０倍くらいの件数に膨れ上がります。
最初に一気に作成してみたプログラムが数千行だと、行数は約１００倍ですが、エラーは無限に発生し続けて、どこをどう治せばいいのか、人間の手には負えなくなるからです。
AIも、元は人間が作成した膨大なネット上の学習データを参照しながら、一行ずつプログラムを作ります。
さすがに、うっかりミスやタイプミス、文法上のミスはほとんどありませんが、作成したプログラムが大きくなれば大きいほど、バグの修正に時間がかかります。
そこで、作りたいプログラムがあったら、まずシンプルなプログラムをAIに作成してもらいましょう。
そしてそのプログラムが指示した通り動く事を確認してから、一つづつ機能を追加していきましょう。
汎用AIツールで、AI駆動開発
AI駆動開発ツールには、さまざまな種類の製品が星の数ほどあって、今も世界中で新しいAI駆動開発ツールが発表され続けています。
そんな中で、自分にぴったりのAI駆動開発ツールを見つけるのは一苦労です。
そして、そのツールの使用方法を覚えるのもまたたいへんそうなので、二の足を踏んでいる方もいらっしゃるかも知れません。
そんなあなたにピッタリなのが、汎用AIツールでプログラミングをするという選択です。
汎用AIとAI駆動開発ツールの違いは、AI駆動開発に役立ついろんな機能を付加しただけで、裏では同じ汎用AIツールが受け答えしているだけなのです。
そのたくさんある役立つ機能は、便利かも知れませんが、わざわざツール毎に覚えて使いこなすのも面倒です。
であれば普段使い慣れている汎用AIツール（ChatGPT、Gemini、Claude）で、どこまでできるのか、試してみましょう。
３大AIツールのClaudeを起動してください。
このままチャットでプロンプトを入力してもいいのですが、せっかくですから、左側のメニューから、”アーティファクト”を選択して、右上の＋新規アーティファクト、メニューの中の”アプリとウェブサイト”を選択してみましょう。
今回は実力を試すのが目的なので、ある程度実用的なアプリを作ってみたいところです。
プロンプト入力欄から、下記のプロンプトをコピーして実行してみましょう。
マークダウンエディタを作成してください。
- Monacoライブラリでマークダウン編集
- Markedライブラリでレンダリング
- ライブラリは全てCDNで読み込む
- 保存はLocalStorageを使用
- 複数ファイルの保存可能
- index.html 1ファイルで提供
- html/標準css/ヴァニラJavaScriptのみで作成
プロンプトの意味がわからなくても心配しないでください。最後に説明します。
実行すると、画面が左右２つに分割されます。
この機能がアーティファクトという機能で、今ではすべてのAIが実現している機能ですが、Claudeが一番最初にこの機能を搭載しました。
左側でチャット、右側にプログラムのソースや実行結果の画面、画像やファイルなどを表示することが可能です。
もしエラーが発生しても、あわてないで、エラーをClaudeに修正してもらいましょう。
エラーの状況をしっかり伝えることが一番大切で、もしエラーメッセージ等があれば、コピーしてAIにわたしましょう。
画像のハードコピーを撮って、AIにわたしてエラーを修正してもらう方法もあります。
あっという間に本格的なマークダウンエディタが完成しました。（のはずです）
プログラムが完成したら、右上の公開ボタンを押して、世界にあなたの作品を公開しましょう！
これで、ClaudeのAI駆動開発は全て完了です。
プロンプトの説明
ところで、プロンプトのところに、いろいろと難しい用語が出てきて驚いたかもしれませんが、一つづつご説明します。
Monacoライブラリ
MonacoライブラリはJavaScriptのライブラリで、テキストボックスのカラー版です。
Markdownやプログラムのコードを色分け表示して、編集することができます。
プロのプログラマーが使う、VSCodeも同じMonacoライブラリを使用しているので、理論上はMonacoを活用すると、VSCodeのようなエディタを作成することも可能です。
Markedライブラリ
Markedライブラリは、テキストで書いたマークダウンをHTMLに変換して、プレビュー表示できる、Markdownパーサと呼ばれているライブラリです。
こちらもVSCodeのMarkdownプレビューで同じライブラリが使われています。
Markedパーサの特徴は、マークダウンにCSSを追加すると、マークダウンが装飾されるという点です。
HTMLのタグやJavaScriptを追加して、HTMLに変換して出力すれば、Webプログラムだって作れてしまう優れものです。
CDN
CDNとは大雑把に言うと、ライブラリを自分で用意したくないから、動的に持ってきてね！ということです。
その他の用語でわからないことがあれば、AIに質問してくださいね。
3大AIベンダーのAI駆動開発ツール
ChatGPT：Pythonが得意、PythonでCode Interpreter(Advanced Data Analysis)の機能を、世界ではじめて提供した。
Claude：Webが得意、Artifactsで、WebやReactなどを、プレビュー表示できる機能を、世界ではじめて提供した。
Gemini：PythonもWebも全方位政策、Google AppsScriptの生成を利用している人も多い。
Codex：ChatGPTのプログラミング専用プロダクトで、クラウド版、IDE版、CLI版がある。
Claude Code：Claudeのプログラミング専用プロダクトで、クラウド版、IDE版、CLI版、デスクトップ版がある。
GeminiCLI：Geminiのプログラミング専用プロダクトで、IDE版、CLI版がある。
Google AI Studio：Geminiの開発者向け版で、Google最新プロダクトを最速で試せる。
Vertex AI Studio：Google Cloudで公開するための、AI駆動開発ツール。
Firebase Studio：Google Firebaseで公開するための、AI駆動開発ツール。
Google Jules：GoogleのコーディングAIエージェント
OpenAI Agent Builder：ノードを接続する事で作成する、ワークフロー型のノンプログラミングAI開発ツール
Google Opal：ノードを接続する事で作成する、ワークフロー型のノンプログラミングAI開発ツール
Google Antigravity：Googleが提供するAI開発環境、AI IDE、AIエディタ
ReaddyでWebサイト作成
二つ目にご紹介するのは、Readdyです。
Webサイトを作成するAI駆動開発ツールはこれまでも、さまざまなツールが提供されていました。
その中で「Readdy」は、はじめてWeb制作会社が、自分たちの仕事が無くなるかも？と思わせたWebサイト作成ツールです。
Readdyの特徴は以下の３点です。
- 全てプロンプトで開発が完了する
- セレクターで画面部品を選択してプロンプトで改造できる
- 作成されるページのデザインの品質が高い
これらの特徴のおかげで、Web開発のうち、企業のホームページやランディングサイト生成において、２０２５年９月の時点で、他のツールに比べても圧倒的に優秀なツールとなっています。
他のツールは、今までのHP作成ツールにAIを付け足しただけだったり、プロトタイプ生成が大前提で後は人間が一生懸命改造する仕様になっていました。
対してReaddyは最初の１回目の生成から、プロが仕上げたかのような納品レベルのページを生成してくれます。
それでは実際にReaddyを試してみましょう。
https://readdy.ai/
上記サイトにアクセスして、アカウントを作成してください。
アカウントの作成方法はここでは割愛しますが、Googleアカウントがあれば登録は簡単です。
以下は起動時の画面です。
WebとAppから選ぶようになっていますが、Webを選択してProject Nameを入力してCreateボタンを押しましょう。
ライブラリ関連を選ぶ項目がありますが、Reactのままでいいでしょう。
２０２５年９月２７日現時点では、Readdyは新規でユーザー登録すると、２５０クレジットが付与されて、企業のホームページを一つ作るくらいは、無料で体験が可能です。
ただし、途中で作り直したり、凝った事をしようとすると、無料枠を使い果たしてしまうので、今回のプロンプトは、一回でReaddyのパワーを実感出来るものにしましょう。
下記に用意したプロンプトは、ある企業の会社案内から作成したものです。
もしあなたが、自分の会社やお店などでホームページを作成する予定であれば、このプロンプトを実行する前に、独自に自分のページ用に改造してください。
以下の情報で会社のHPを作成してください：
# AI Codeグループ
AI Codeグループは、AIロボット時代の、IT企業グループです
新世代のAI駆動開発ツールや、AI搭載ホログラム ロボット"パペロボ"などの開発販売をしています
グループ300名規模の優秀な技術者による先端テクノロジーで、シンギュラリティ後の世界を創造します！
AI Codeが主催する、AI起業家協会とは？
AI起業家協会は、人間が働かなくてもAIが代わりに働くシンギュラリティ後の世界を見据えた協会です
ロボットやホログラムによる社長AIが、経理やマーケティング担当AIに指示して、AIに会社運営を全て任せる技術を研究する協会です
また、AIコードでは今までIT企業を200社以上設立した実績を元に、社員や若者のMBOを促進させる、"独立支援"で、未来の社長を支援します
## About us
会社概要
会社名：株式会社AICode
所在地：〒144-0031
東京都大田区東蒲田1-5-8
連絡先：03-6441-3935
代表取締役：三塚 剛
資本金：8000万円
設立日：2021年6月10日
事業内容：
- ホールディングスの運営
- AIコンサルティング事業
## VISION
「AIと共に成長する人を育む」
AIの力を社会に還元するのは“人”。
私たちは、グループ全体で人材がAIと共に成長し、新しい価値を創造する社会を実現します。
会社の内容は、住所や電話番号をはじめ、しっかりと記述しましたが、今回はReaddyの実力を見るために、デザインや色名などの細かい指定は一切していません。
色々書いてあるように見えますが、会社の説明、会社概要、ビジョンの３つをプロンプトにしただけです。
WordPressのように、サイトのテンプレートをここで選ぶ事も可能ですが、今回はReaddyがテンプレ無しで、どう作成するのかも見たいので、選んでいません。
（もしお好みのテンプレートがあるならそれを選んだ方が、より自分のイメージに近いサイトを作成出来るでしょう）
上記プロンプトを、Readdyのプロンプトにコピーして、▶︎実行ボタンを押します。
しばらくすると、HPが生成されます。
どうでしょうか？
生成AIはその構造上、毎回違う回答をします。
あなたが全く同じプロンプトを実行しても、この画面とは違うかも知れませんが、Readdyで生成すると、大体は最初から商用レベルにも通用するWebサイトが生成されると言われています。
生成されたページの右上の、◽️全画面表示をしてみましょう。
全画面は、エスケープボタンを押すと、元の画面に戻ります。
全画面ボタンの右側の、↗︎Shareボタンを押すとタブが開いて、そのURLを使ってシェアする事が可能です。
以下にReaddyが生成したWebサイトの全体画像を添付します。
Readyで作成した企業ホームページ ↓
Readyで作成した企業ホームページ ↑ ここまで
📱スマホのマークを押すと、レスポンシブ対応が確認出来ます。
追加・修正作業
追加や修正作業もReaddyでは、プロンプトで実行します。
ボタンはあるがクリックしても動かない、まだ機能が生成されていないものはコントロール部品を選択すると、Generateボタンが表示されます。
そのままGenerateを押すと、AIが勝手に続きを生成してくれます。
プロンプト入力欄の、↖︎Selectorボタンを押して、Webサイトの任意の場所をクリックすると、Webコンテンツを選択する事が可能です。
Text、Image、Linkなど、変更可能なオプションが表示され、テキストや画像の修正やリンクの設定をします。
テキストをそのまま変更する事も可能ですが、その時もAIが動いて、全てにおいて、整合性を保ってくれます。
部品を選択して、プロンプトを入力すると、そのプロンプトに従ってその部品を改造する事も可能です。
また、画像やURLからサイトを生成する事も可能です。
既存のWebサイトのデータを移行する事まで出来ましたが、データを再利用する時は、著作権に気をつけて下さい。
全ての追加や修正作業がプロンプト入力だけで作業出来て、生成されるコンテンツも品質が高いのが、Readdyが世界中で支持されている理由です。
その他のサービス
Integrations
Integrationsで提供しているサービス一覧
Supabase：サーバーレスの環境とDBを提供します。
Stripe：決済機能を提供します。
Shopify：ECサイトを構築します。
Calendly：スケジュール管理を提供します。
Mailchimp：マーケティングメールの提供を行います。
Google Analytics：サイトのアクセス分析を行います。
Readdy Agent：カスタマーサポートやアポ、スケジュール管理のエージェントを提供します。
ほとんどが有料版のみのサービスとなります。
Form
有料版のみですが、フォームを生成する事も可能です。
SEO
もちろん作成したサイトのSEO対策も可能です。
Publish
画面右上のPublishで、新規に独自ドメインを取得するか、既存のドメインを使う事が可能です。
もちろん公開するには課金プランに加入が必要ですが、それはWordPress.comをはじめ、各種Webサイト作成サービスと同じです。
Figma出力
作成したデータは、ソースコードとしてダウンロード出来る以外に、Figmaへエキスポートが可能です。
Figmaは世界中のWeb開発者のほとんどが使用している、UXデザインの標準ツールです。
また、Web制作会社が顧客とのデザイン確認する時にも、Figmaのコラボレーション機能が広く使われています。
この機能がある事で、プロのWeb制作者もFigmaをメインの開発ツールとして導入するようになりました。
もしあなたがReaddyを使ってプロになろうと思われるなら、Figmaもあわせて学習すると、より効果的です。
次は、Readdyを使って、Webアプリ（ホームページの技術のみを使って、アプリケーションを作成する事）の生成をしてみましょう。
（Figmaと一緒にメニューにあるMasterGoは、中国版のFigmaみたいなツールです）
余談ですが、Readdyはシンガポール企業が開発運営をしていて、欧米の市場だけでなく、中国市場も意識しているので、時々写真に中国語が入っていることがあります。
これは毎回AIが生成しているのではなく、既にストックされている写真をAIがサイトに合わせて選んでいるのです。
そのおかげで、驚異的な速さでサイト生成が出来るのです。
Webアプリの作成
左上のプロジェクト名をクリックして、＋New Projectを選択します。
Appを選択して、プロジェクト名を”MarkdownEditor”にしてプロジェクトを作成します。
ライブラリはReactのままで大丈夫です。
選択可能なライブラリ一覧
React：Facebook発のUIライブラリ。コンポーネントで画面を作成。
React - Next.js：Reactを拡張したフレームワーク。SSRやSEOに強い。
HTML：Webページの基本言語。文章の骨組みを作る。
Vue：軽量で学びやすいフレームワーク。直感的にUIを構築できる。
Vue - Ant Design：VueでAnt Design UIコンポーネントを利用する。
Vue - Element：Vue向けの人気UIライブラリ。管理画面に強い。
Vue2：Vueの旧バージョン（v2系）。多くの既存プロジェクトで使用中。
React - Ant Design：ReactでAnt Design UIコンポーネントを利用する。
React - Shadcn：React向けのモダンでカスタマイズ性高いUIコンポーネント集。
UniApp：Vueベースでマルチプラットフォーム開発できるフレームワーク。
上記説明はChatGPTで生成しました。
プロンプト入力欄で、以下のプロンプトを入力します。
”シンプルなMarkdownエディタを作成してください”
実行ボタンをクリックすると、マークダウンエディタを生成してくれました。
生成された画面の右上にある、↗︎Share ボタンを押します。
表示されたプログラムを実行します。
しっかりとMarkdownエディタが作成されているようです。
主なAI駆動開発ツール一覧
Lovable ： ノーコード感覚でWebアプリを生成できるAIエージェント。デザインからデプロイまで自動化が強み。
v0 ： Vercelが提供するUI生成特化エージェント。Figma感覚でプロンプトからReact/Next.js UIを生成できる。
Bolt ： Stackblitzが開発するAIコーディング環境。ブラウザ内で即時起動でき、リアルタイムでアプリを構築可能。
Replit Agent ： Replitに統合されたAIエージェント。マルチファイル編集や実行・デバッグを自動で行う。
Create ： プロンプトからWebサイトやアプリを一瞬で立ち上げるAIビルダー。初心者でも使いやすい設計が特徴。
Jimdo ： ドイツ発のWebサイト自動生成サービス。AIによるレイアウト提案やテキスト生成を備えた老舗ツール。
VSCodeとCopilot Agent ： Visual Studio Code上で動くAIエージェント。GitHub Copilotを拡張し、マルチステップタスクの遂行を可能にする。
Cursor ： AIファーストなエディタ。CopilotやClaudeを組み込み、自然言語でプロジェクト全体を編集可能。
WindSurf Cascade ： Windsurf IDEのエージェント拡張。Cascadeモードにより並列タスクやマルチエージェント的な動作が可能。
Cline ： Claude 3.5 Sonnetの「Computer Use」を活用するVSCode拡張。エージェントとしてCLIやファイル操作も可能。
（上記はChatGPtで生成しました）
まとめ
Readdyは、２０２５年９月現時点で、お客さまにも納品できるレベルの数少ないHP作成ツールの一つです。
全ての操作をプロンプトで行うので、学習コストが低く、一般人でも高品質なWebサイトが短時間で作成可能です。
さらにフォームやWebアプリも作成可能ですが、Webサイトほどの優位性は感じられません。
Webアプリを専門で作成したい方は、現時点ではLovableというツールもおすすめです
（元は、本書でLovableも紹介する予定でしたが、Readdyでもしっかりと生成されたので、Lovableの掲載を止めました）
ただし、今後他のHP作成ツールや、大手AIベンダーも、品質を上げてくる可能性が高いので、今後もReaddyが首位をキープできるかどうかはわかりません。
もし本書の２０２６年版を出す時があるなら、どういうツールが台頭しているのか楽しみです。
Amazon AWSのKiroで、仕様駆動開発
むずかしいことはAIに全部まかせて、”こんな感じのプログラムつくって！”で完成するバイブコーディングが大流行りの中、プロのシステム開発の現場では、それとはまったく正反対の、仕様駆動開発が主流になってきました。
仕様書をAIと会話しながら作成し、顧客とのレビューで使用を確認したのち、一気にプログラムを作成する技法です。
修正も、AIに直接依頼するのではなく、仕様書を書き直して修正するので、元のシステムやデータを壊す心配もありません。
ここでは仕様駆動開発を体験してもらうために、米国Amazon、AWSのKiroというツールを使用します。
KiroはVSCodeという、開発環境（IDE）と言われるアプリケーションで、ダウンロードしてから使います。
ダウンロードが完了したら、起動します。
Kiroは、マイクロソフト社のVSCodeを元に作られていて、Cursor,WindSurf,Antigravityなどと同じエディタ型の開発ツールです。
Kiroを使うためには、まず、AmazonのAWSアカウントでログインします。
（お買い物のAmazon IDとは別にIDを作成しなければいけないのでご注意ください）
それから、Kiroが使用するフォルダをアプリで開いたら、準備は完了です。
（フォルダはどこでもいいのですが、Kiroが既存のファイルを上書きして壊してしまわないよう、新しく空のフォルダを作成しておいてください）
一通りの準備が完了したら、Vibe（もちろんバイブコーディングのこと）と、Spec（日本語に訳すと仕様という意味）を選ぶ画面が出るので、Specを選んで、”シンプルなフロントのみで動作するカウンターアプリ”と入力してみましょう。
本当はシンプルなカウンターアプリくらいだったら、仕様書なんて必要ないくらいの簡単なアプリですが、今回は仕様書を確認するのが主目的なので、実行してみます。
すると、要件定義書を作成しましたというメッセージが出力されて、requirement.mdというマークダウンファイルが作成されたようです。
requirement.mdをクリックしてみると、中央の画面に要件定義書が表示されました。
要件定義書を見てみると、ユーザーストーリー、受け入れ基準、Whenなどの文字が並んでいます。
要件定義書の作成時、”5W1H”「 いつ、どこで、誰が、何を、なぜ、どのように」、の観点から作成するのが由緒正しい要件定義書の作成方法なのです。
今回はアプリがシンプルすぎてWhenばかりが並んでいます。
ちなみに、ソフトウェアテスト技法で、Given,When,Then技法というのもあってGivenは受け入れ基準の意味です。
そしてユーザーストーリーからユースケースを抜き出して、コンテナやコンポーネント、クラスなどに分解していくのが設計の具体的な流れになります。
要件定義を一通り確認して問題がなければ、次は設計書を作成してもらいましょう。
他の仕様駆動開発ツールでは、コマンドを覚えておいて実行したりと、少し難しいところもあるのですが、Kiroは自然言語での対話で全てが完了します。
”設計おねがいします”などの言葉を入力すると、次は設計書がdesign.mdというファイル名で生成されます。
設計書をみると、どうやらmermaid（フローチャートなどの図を文字列から生成するツール）を使用しています。
画面上部の📖アイコンに👁️がついたようなアイコンをクリックすると、マークダウンの内容がプレビュー表示されます。
他のVSCodeやCursorなどは、マークダウンのプレビューで、Mermaid図形を表示するには、拡張プラグインをインストールしなければいけないのですが、Kiroは何も入れなくてもデフォルトでMermaidが表示されるようです。
次に作るのは実装計画tasks.mdです。
以下の３つの仕様書（ファイル）がKiroで生成される仕様書になります。
要件定義書(requirements.md)：アプリが満たすべき要件を定義します。kiroでは、通常は要件定義書から作成される、外部仕様書や基本設計書も要件定義書に含まれます。
設計書(design.md)：プログラム言語でどう、処理を実現するか？に主眼をおいた資料で、内部仕様書や詳細設計書という言い方をすることもあります。
実装計画(tasks.md)：実際にプログラムを生成する時に、どう作るのか？を順序立てて計画します。
kiroでは、テストやドキュメント生成なども、このタスクリストに含まれます。
kiroが全てのタスクを実行するのか？MVP（実用最小限の製品：Minimum Viable Product）で実行するのか？を質問してくるので、MVPを選択します。
MVPというのは、Minimum Viable Product（最小限の製品）という意味です。
この後、タスクリストに書いてある作業を一つづつ、実装していくのですが、Kiroは有料版でないと、一気に作成できません。
しかも、実装の１つづつに、無料版のコインを消費してしまうので、ここではMVPを選択しましょう。
実装計画のマークダウンファイルを開き、先頭行にある、Start taskというリンクをクリックすると、実装タスクが実行されます。
その場所が、Task completedになったら、次のStart taskを実行しましょう。
全てのtaskを実行し終わったら実装は完了です。
Kiroの指示に従い、プログラムを実行してみましょう。
シンプルカウンターで、まさかエラーは無いと思いますが、もし不具合があれば、Kiroに修正してもらいましょう。
そして仕様が変更するような修正を加えた場合は、Kiroに仕様書を変更してもらいましょう。
もちろん最初に仕様書を書き直してから実装しなおすのが確実ですが、この辺もKiroは融通がきくので便利です。
おつかれさまです。
これでKiroによる仕様駆動開発は終了です。
なんだこれだけ？と思われたかも知れませんが、あとは仕様書に書いてあることを理解して、ユーザーや他のプログラマとレビュー（会議）して、Kiroに修正してもらうことができれば、あなたはAI時代にエンジニアとしても活躍できることでしょう。
趣味やゲーム、クリエイティブの世界では、バイブコーディングで、AIに勝手に仕様を考えてもらう方法もありですが、ビジネスの世界で使うシステムでは、仕様は最終的に人間が決定することが、今後も続くと思われます。
そしてKiroは、世界最大のクラウド環境を提供しているAmazonのAWSから出ている仕様駆動開発ツールです。
Kiroをマスターすれば、世界で1番使われているクラウドサービス上で動くプログラムを、仕様駆動で開発できるというスキルを身につけたことになるのです。
仕様駆動AI開発ツール
Kiro：Amazon AWSが提供する、AI駆動開発ツール、VScodeの派生ツール
Github Spec-kit：Githubが提供する仕様駆動開発ツール、Claude codeなどの各種CLIツールで開発可能
cc-sdd：日本発の仕様駆動開発ツール、Claude codeなどの各種CLIツールで開発可能
VScode Plan mode：VScodeでの仕様駆動開発モード
Cursor Plan mode：VScodeでの仕様駆動開発モード
Replit Agent Plan mode：ReplitAgentでの仕様駆動開発モード、プランを練るのがメイン
Google Antigravity：Googleが提供するIDEで、仕様駆動開発が可能。画面生成から開始する
終わりに
おめでとうございます。
全てのカリキュラムが終了しました。
いかがでしたか？
本書では、１汎用AIツールのClaude、２ Webサイト作成ツールのReaddy、３ 仕様駆動開発ツールのKiroという３つの異なる開発ツールを使用して、AI駆動開発の最新動向を体験しました。
巻末の付録には、V0、Bolt、ReplitAgent、Cursor、Spec-kitとGeminiCLI、ClaudeCode、Codexなどの使い方も添付しました。
これらのツールは今までの教本で使用していたのですが、最新の動向を理解してもらうために、思い切って書き直したので、巻末に付録として移動させたものです。
AI駆動開発の世界はまだ、始まったばかりです。
これからどんなツールが標準になるかは誰にもわかりません。
本書をきっかけに、AI駆動開発を、あなたの仕事に役立てていただければ、本当に嬉しいです。
おしまい
付録
以下は、２０２４年１１月に執筆した全著の、V０、Bolt、Replit、Cursor＋Cline、SpecKit＋CLI型AI駆動開発ツールの記事です。
この３つのツールは今回メインの記事からは外しましたが、今でも大人気のAI駆動開発ツールです。
これらのツールを使いたい場合は、参考にしてください。
V0を使ってみよう！
V0には下記のURLからアクセス出来ます。
v0 by Vercel
https://v0.dev
早速アカウント登録しようとしたら、GitHubという馴染みないアカウントでログインすると出てきます。
一般的なAIツールはGoogleアカウントでログインする事が多いのですが、AI開発ツールの場合はGitHubという一般の人には馴染みがないアカウントでログイン出来る事が多いのです。
GitHubとは、マイクロソフトが２０１８年に買収した、ソースコード管理サービスをしている会社で、プログラマでGitHubを知らない人はいません。
AIが生成したソースコードをGitHubに保管して、バージョン管理をするのに便利なので、まだGitHubのアカウントをお持ちでない方は、これを機会にまず、GitHubのアカウントを作成する事をおすすめします。
サンプルを作ってみる
v０へのログインが完了したらプロンプト入力画面から、以下のプロンプトを入力してみてください。
プロンプト：「簡単でシンプルなサンプルを作成してください。」
AIは、毎回同じ質問をしても、微妙に違う回答をするのが特徴です。
AIがわかっていない人は、ハルシネーション（AIの誤回答）をバグだと言いますが、本当はバグではありません。
AIに人間が期待した以上の独創的な回答をしてもらうためにも、そういう仕様になっているのです。
毎回同じ回答を期待するなら、AIではなくプログラムを作成するしかありません。
私の環境で、上記のプロンプトを試してみたら、
v０「はい、簡単でシンプルなサンプルを作成しましょう。以下は、基本的なカウンターアプリケーションのReactコンポーネントです。」
と回答して、下記のアプリを作成してくれました。
V0の回答にあった"Reactコンポーネント"とはどういうものでしょうか？
Reactはフェイスブックやインスタグラムで有名な米国メタ社が提供する、JavaScript用のライブラリです。
Webアプリは、フロントエンド（画面作成）とバックエンド（データベースなどの複雑な処理）の両方でプログラムを作成する必要があります。
Reactはフロントエンド用のライブラリです。
ということは、このサンプルプログラムはJavaScriptというプログラム言語で書かれているのでしょうか？
Code画面
画面右上のPreviewボタンの右側にある、"counter.tsx"
というボタンを押してみてください。
あなたがv０に作成してもらったプログラムが同じかどうかはわかりませんが、このプログラムのソースコードの名前は、”counter.tsx”となっています。
tsxというのは実はJavaScriptの拡張子ではなく、TypeScriptの拡張子です。
TypeScriptは、マイクロソフトが提供する、JavaScriptを拡張したプログラム言語です。
JavaScriptは、小規模な開発を行うには素晴らしい言語で、当時としては最先端の機能（マニアックなので覚えなくてもいいですが、関数型プログラミングとか、クラスを作らずに少ないメモリでオブジェクト指向プログラミングを実現したり）を備えていて、いまだにWebプログラミングではJavaScriptが使われ続けています。
ところが大規模なシステムや大人数での開発には向いていません。
そこで登場したのが、TypeScriptです。
TypeScriptは、実際にWebで使われる時にはJavaScriptのプログラムコードに変換されます。
色々と難しい話が続きましたが、こういう事を覚えていくのが、環境を把握するという事なのです。
v0はフロントエンド開発ツール
注意：2024.11.22 v0はバックエンドもNext.jsのコードを生成出来るフルスタック（フロントもバックも両方の意味）開発ツールにバージョンアップしました。
v0というAI開発ツールは、Vercel社が開発したWeb画面作成用のフロントエンド生成ツールで、実はバックエンドのプログラムは生成してくれません。
Vercel社は、Reactをフロントエンドで使用する時によく使われる、Next.jsというバックエンドのフレームワークを提供している会社です。
バックエンドの開発者はバリバリのプログラマが多く、デザインに自信ない人も多いので、Next.jsで開発する時に、フロント部分（画面）をAIで美しいデザインで生成できるツールを提供しているのです。
エラー時の処理
サンプルプログラム程度であれば、エラーが出る事はほとんどありませんが、もしエラーが発生した場合は、v０にエラーの修正もしてもらいましょう！
プロンプト：「エラーが発生しました。修正してください。」
エラーメッセージが出力されている時は、そのエラーメッセージをプロンプトに貼り付けるといいでしょう。
実行時の画面が不正であれば、画面ハードコピーをv0に渡してエラーを修正する事も出来ます。
また、AI駆動開発ツールは、ツール自身がエラーを検知した時（Fix）ボタンを表示してくれます。その場合はFixボタンを押す事で、上記の操作無しに、確実にバグフィックスを、ツールに命令する事が可能です。
画面UIの生成
次は画面部品が複数並んだ画面を作成してみましょう。
本書では、グラフィックツールで作成した、画面仕様書用の画像を使いますが、似たような画面のハードコピーや、インターネット上の画像でも構いません。（趣味でプログラム作るだけならいいですが、公開する場合はロゴや画像などの著作は真似しないでください！）
画像が用意できたら、クリップマークから画像をアップロードして、
「この画像を判断して画面を生成してください」
と実行してみましょう。
少し複雑なものだと、エラーが発生するかも知れません。
動作も期待したものと微妙に違うかも知れません。
その場合は根気強く、v０にエラーを修正してもらいましょう。
また、Webページを生成したい場合、画面の画像をアップロードする方法以外に、URLを指定して、対象ページを生成する方法もあります。
本格的なプログラムの作成
それではいよいよ本格的なプログラムを作成してみましょう！
以下のプロンプトを入力してみてください。
プロンプト：「シンプルなMarkdownエディタを作成してください」
なんとMarkdownを入力すると、プレビューまで表示してくれる画面が作成されました（都度完成品が違うので多分作成されたはずです）
v0はフロントエンド開発ツールなので、他のオンラインエディタと違い、複数ファイルをクラウドに保存しておく機能は無いと思います（多分）
生成されたマークダウンエディタ
マークダウンプレビュー画面
おまけ、Webデザインで使用してみる
最近v0をデザイン作成ツールと紹介している人をよく見かけますが、v0はフロントエンドをAIで美しく仕上げるツールで、デザインソフトではありません。
なのでワープロやデザインソフトのフォーマットに変換出来ない事や、Youtubeのサムネを作ったら、Canvaの方がよかったみたいな事を言ってもはじまりません。
そこで、なぜそのような誤解が生じたのか？Webデザインでよく使用するヘッダー画像に文字列を埋め込む作業をv0でやってみましょう！
まず、文字を埋め込みたい画像を用意して、クリップマークからアップロードします。
以下のプロンプトを入力します。
プロンプト：「以下の文字列をこの画像に大きく埋め込んでください：”Markdownが切り開く、新しいAIの時代！”」
文字付きのヘッダー画像が生成されました。
v0ではこういう事もあっという間にできるので、デザインツールとして誤解されるのもわかる気がします。
先ほど作成したMarkdownエディタでも、色や表示の大きさなどのデザイン変更をv0に指示してみて下さい。
きっと思い通りの画面が作成される事でしょう。
Boltを使ってみる
次はBoltというツールを使ってみましょう！
と言っても、使い方やバグの取り方は今までv0で覚えた事とまったく一緒です。
よろしければ、v0との違いを確認する意味でも、v0の時に出てきた、サンプルやUI画面、マークダウンエディタなどの生成を試してみてください。
違うのは、Boltが生成する環境の違いだけです。
Boltは、Stackblitzという開発ツールをオンラインで提供している会社の、AI版開発ツールです。
注意：Boltはブラウザに特別な環境を構築するので、スマホやタブレットでは動作が安定していません！PCでの使用をお勧めします
Bolt
https://bolt.new
Stackblitzの特徴として、WebContainerAPIという、バックエンドであるWebサーバ（Node.js）を、ブラウザ内でバーチャルに実行する技術を提供しています。
この仕組みのおかげで、高価なサーバ使用料を支払わなくても、ブラウザ内で開発実行する環境が完成します。
そのStackblitzの技術を活用して、AI開発ツールにしたのが、Boltです。
v0はフロントエンドのみを生成してくれるツールですが、Boltはバックエンドも生成してくれるので、その分、v0の時よりもバグや実行エラーが発生する事も多いかも知れません。
その代わりに、v0では出来なかった、例えばMarkdownエディタのファイル保存や複数ファイル対応も、動作させる事が出来ます。
しかし他のクラウド開発ツールでは、後述するReplit AgentやCursorなど、さまざまなプログラム言語で開発実行する事が可能ですが、BoltはWeb開発に特化していて、ライブラリもJS・TS関係のものばかりです。
一応他のプログラムとしてはPythonがあるようですが、Webのバックエンドとして一部機能が使えるだけのようです。
Boltで作成した、Markdownエディタの例
Boltで使えるWeb開発環境の一覧
Popular:
- Astro Basics：静的サイト生成に特化したモダンなウェブフレームワーク
- Next.js：Reactベースのフルスタックフレームワーク
- Next：Next.jsの略称
- React：Facebookが開発したUIライブラリ
- Vanilla：フレームワークを使用しない純粋なJavaScript
- Static：静的なウェブサイト開発環境
- Node.js：サーバーサイドJavaScript実行環境
- Angular：Googleが開発した包括的なウェブフレームワーク
- Vue：シンプルで直感的なプログレッシブフレームワーク
- WebContainer API：ブラウザ内でNode.js環境を実行するためのAPI
Frontend:
- Angular：大規模アプリケーション向けフレームワーク
- React：コンポーネントベースのUIライブラリ
- Vue：段階的に採用可能なフレームワーク
- Preact：軽量なReact代替ライブラリ
- Lit：Web Componentsを作成するためのライブラリ
- Svelte：コンパイラとしても機能するフレームワーク
- Qwik：高性能なフロントエンドフレームワーク
- Solid：Reactに似た高性能なフレームワーク
- Bootstrap5：人気のCSSフレームワーク
- Static：静的サイト開発環境
- Vanilla：フレームワーク未使用の素のJavaScript
- Effector：状態管理ライブラリ
- Ember：オピニオネイテッドなフレームワーク
Backend:
- Next.js：Reactベースのサーバーサイドレンダリングフレームワーク
- Express：Node.js用の標準的なウェブフレームワーク
- Koa：Express開発者による次世代ウェブフレームワーク
- Egg.js：Node.js用の企業向けフレームワーク
- Feathers：リアルタイムアプリケーション向けフレームワーク
- GraphQL：効率的なAPIクエリ言語
- Json-server：JSONファイルでRESTful APIを作成
- JSON GraphQL：JSONデータのGraphQLサーバー
- H3：軽量なHTTPフレームワーク
- Nitro：高性能なサーバーエンジン
Fullstack:
- Astro：高パフォーマンスな静的サイトジェネレーター
- Next.js：Reactベースのフルスタックフレームワーク
- Nuxt：Vue.js用のフルスタックフレームワーク
- Remix：モダンなウェブアプリケーションフレームワーク
- SvelteKit：Svelteのアプリケーションフレームワーク
- Quasar：Vue.js用の包括的なフレームワーク
- WebContainerAPI：ブラウザ内Node.js実行環境
Docs,Blogs & Slides:
- Eleventy：シンプルな静的サイトジェネレーター
- Docusaurus：技術文書作成フレームワーク
- Slide：プレゼンテーション作成ツール
- Astro Blog：Astroを使用したブログテンプレート
- Astro Portfolio：Astroのポートフォリオテンプレート
- Straight：シンプルなドキュメント作成ツール
- VitePress：Vue用の静的サイトジェネレーター
- Ladle：コンポーネント開発環境
- WebContainer API：ブラウザ内開発環境
Creative:
- TresJS：Three.jsのVue.jsラッパー
- Remotion：プログラマブルな動画作成ツール
- GreenSock：高性能アニメーションライブラリ
Mobile & VR:
- JavaScript：基本となるプログラミング言語
- TypeScript：型付きJavaScript
- Angular：モバイルアプリ開発可能なフレームワーク
- Vue：クロスプラットフォーム開発対応
- Svelte：効率的なモバイルアプリ開発
- React：React Nativeでモバイル開発
- Solid：パフォーマンス重視のフレームワーク
- Vue：モバイル開発対応フレームワーク（重複）
Vanilla:
- node.new：オンラインNode.js開発環境
- Static：静的サイト開発環境
- Vanilla：フレームワーク未使用の素のJavaScript
- Nodemon：Node.js開発用自動再起動ツール
- Vitest：高速なテストフレームワーク
- Webpack：モジュールバンドラー
- RXJS：リアクティブプログラミングライブラリ
Native Languages:
- Python：汎用プログラミング言語
- WordPress：PHPベースのCMSプラットフォーム
- Jq：コマンドライン用JSONプロセッサ
（上記はClaudeAIで生成）
問題集
1. Boltでまずは簡単なサンプルを作成してみよう！
v0はReact中心ですが、Boltではどういうフレームワークを使用しているのか確認してみましょう。
2. UI部品が入った画像を用意して、UI部品に対応したプログラムを作成してみよう！
v0ではフロントエンドの生成のみですが、Boltではサーバ部分も生成してくれます。
v0との生成の違いを確認してみましょう。
3. Markdownエディタを作成してみよう！
Boltを使って、WebアプリとしてMarkdownエディタを完成させましょう。
Replit Agentを使ってみる
Replit Agentは、Replit社が提供するAI Agentです。
注意：Replit Agentは現在プレリリース版で、有料課金ユーザーしかその機能を試せません！
Replit Agent
https://docs.replit.com/replitai/agent
Agentとは、自律型のAIの事で、問題解決や、人間から指定された目標達成のために、自分で考えて動作するAIです。
Agentと言われると何やら難しそうですが、使い方はv0、Boltと同じで、プロンプトから、作成したいプログラムの仕様を入力するだけです。
V0、Boltはプログラム言語はJavaScriptかTypeScriptで、Web系の開発だけだったので、ライブラリやフレームワークを指定するだけで良かったのですが、Replitは、さまざまなプログラムの指定が行えます。
とはいえ、現時点で開発環境が充実しているのは、JavaScriptとPythonだけで、他のプログラムでは、環境が全て揃わなかったり、自動で実行までしてくれなかったりと、まだまだ発展途上の感じがします。
それでも、優れた開発環境上にさまざまなプログラム言語で、アプリを生成してくれるので、プログラム学習にもピッタリです。
JavaScriptとPython以外にも、最近流行りのGoやRust、まだまだレガシーシステムではよく使われている、PHP、Java、C、C++、今では標準となった、C#、Kotlin、Swiftなど、環境だけでも学習しておきたいプログラム言語はたくさんあります。
これら全ての言語を、ひとつづつ学習して、自分の環境で動かすとしたら、永遠とも言える時間を費やさないといけません。
Replit AgentのPythonで作成した、Markdownエディタの例
これから来るAI時代は、プログラマは、ひとつのプログラム言語を深く覚えるのが仕事ではなく、色んな言語を全て扱えるのが仕事になるかも知れません。
Replitで作成可能なプログラム言語の一覧
- Python：汎用プログラミング言語。読みやすい文法と豊富なライブラリが特徴
- HTML, CSS, JS：ウェブ開発の基本三要素。HTMLは構造、CSSはデザイン、JSは動的機能を担当
- Node.js：サーバーサイドでJavaScriptを実行する環境
- C++：高性能な汎用プログラミング言語。システムプログラミングによく使用
- C：最も基本的なプログラミング言語の一つ。OSやシステムプログラミングに使用
- Java：オブジェクト指向プログラミング言語。企業システムでよく使用
- C#：Microsoftが開発した汎用プログラミング言語。.NET環境で使用
- Bash：UNIXシェル環境でのスクリプト言語
- PHP：ウェブ開発向けサーバーサイドスクリプト言語
- WebServer：ウェブページやアプリケーションを提供するサーバーソフトウェア
- Blank Repl：プログラミング学習プラットフォームの一つ
- React：Facebookが開発したJavaScriptライブラリ。UIコンポーネントの構築に使用
- Javascript：ウェブブラウザで動作する動的なプログラミング言語
- HTML, CSS, JS(Auto Refre：自動更新機能付きのウェブ開発環境
- TypeScript：JavaScriptに型システムを追加した言語
- SQLite：軽量なリレーショナルデータベース
- Swift：Apple社が開発したiOSアプリ開発用言語
- Go：Googleが開発した高性能な言語。並行処理が得意
- Ruby：読みやすさを重視した動的プログラミング言語
- Lua：軽量で組み込み用途に適したスクリプト言語
- Flask：Pythonの軽量ウェブフレームワーク
- PHP CLI：コマンドライン上で動作するPHP実行環境
- Haskell：純粋関数型プログラミング言語
- Dart：Googleが開発したウェブとモバイルアプリ開発用言語
- QBasic：初心者向けの古典的なBASICプログラミング言語
- R：統計解析や機械学習に特化した言語
- Kotlin：JVM上で動作する現代的な言語。Android開発でよく使用
- Python Data Science：データ分析や機械学習用のPython環境
- Visual Basic：Microsoftが開発した初心者向けプログラミング言語
- Clojure：JVM上で動作する現代的な関数型プログラミング言語
- JavaFX：Javaのデスクトップアプリケーション用GUIフレームワーク
- Scala：JVM上で動作する関数型とオブジェクト指向を組み合わせた言語
- Mono C#：クロスプラットフォームで動作するC#実装
- CoffeeScript：JavaScriptにシンプルな文法を提供する言語
- C++ CMake Project：C++のビルドシステムを使用したプロジェクト
- Pascal：教育用途でよく使われる構造化プログラミング言語
- PHP(PDO SQLite)：SQLiteデータベースに接続するPHP環境
- Julia：科学技術計算向けの高性能言語
- Python HTTP Server：Pythonで実装された簡易ウェブサーバー
- C CMake Project：C言語のビルドシステムを使用したプロジェクト
- Markdown：テキストを整形するための軽量マークアップ言語
- CIE PseudoCode：教育用の疑似コード記述言語
- Deno：モダンなJavaScript/TypeScriptランタイム環境
- Elixir：Erlang VM上で動作する関数型プログラミング言語
- Scheme：Lispの方言の一つ。教育用途でよく使用
- Basic：初心者向けの古典的なプログラミング言語
- BrainF：極めてミニマルな難解プログラミング言語
- PowerShell：Windowsのシステム管理用スクリプト言語
- Verilog：ハードウェア記述言語
- F#：Microsoftが開発した関数型プログラミング言語
- Express.js：Node.js用の人気のあるウェブフレームワーク
- Octave-Nix：科学技術計算向けのプログラミング環境
- LOLCODE：ユーモアを含んだエソテリックプログラミング言語
- PyPl Package Template：Python パッケージ作成用テンプレート
- Erlang：並行処理に強い関数型プログラミング言語
- Fortran(95)：科学技術計算向けのプログラミング言語
- Python(PyEnchant)：スペルチェック機能を含むPython環境
- Common Lisp：Lispファミリーの主要な方言の一つ
- OCaml：関数型プログラミング言語
- Harvard CS50：ハーバード大学のプログラミング入門コース
- Perl：テキスト処理に強い汎用スクリプト言語
- Bun：高速なJavaScript/TypeScriptランタイム
- Tcl：シンプルな構文を持つスクリプト言語
- LaTex：高品質な文書作成システム
- Blockly：ビジュアルプログラミング言語を作成するためのライブラリ
- Typescript PyScript：Pythonをウェブブラウザで実行するためのフレームワーク
- COBOL：ビジネス向けの古典的なプログラミング言語
- APL：配列処理に特化した言語
- Raku：Perl 6から改名された現代的なプログラミング言語
- Crystal：Rubyライクな文法を持つ静的型付け言語
- Nim：効率的で表現力豊かなシステムプログラミング言語
- Slidity starter：プレゼンテーション作成フレームワーク
- Forth：スタックベースのプログラミング言語
- Emotion：CSSインJSライブラリ
- Roy：JavaScriptにコンパイルされる関数型言語
- JBang-Java：Java用の軽量実行環境
- Bloop：ビルドサーバー
- Cython Template：PythonとCを組み合わせたテンプレート
- Basil：ウェブアプリケーションフレームワーク
- Sinatra：Rubyの軽量ウェブフレームワーク
- Paper.js：キャンバスベースのグラフィックスライブラリ
- Awk：テキスト処理に特化したUnixツール
- Haxe：複数のプラットフォームにコンパイル可能なプログラミング言語
- Phaser.js + Socket.io：ゲーム開発とリアルタイム通信のためのJavaScriptライブラリ
- OCaml Script：OCamlをスクリプト言語として使用する環境
- Elm：Web フロントエンド開発のための関数型プログラミング言語
- Pyramid：Pythonのウェブフレームワーク
- Inform：インタラクティブフィクション作成用言語
- J：APLの後継となる配列処理言語
- Beego：Go言語用のウェブフレームワーク
（上記はClaudeAIで生成）
問題集
1. Replitを使って、簡単なサンプルを作成してみよう！
Web＋ JS/TSで生成されるのか？Pythonで生成されるのか？確認しましょう。
もし、Webで生成された場合は、"Pythonで作成して下さい"と指定して、違いを確認しましょう。
2. UI部品が入った画像を用意して、UI部品に対応したプログラムをPythonで作成してみよう！
どういうライブラリやフレームワークが使用されるのかを学習してみて下さい。
3. Markdownエディタを作成してみよう！
ReplitとPythonを使って、Markdownエディタを完成させましょう。
Cursor + Clineの紹介
Cursorは、Anysphere社が開発した、AIエディタです。
注意：CursorはWebサービスではなく、PCで動作するアプリケーションです！
Cursorは以下のURLからダウンロードできます。
Cursor
https://www.cursor.com
CursorはMicrosoft社のvs codeを改造して作られています。
Clineは、vs codeやCursorで使用できる、AI拡張プラグインで、簡単に言うと、ローカルのエディタで、BoltやReplitのAI機能を実行できるツールです。
- ClineはCursorエディタの拡張プラグイン画面で、Clineと検索するとインストールできます。
Vs codeとそこから派生したエディタは、世界のプログラマの実に８０％以上がメイン環境で使用していると言うデータがあります。
今回はCursorやvs codeの使い方は説明しませんが、この環境を覚えると、プロのプログラマと同様の開発環境を手にいれる事となります。
Cline拡張プラグイン
Cursor＋Clineの操作方法（概要）
1. Cursorをインストールする。
2. ファイルメニューのフォルダを開くで、
ワークスペース（作業場所のディレクトリ）を決定する。
3. アイコンの拡張機能を選択し、Clineを検索してインストールする。
4. 拡張メニューに、🤖マークが隠れているので、🤖（Cline）を選択する
5. API Providerで、LLMのAPIを設定する。
（Computer Useのデバッグが便利なので、Anthropic Claudeがおすすめ）
6. ＋マーク（New Task)をクリックし、チャットを開始する
クラウド型開発ツールと違いClineは、あなたのPCに対してインストールや生成したファイルの保存を行うので、操作を実行していいか？と毎回確認してきます。
わずらわしいと思うかも知れませんが、その都度メッセージや生成ファイル等の、把握しておきたい環境を確認する事が出来ると、いいように考えましょう！
プロのプログラマーはそのタイミングで、例えばプログラム中の表示文字列が英語だったら、Cursor（AIエディタ）で選択して、日本語のメッセージに変更してください！など、都度修正をしながら生成していきます。
それが出来るようになったらもう、あなたはプロフェッショナルと言ってもいいでしょう！
CursorのAIエディタ機能とエージェント機能（Composer）を使う
Cmd（Mac) or Ctl（Windows) キー ＋ k
コードを選択してCmd＋kを押すと、前後の対象コードに対してAIが修正や、続きのコードを提案してくれる。
Cmd（Mac) or Ctl（Windows) キー ＋ i
CursorのAIチャット（AIに質問や修正指示を出せるウィンドウ）を表示する。
Cmd（Mac) or Ctl（Windows) キー ＋ l (エル）
CursorのAIエージェントの、Composerを表示する。
ClineでMarkdownエディタを生成！
完成したMarkdownエディタ
対応言語はWeb関連とPythonが中心ですが、Replitと同様、今後対応言語は増加していく事が想定されます。
実験してみたら、環境構築は未対応でも、プログラムコードの生成は、簡単なものならほとんどの言語で生成が出来ました。
問題集
1. Cursor+Clineを使って、簡単なサンプルを作成してみよう！
Web／Python以外のプログラムも生成してみましょう。
2. UI部品が入った画像を用意して、UI部品に対応したプログラムを他の言語で作成してみよう！
どういうライブラリやフレームワークがしようされるのかを学習してみて下さい。
3. Markdownエディタを作成してみよう！
自分で選んだ言語を使って、Markdownエディタを完成させましょう。
4. 完成したソースコードを読んでみよう！
全て覚える必要はありません。ファイルやブロック毎に、だいたいどういう事をしているのか把握するだけで大丈夫です。
細かく覚えるより、たくさんのアプリを生成した方がより上達するスピードが早いと思います。
5. Markdownエディタの修正変更をCursorの力を借りながら、自分でソースに追加してみよう！
この作業が出来るようになれば、もうあなたはプロのプログラマーです。
AI駆動開発Lifeをお楽しみください！
その他のAI開発環境
AI開発環境は戦国時代を迎えています。
どんどん新しいツールが発表されているので、色々と試してみるとよいでしょう。
Anthropic Claudeで作成したMarkdownエディタ
主なAI開発ツール
- ChatGPT : Pythonのプログラムを自動生成する、Advanced Data Analysis （旧Code Interpreter）という仕組みで、Pythonを実行する。
- Claude : ArtifactsでHTML/CSS/JavaScript環境のWeb画面を実行する。
- Gemini : ChatGPTと同様の、Python実行が可能。
- Wix：ドラッグ＆ドロップで簡単にウェブサイトが作れるウェブサイトビルダー。豊富なテンプレートと、eコマース機能も充実。初心者でも使いやすい設計が特徴。
- Create.xyz : Createはプログラミングの知識がなくてもWebアプリを制作できるノーコードツールで、簡単なデモなど、動くものを素早く作る場合に適しています。
- Bubble：複雑なウェブアプリケーションが作れるノーコードプラットフォーム。データベース連携やAPI統合など、高度な機能を実装可能。プログラミング不要でアプリ開発ができる。
- WebFlow：プロフェッショナルなウェブデザイナー向けのウェブサイトビルダー。HTMLやCSSのような細かいコントロールが可能で、レスポンシブデザインの作成に優れている。
- Framer：デザイナー向けのウェブサイト制作ツール。インタラクティブなアニメーションやプロトタイプの作成に特化。Reactコンポーネントの使用も可能。
- Galileo：AIを活用したUIデザインツール。ユーザーの自然言語による入力からデザインを自動生成。モバイルアプリのデザイン制作に特化している。
- GitHub Copilot：OpenAIのAIを活用したコーディング支援ツール。プログラマーのコメントや関数名から意図を理解し、リアルタイムでコードを提案・自動補完する。40以上のプログラミング言語に対応。
- Aider : AIとペアプログラミングをするをコンセプトに作成された、チャットボット形式の開発アプリ。
- Cursor Composer : AIエディタのCursorが提供するAIアプリジェネレータ。Clineと比べ有料課金ユーザのみ使用可。
- Markdown AI : マークダウンを記述するだけでWebプログラミングが可能で、バックエンド（サーバープログラム）の代わりにAIが動作する、マークダウンのみで作られたAIサーバを簡単に組み込む事が出来るWeb上のサービス。
（上記はClaudeAIで生成）
Spec kitとGemini CLI
「こんな感じのプログラムを作りたい！」と曖昧な指示で、あとはAIがしっかり考えてくれる、バイブ（雰囲気）でコーディングするという意味の、「バイブコーディング」という言葉が流行り出したのも束の間、全く正反対の「仕様駆動開発」というAIツールが出回りはじめました。
「仕様駆動開発」とは、開発の仕様をしっかりと先に決めて、それを元にAIがプログラムの生成を忠実に行う開発手法のことです。
この手法は、開発のスピードを上げるために使われることも多いのですが、スピードをだけでなく、コードの品質向上や仕様を残す事で、その後の保守性も飛躍的に向上するのです。
また既存のシステムの仕様書をAIに自動で生成してもらい、その仕様を人間がプロンプトで変更する事で、過去の膨大なレガシーシステムの資産を再活用しようという試みも始まっています。
本書では、仕様駆動開発ツールに、Githubの「Spec kit」を、そして実際に開発を行うAIエージェントは、Google Gemini CLIを用いて行います。
AI駆動開発ツールは初期の頃、v０などクラウド型ツールの利用から始まって、昨年はCursorなどの、PCアプリケーション上でのAIが大流行りでしたが、最近はコマンドを打ち込む画面のCLI（Command Line Interface）上でのAI開発ツールに注目が集まっています。
CLIは、昔WindowsやMacが発売される前のMS-DOSとかUNIXと言われていた頃の、コマンドと呼ばれるおまじないをいくつも覚えておいて、それを真っ黒いターミナルの画面から緑色の文字を打ち込む事でしかコンピュータを使用出来なかったあの頃の名残りの技術です。
その後マウスやタッチパネルの普及で、コマンドを頑張って覚えなくても誰にでもコンピュータやスマホが使えるようになったのは、皆さんもご存知の通りです。
そんな古臭いインターフェースがなぜまた流行り出したのか？というと、実は最先端技術である「AIチャットbot」のせい（おかげ？）です。
文字で何かしら入力すると回答するという仕組みは、考えてみれば、ターミナルもチャットのようなものです。
そして、よりシステムに近いところで操作した方が、生成したプログラムの環境構築やテストがやり易いので、アプリケーション型AI開発ツールではなく、ましてやネットを経由したクラウド型AI開発ツールでもない、システムのど真ん中で操作するCLIツールに、AI駆動開発ツールが行き着いたという事らしいです。
仕様駆動開発ツールのSpec kitは、Gemini CLI以外にも、さまざまなAIエージェントとの組み合わせが可能です。
今後プロが使うAI駆動開発ツールの大本命はCLIツールになっていく事が予想されるので、本書ではメインの説明には無料でも使える「Gemini CLI」を使いますが、「Codex」と「Claude Code」そして「Copilot CLI」での使用方法も追記しました。
それでは、仕様駆動開発の世界に飛び込んでみましょう！
開発の前の準備
ターミナルの準備
Spec kitとGemini CLIでの開発には、PCとターミナルが必要です。
（iPadやAndroid搭載タブレットでは、開発出来ません）
Macには初めからターミナルが用意されているのですが、Windownsでは、UNIXコマンドが実行可能な「WSL」をインストールするか、付録でも説明するCursorやVS Codeの中のターミナルウィンドーを使用してもOKです。
Node.jsのインストール
あとはNode.jsというサーバーサイドJavaScriptのランタイム環境がインストールされている事が必須です。
Node.jsがインストールされているか確認するには、ターミナル上から下記を入力してエンターキーを押します。
$ node -v
（＄は昔のUNIX時代からの慣習で、ターミナル上でのプロンプト入力という意味で、$の文字は入力しません）
バージョン情報が表示されたらOKですが、コマンドが見つかりません、みたいなメッセージの時には、Node.jsをインストールしてください。
node.jsのインストールは、
https://nodejs.org/ja/download
を参照してください。
uvのインストール
Spec kitはuvというPythonのバージョン管理ツールを使用します。
uvのインストールは、ターミナルから
$ curl -LsSf https://astral.sh/uv/install.sh | sh
もしくは
$ brew install uv
でインストールが可能です。
Spec Kitの起動
準備が完了したら、Spec Kitを起動しましょう。
$ uvx --from git+https://github.com/github/spec-kit.git specify init prj01
と入力しましょう。
上記のコマンドの、prj01はプロジェクト名なので、別の名前でもいいのですが、名前は英数字のみで全角文字は使えません。
そして、間にスペースも入れないで、特殊文字も使わずにプロジェクト名を決定してください。
（さらにコマンドと同じ名前を使わないというルールもありますが、今はそこまで気にする必要はないでしょう）
連動するAIエージェントを選択する画面が表示されるので、
ここでは、「Gemini CLI」を選択します。
その後は、
「POSIX Shell (bash/zsh)」を選択します。
Spec kitが終了し、ターミナルのコマンド入力画面に戻ります。
なんと、Spec kit上での操作はこれで、全ておしまいです。
Spec kitは何をしたのでしょうか？
コマンドの練習も兼ねて、何がインストールされたか見てみましょう！
コマンドを学ぶ
その前に、必須コマンド一覧です。
覚えておきたい必須コマンドは、ls、pwd、cdの３つだけです。
$ ls
今いるディレクトリのファイル名や下層ディレクトリ名を表示します。
$ pwd
今いるディレクトリをフルパスで表示します。
$ cd ディレクトリ名
指定されたディレクトリに移動します。
$ cd
ログイン時のディレクトリに移動します。
$ cd ..
（..はそのまま..と入力してください）
一つ上のディレクトリに移動します。
ターミナルから、以下を入力して下さい。
$ ls
（今いる場所のファイルを見るコマンドです）
すると、カレントディレクトリ（今いるフォルダー）の下に、prj01とあります。
Spec kitがディレクトリを作成したようです。
$ cd prj01
（ディレクトリを移動するコマンドです）
と入力して、prj01ディレクトリに移動しましょう。
＄ ls
もう一度ファイルを見ても、このフォルダには何も表示されません。
＄ ls -al
(隠しファイルも表示してねという意味です)
と入力すると、「.gemini」「.specify」という２個のフォルダが作成されていました。
（.ドットで始まるファイル名は、隠しファイルという意味です）
$ ls -Ral
（下の階層全て表示してねという意味です）
何やら色々なファイルが作成されているのがわかります。
Gemini CLIを使う
さあ、それではいよいよGemini CLIの起動です。
$ pwd
と入力して、自分が今prj01というディレクトリにいる事を確認します。
$ gemini
Gemini CLIが起動されました。
（もしGeminiを終了したい時は、Ctrl＋cを2回連続入力します）
/specify（基本設計）コマンドの実行
まず、
＞ /specify シンプルな日本語入力可能なテキストエディタを生成してください
と入力します。（日本語の部分は引数と呼ぶ事があります）
/specifyコマンドは、与えられた情報を元に詳細な仕様書を、spec.mdというファイルに生成します。
ファイルを更新していいか？と聞いてくるので許可しましょう。
allow alwaysにすると、後は勝手にやってくれますが、ここは学習のため、毎回allow onceを選択しましょう。
この後何十回も、許可を求めてきますので、面倒になったら、allow alwaysにしても大丈夫です。
/plan（詳細設計）コマンドの実行
Geminiの仕様生成作業が終了したら次に、
＞ /plan ターミナルで動くエディタにしたいので、C言語で、cursesライブラリを使用してください
と入力します。
/planでは実装に必要な言語やライブラリ・フレームワーク、他システム要件などの環境を指示します。
/tasks（作業割り当て）コマンドの実行
次は、
＞ /tasks
引数はありません。
今まで作成した仕様書を、タスク（作業）を割り当てて、あとは一つづつ実装（プログラムを作る）すれば完成です。
/implement（実装）コマンドの実行
最後に
＞ /implement
引数はありません。
ソースコードや環境ファイルの生成、実行可能なプログラムを最終的に生成します。
テストも自動で行なってくれます。
以上４つのコマンドを実行すると、仕様駆動開発は完了です。
今回は最低限の「/specify」「/plan」「/tasks」「/implement」の４つを実行しましたが、フルスタックの開発では、以下の７つのコマンドを順番に使用します。
- /constitution ＜要件＞
要件定義書の生成
↓ - /specify <仕様>
仕様書（基本設計書）の生成
↓ - /clarify
仕様書の問題点を検証する
↓ - /plan <システム・環境要件＞
設計書（詳細設計書）の生成
↓ - /analyze
設計書をタスク実装の前に検証する
↓ - /tasks
タスク（作業）割り当て（実装計画）
↓ - /implement
実装（プログラムや環境ファイルを作成する
残りの３つは、適宜省力が可能なので、まずは４つのコマンドを覚えておけば良いでしょう。
仕様書を見る
生成されたファイルを確認してみましょう。
prj01ディレクトリの下にspecというディレクトリが作成されているはずです。
もうコマンド操作にも慣れたと思うので、この後は説明だけにします。
specの下にプロジェクト名らしい名前のディレクトリがあり、そのさらに下に、spec.mdというファイルがあります。
そのファイルこそが、仕様書そのものです。
spec.mdを開いて確認してみましょう。
あなたが既にターミナルを使いこなしているならviやVScodeなどで確認してもいいのですが、ここでは折角なので、下記を実行してみて下さい。
$ nano spec.md
ターミナル上で動作するエディタで、spec.mdが表示されました。
画面がいきなり、全画面表示に切り替わったと思いますが、この画面の処理をしているライブラリこそが、cursesというライブラリです。
そうです、今から作ろうとしているエディタは、このnanoみたいなエディタなのです。
（余談でややこしい話しですが、nanoエディターは、本当はpicoという名前で、画面の一番上に、picoと表示されています）
spec.mdは、あえて何も指定しない場合は英語で出力されます。
日本語でspec.mdを出力する事も可能ですが、英語の仕様の方がプログラムの品質は向上します。
今後世界中の人に使ってもらう可能性を考えるなら、英語のままにしておいた方が良さそうです。
そこで、Geminiの入力欄で、
＞ spec.mdを表示して下さい
と入力すると、spec.mdが表示されます。
（私の環境では、何故だか一度、表示に失敗していますが、再度お願いすると、無事表示してくれました。
今度は、
＞ spec.mdを日本語に翻訳して下さい
と入力してみましょう。
spec.md日本語版（一部抜粋）
私の環境では、spec.mdファイルが置いてある場所に、spec.ja.mdというファイルを生成してくれました。
しっかりとプログラムの仕様書が作成されています。
他にも、
plan.md（システム要件を盛り込んだ詳細設計書）
tasks.md（コンパイルやライブラリを使ってどう実装するか？の実装計画）
というファイルも生成されています。
これらのファイルは全てマークダウンファイルなので、マークダウンエディタで表示すると、もっと見やすくなります。
生成されたプログラムの実行
それでは最後に、作成したプログラムを実行してみましょう。
prj01ディレクトリの下に、「README.md」というファイルが作成されているので、そのファイルを開きます。
そのファイルの内容に従って、プログラムを実行します。
私の環境では、prj01の下にbuildというディレクトリが生成されていて、その中に、「editor」というプログラムがあるので、それを実行することになっていました。
（あなたの環境では別の名前のプログラムかも知れません）
実行された、editorプログラム
完成したcursesエディタを触って、色々と確認してみましょう。
もしバグがある場合は、Geminiに修正してもらいましょう。
エラーメッセージが出る場合は、そのメッセージをGeminiに渡してあげると、バグ修正が捗ります。
仕様がおかしい場合も、Geminiに伝えて直してもらいましょう。
私がこのサンプルプログラムを実験した時も、４つほどバグ修正を行ないました。
もっと大規模なシステムの場合は、バグの数はかなりの量にのぼります。
AI駆動開発は楽そうに見えて、意外と根気が必要です。
プログラムが完成したら、エディタの機能を自分好みにバージョンアップして行きましょう。
今後、AI駆動開発の主戦場がCLIになっていくなら、CLIから呼び出すこのエディタは、あなたの役に立つかも知れません。
おまけ 他のAIエージェントCLIを使う
他のAIエージェントCLIを、Geminiの代わりに使用するには、当然ですが、CLIツールのインストールが必要です。
（ほとんどのツールがNode.jsを前提に作られているので、下記をインストールの前にNode.jsは必須です）
OpenAIのCodexの場合
$ npm install -g @openai/codex
AnthropicのClaude codeの場合
npm install -g @anthropic-ai/claude-code
GithubのCopilot CLIの場合
npm install -g @github/copilot
インストール後、Spec kitを起動して、Geminiではなく対象となるエージェントを選択します。
作られたプロジェクトディレクトリに移動して、該当ツールを起動します。
OpenAIのCodexの場合
$ codex
AnthropicのClaude codeの場合
$ claude
GithubのCopilot CLIの場合
$ copilot
2025年9月27日現在、Copilot CLIは、Spec kitのコマンドを自動で認識してくれないようなので、以下のプロンプトを入力します。
”I want to use slash commands from /Users/kouichinagata/coke/cli/cpl/.github”
最後のファイル名を指定しているところは、自分の環境に合わせて変更して下さい。
日本語に直すと、
”/Users/kouichinagata/coke/cli/cpl/.githubの場所から、/で始まるコマンドを使いたいので、お願いします”
と言う感じになります。
他のツールでも時々コマンドや環境を認識してくれない時があるので、その時もプロンプトで、環境を指定してあげて下さい。
主な仕様駆動開発ツール
Spec kit：ソフトウェア開発における仕様書作成を支援するツール。テンプレートやベストプラクティスを活用できる。
Amazon Kiro：Amazonが提供するAI/開発関連のサービス。Kiro IDEでのドキュメント管理や開発効率化を目指す。
spec-workflow-mcp：仕様（spec）に基づいた開発ワークフローを自動化するモジュール。MCP対応でAI連携が可能。
tsumiki：モジュールを組み合わせるようにサービスやアプリを構築できる国産ツール。名前の通り「積み木」的な構成が特徴。
cc-sdd：ソフトウェア設計で使われる Component Configuration / System Design Document を指すツール。国産。
（上記はChatGPtで生成しました）
主なCLI型AIエージェント
Copilot CLI ：GitHub Copilotをターミナルから使える公式CLIで、シェルコマンド生成やコード補完が可能。
Claude Code ： AnthropicのClaudeをCLIから利用し、自然言語→コード変換やリファクタリングに対応。
Codex ： OpenAIのコード生成モデルで、自然言語をプログラムに変換でき、APIやCLI経由で利用可能。
Gemini CLI ：Google Geminiをコマンドラインで操作し、コード生成・検索・要約を実行できる。
Cursor CLI ： AIエディタ「Cursor」のCLI版で、エディタ外からもコード補完や修正を実行可能。
Aider ： オープンソースのAIペアプログラマーで、自然言語指示でリポジトリに直接パッチを適用できる。
Auggie CLI ： 複数エージェントを統合してワークフローを自動化するCLI型ツール。
Codeium CLI ： 無料で使える多言語対応のAI補完ツールで、補完速度の軽快さが特徴。
Tabnine CLI ： ローカルモデル実行が可能で、セキュア環境でも利用しやすいコード補完ツール。
Polycoder CLI ： 研究発のコード生成モデルをCLIで利用でき、オープンソース志向の開発者に人気。
（上記はChatGPtで生成しました）
これで、仕様（spec）駆動開発は終わりです。
最新の開発体験はどうでしたか？
これからの時代は、プログラムのソースコードは読めなくても、spec.mdのような仕様書を読んでプロンプトで修正できる人が、プログラマーと呼ばれるのかもしれません。
AI駆動開発のスキルを上達させるには？
生成AI（LLM）の進化で、今後自分でプログラムを組む事は、滅多に無くなるという未来が予想されています。
考えてみれば、昔アセンブラやC言語で、システムプログラミングやライブラリをいちから作成をしていた私も、今ではそういうプログラムを組む事は一切無くなり、高級言語で、既に作られたライブラリを呼べば事足りる時代になりました。
同じように、プロンプトでAIに作らせられるのに、わざわざ人間がプログラムを作る必要性はどんどん無くなる事でしょう。
今後のプログラマの仕事は、仕様駆動開発で生成した仕様書をしっかり把握して、その仕様書を元にシステム改善に必要なプロンプトを組んで、AI駆動開発ツールでプログラムの生成を行うことが、メインの作業になっていくと言われています。
そのための必勝法は、ひたすら何百個もの様々なプログラムをAIに命じて、最後まで作りあげる事です。
AIが言うことを聞かなかったり、意図した通りに動かなかったり、性能が出なかったり、ユーザに受け入れられなかったりと、いろんな経験を数多く積んで、最終的に作りたいものを意のままに生成できる人だけが、今後エンジニアとして生き残れると私は思います。
サンプルアプリの一覧を添付しますので、興味があるプログラムは、どんどんAIに作らせていきましょう！
今後作成してみたいサンプルアプリの一覧
- 天気予報アプリ：特定の地域の天気情報を表示します。
- チャットアプリ：リアルタイムでユーザー間のメッセージ交換ができます。
- メモ帳アプリ：テキストの作成、編集、保存が可能なシンプルなメモツール。
- ブログプラットフォーム：ユーザーが記事を投稿・編集・公開できます。
- 画像ギャラリー：画像のアップロード、表示、アルバム作成ができます。
- レシピ共有アプリ：料理のレシピを投稿し、他のユーザーと共有できます。
- カレンダーアプリ：イベントや予定を管理し、リマインダーを設定できます。
- タスクタイマー：ポモドーロテクニックなどの時間管理をサポートします。
- ショッピングリスト：買い物リストを作成し、チェックリスト形式で管理できます。
- ニュースフィードアプリ：最新のニュース記事やRSSフィードを表示します。
- 掲示板（フォーラム）：トピックごとにディスカッションが可能な掲示板。
- クイズアプリ：選択式や記述式のクイズを出題し、スコアを表示します。
- 投票システム：アンケートや投票を作成し、結果を集計・表示します。
- プロジェクト管理ツール：タスクの割り当てや進捗状況の追跡ができます。
- ポートフォリオサイト：自分の作品やプロジェクトを紹介するサイト。
- オンラインノート共有アプリ：ノートをオンラインで作成・共有できます。
- 音楽プレイヤー：音楽ファイルの再生やプレイリストの作成ができます。
- 動画ストリーミングアプリ：動画のアップロード、再生、コメントが可能。
- 地図アプリ：地図情報の表示やルート検索ができます。
- 翻訳ツール：テキストを他の言語に翻訳します。
- パスワードマネージャー：安全にパスワードを生成・保存します。
- チャットボット：自動応答するボットとの会話ができます。
- オンライン投票システム：リアルタイムで投票を受け付け、結果を表示します。
- ファイル共有アプリ：ユーザー間でファイルのアップロード・ダウンロードが可能。
- タスク管理アプリ：タスクの作成、編集、完了状況の管理ができます。
- ストックトラッカー：株価や仮想通貨の価格をリアルタイムで追跡します。
- リアルタイムチャートアプリ：データのリアルタイムなグラフ表示ができます。
- Eコマースサイト：商品の一覧表示、カート機能、購入手続きが可能。
- カレンダー予約システム：予約の受付と管理ができます。
- オンラインゲーム（シンプルなもの）：例えば、テトリスやパズルゲームなど。1. 天気予報アプリ：特定の地域の天気情報を表示します。
- 個人財務管理アプリ：収入や支出を記録し、予算を管理できます。
- 習慣トラッカー：毎日の習慣や目標の達成状況を記録します。
- フィットネストラッカー：運動や食事の記録、健康目標の追跡ができます。
- レシピ検索アプリ：食材を入力して作れる料理のレシピを検索できます。
- 語学学習アプリ：単語やフレーズの学習、クイズでの練習が可能。
- ブックレビューサイト：読んだ本のレビューや評価を共有できます。
- イベントプランナー：イベントの作成、招待、参加者の管理ができます。
- ソーシャルメディアプラットフォーム：投稿やコメント、友達との交流が可能。
- URL短縮サービス：長いURLを短く変換します。
- 求人掲示板：求人情報の投稿・検索ができます。
- アンケート作成アプリ：質問を作成し、回答を収集・分析できます。
- オンラインコードエディタ：ブラウザ上でコードの編集・実行が可能。
- QRコードジェネレーター：テキストやURLからQRコードを生成します。
- ミームジェネレーター：画像にテキストを追加してミームを作成できます。
- 旅行プランナー：旅行のスケジュールや行程を計画できます。
- 割り勘計算アプリ：友人との費用を公平に分配します。
- デジタルホワイトボード：リアルタイムで共同編集が可能なボード。
- 学習管理システム（LMS）：コース、課題、成績の管理ができます。
- 匿名フィードバックアプリ：匿名で意見やフィードバックを収集します。
- ファッションコーディネーターアプリ：今日のファッションを提案します。
- Markdown対応ノートアプリ：Markdown形式でノートを作成・編集できます。
- オンライン写真編集ツール：基本的な画像編集がブラウザ上で可能。
- 音楽推薦アプリ：好みに応じた音楽を推薦します。
- フラッシュカードアプリ：暗記用のフラッシュカードを作成・学習できます。
- タスク自動化アプリ：定型的な作業を自動化します。
- 株式ポートフォリオトラッカー：投資の状況を追跡できます。
- オンライン調査作成ツール：調査を作成し、データを収集します。
- ムードトラッカー：日々の気分や感情を記録します。
- コミュニティWiki：共同で知識ベースを構築できます。
- カラーパレットジェネレーター：デザイン用のカラーパレットを作成します。
- 食事栄養管理アプリ：摂取カロリー記録、栄養バランス分析、食事写真記録、目標設定と進捗管理、レコメンド機能付き
- 贈り物管理アプリ：贈答履歴、予算管理、アイデアメモ、記念日リマインダー、お返し管理、好み記録機能
- 防災備蓄管理：備蓄品リスト、賞味期限管理、必要数計算、交換時期通知、避難経路マップ作成機能
- 車両メンテナンス記録：点検・整備履歴、燃費記録、部品交換時期予測、故障診断記録、保険期限管理機能
- スキルアップ記録：学習時間記録、目標設定、進捗グラフ、復習リマインダー、教材管理、モチベーション追跡
- 名言・アイデア収集：引用文保存、タグ付け、ソース管理、ランダム表示、inspiration board作成機能
- 医療記録管理：通院履歴、処方箋記録、症状日記、予約管理、服薬リマインダー、検査結果グラフ化機能
- 家族スケジュール共有：家族メンバー間の予定共有、買い物リスト連携、家事分担管理、位置情報共有、重要イベント通知機能
- 引っ越し準備アプリ：タスクリスト生成、進捗管理、業者見積比較、荷物リスト作成、スケジュール管理機能
- 睡眠質管理アプリ：就寝・起床時間記録、睡眠サイクル分析、環境音再生、睡眠スコア算出、改善アドバイス機能
- 経費申請管理システム：領収書のデジタル化、承認フロー管理、予算対比分析、部門別集計、税務関連書類自動生成機能
- 会議室予約システム：リアルタイム空き状況確認、定期予約設定、備品管理連携、会議記録保存、参加者自動通知機能
- 社内文書管理システム：バージョン管理、権限設定、全文検索、更新履歴追跡、テンプレート管理、自動バックアップ機能
- 勤怠管理アプリ：出退勤記録、残業申請、有給休暇管理、シフト作成、工数管理、給与計算連携、勤務実績レポート機能
- 営業案件管理システム：商談進捗管理、顧客情報連携、売上予測、活動履歴記録、商談報告書作成、目標達成度分析機能
- 社内備品管理システム：在庫状況把握、発注管理、修理履歴、使用者追跡、耐用年数管理、コスト分析機能
- プロジェクト工数管理：タスク別時間記録、進捗状況視覚化、リソース配分最適化、予実管理、収支分析機能
- 社内研修管理システム：研修材料管理、受講履歴追跡、テスト実施・採点、スキルマップ作成、資格管理機能
- 顧客対応記録システム：問い合わせ履歴、対応状況追跡、FAQ自動生成、満足度調査、リピート率分析機能
- 社内アンケートシステム：質問作成、回答集計、匿名設定、結果分析、レポート自動生成、傾向分析機能
- 業務マニュアル管理：手順書デジタル化、更新履歴管理、動画マニュアル連携、検索機能、アクセス権限管理機能
- 社内ナレッジベース：情報共有プラットフォーム、タグ付け、評価システム、関連文書リンク、更新通知機能
- 商品在庫管理システム：入出庫管理、発注点管理、バーコード連携、在庫予測、棚卸し支援、ロケーション管理機能
- 見積作成システム：商品マスタ連携、テンプレート管理、承認フロー、履歴管理、価格シミュレーション機能
- 契約書管理システム：テンプレート作成、更新警告、電子署名連携、履歴管理、期限管理、関連文書紐付け機能
- 社員スキル管理：保有スキル登録、評価履歴、育成計画、研修実績、資格情報、キャリアパス設計機能
- 稟議システム：申請フォーム作成、承認フロー設定、予算チェック、履歴管理、期限管理、差戻し対応機能
- 名刺管理システム：OCR取込、人脈マップ作成、商談履歴連携、重複チェック、タグ付け、営業支援機能
- 社内予算管理：予算申請、実績管理、部門別集計、予実分析、修正予算作成、アラート通知機能
- 採用管理システム：応募者情報管理、面接スケジュール調整、評価記録、採用フロー管理、統計分析機能
- 業績管理ダッシュボード：KPI追跡、データ可視化、目標管理、予測分析、アラート設定、レポート自動生成機能
- 社内問題報告システム：インシデント報告、対応状況管理、再発防止策記録、統計分析、改善提案管理機能
- 出張管理システム：旅費精算、行程管理、宿泊予約連携、経費予測、報告書作成、承認フロー管理機能
- 工事案件管理：進捗状況管理、写真記録、作業報告、原価管理、協力会社連携、納期管理機能
- 品質管理システム：検査記録、不具合管理、改善活動追跡、統計分析、報告書作成、認証管理機能
- 社内広報システム：お知らせ配信、既読管理、重要度設定、カテゴリ分類、アクセス解析、効果測定機能
- 業務改善提案システム：アイデア投稿、評価機能、実施状況追跡、効果測定、表彰制度連携、分析レポート機能
- 作業手順最適化：標準作業時間計測、ボトルネック分析、改善提案管理、効率化指標、作業動画連携機能
- 社内メンター管理：メンター・メンティーマッチング、面談記録、目標設定、進捗管理、評価フィードバック機能
- 与信管理システム：取引先評価、支払履歴管理、信用情報連携、与信限度額設定、アラート通知、リスク分析機能
（上記はChatGPT, ClaudeAI, Geminiで生成）
終わりに
急ぎ足でReaddy、Spec kit、Gemini CLI（Claude code、Codex）のAI開発環境を見てきましたが、いかがでしょうか？
プログラム開発におけるAIの現状と未来を感じてもらえたのではないかな？と思います。
色んなツールが簡単に試す事が出来て、最初のうちはある程度無料で試せるものも多いので、小さいプログラムをいくつも生成して動かしてみると、プログラミングの学習をするよりも、よっぽど勉強になるはずです。
本書をきっかけに、プログラミングに挑戦して一人でも多くの方が、人生を変えるきっかけにでもなれば、嬉しいかぎりです。