AI駆動プログラム開発、一気入門

AI駆動プログラム開発、一気入門

AI Driven Development

このドキュメントは、全てMarkdown AIで作成しました。2024.11.18
<div Align="right">作成：Markdown AI ファウンダー兼アーキテクト coke_kouichi</div>

AI駆動開発とは？

AI時代がやってきた！

あの大変だったプログラミング作業を、AIが勝手にやってくれるという、とんでもない時代がやってきました。

そこで、本書ではVercel社のv０、Stackblitz社のBolt、Replit社のReplit Agent、Anysphere社のCursor+Clineの5つのツールを用いて、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に作成してもらいましょう。

そしてそのプログラムが指示した通り動く事を確認してから、一つづつ機能を追加していきましょう。

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はフロントエンド開発ツール

<p style="color: red">注意：2024.11.22 v0はバックエンドもNext.jsのコードを生成出来るフルスタック（フロントもバックも両方の意味）開発ツールにバージョンアップしました。</p>

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版開発ツールです。

<p style="color: red">注意：Boltはブラウザに特別な環境を構築するので、スマホやタブレットでは動作が安定していません！PCでの使用をお勧めします</p>

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です。

<p style="color: red">注意：Replit Agentは現在プレリリース版で、有料課金ユーザーしかその機能を試せません！</p>

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で作成可能なプログラム言語の一覧

1. Python：汎用プログラミング言語。読みやすい文法と豊富なライブラリが特徴
2. HTML, CSS, JS：ウェブ開発の基本三要素。HTMLは構造、CSSはデザイン、JSは動的機能を担当
3. Node.js：サーバーサイドでJavaScriptを実行する環境
4. C++：高性能な汎用プログラミング言語。システムプログラミングによく使用
5. C：最も基本的なプログラミング言語の一つ。OSやシステムプログラミングに使用
6. Java：オブジェクト指向プログラミング言語。企業システムでよく使用
7. C#：Microsoftが開発した汎用プログラミング言語。.NET環境で使用
8. Bash：UNIXシェル環境でのスクリプト言語
9. PHP：ウェブ開発向けサーバーサイドスクリプト言語
10. WebServer：ウェブページやアプリケーションを提供するサーバーソフトウェア
11. Blank Repl：プログラミング学習プラットフォームの一つ
12. React：Facebookが開発したJavaScriptライブラリ。UIコンポーネントの構築に使用
13. Javascript：ウェブブラウザで動作する動的なプログラミング言語
14. HTML, CSS, JS(Auto Refre：自動更新機能付きのウェブ開発環境
15. TypeScript：JavaScriptに型システムを追加した言語
16. SQLite：軽量なリレーショナルデータベース
17. Swift：Apple社が開発したiOSアプリ開発用言語
18. Go：Googleが開発した高性能な言語。並行処理が得意
19. Ruby：読みやすさを重視した動的プログラミング言語
20. Lua：軽量で組み込み用途に適したスクリプト言語
21. Flask：Pythonの軽量ウェブフレームワーク
22. PHP CLI：コマンドライン上で動作するPHP実行環境
23. Haskell：純粋関数型プログラミング言語
24. Dart：Googleが開発したウェブとモバイルアプリ開発用言語
25. QBasic：初心者向けの古典的なBASICプログラミング言語
26. R：統計解析や機械学習に特化した言語
27. Kotlin：JVM上で動作する現代的な言語。Android開発でよく使用
28. Python Data Science：データ分析や機械学習用のPython環境
29. Visual Basic：Microsoftが開発した初心者向けプログラミング言語
30. Clojure：JVM上で動作する現代的な関数型プログラミング言語
31. JavaFX：Javaのデスクトップアプリケーション用GUIフレームワーク
32. Scala：JVM上で動作する関数型とオブジェクト指向を組み合わせた言語
33. Mono C#：クロスプラットフォームで動作するC#実装
34. CoffeeScript：JavaScriptにシンプルな文法を提供する言語
35. C++ CMake Project：C++のビルドシステムを使用したプロジェクト
36. Pascal：教育用途でよく使われる構造化プログラミング言語
37. PHP(PDO SQLite)：SQLiteデータベースに接続するPHP環境
38. Julia：科学技術計算向けの高性能言語
39. Python HTTP Server：Pythonで実装された簡易ウェブサーバー
40. C CMake Project：C言語のビルドシステムを使用したプロジェクト
41. Markdown：テキストを整形するための軽量マークアップ言語
42. CIE PseudoCode：教育用の疑似コード記述言語
43. Deno：モダンなJavaScript/TypeScriptランタイム環境
44. Elixir：Erlang VM上で動作する関数型プログラミング言語
45. Scheme：Lispの方言の一つ。教育用途でよく使用
46. Basic：初心者向けの古典的なプログラミング言語
47. BrainF：極めてミニマルな難解プログラミング言語
48. PowerShell：Windowsのシステム管理用スクリプト言語
49. Verilog：ハードウェア記述言語
50. F#：Microsoftが開発した関数型プログラミング言語
51. Express.js：Node.js用の人気のあるウェブフレームワーク
52. Octave-Nix：科学技術計算向けのプログラミング環境
53. LOLCODE：ユーモアを含んだエソテリックプログラミング言語
54. PyPl Package Template：Python パッケージ作成用テンプレート
55. Erlang：並行処理に強い関数型プログラミング言語
56. Fortran(95)：科学技術計算向けのプログラミング言語
57. Python(PyEnchant)：スペルチェック機能を含むPython環境
58. Common Lisp：Lispファミリーの主要な方言の一つ
59. OCaml：関数型プログラミング言語
60. Harvard CS50：ハーバード大学のプログラミング入門コース
61. Perl：テキスト処理に強い汎用スクリプト言語
62. Bun：高速なJavaScript/TypeScriptランタイム
63. Tcl：シンプルな構文を持つスクリプト言語
64. LaTex：高品質な文書作成システム
65. Blockly：ビジュアルプログラミング言語を作成するためのライブラリ
66. Typescript PyScript：Pythonをウェブブラウザで実行するためのフレームワーク
67. COBOL：ビジネス向けの古典的なプログラミング言語
68. APL：配列処理に特化した言語
69. Raku：Perl 6から改名された現代的なプログラミング言語
70. Crystal：Rubyライクな文法を持つ静的型付け言語
71. Nim：効率的で表現力豊かなシステムプログラミング言語
72. Slidity starter：プレゼンテーション作成フレームワーク
73. Forth：スタックベースのプログラミング言語
74. Emotion：CSSインJSライブラリ
75. Roy：JavaScriptにコンパイルされる関数型言語
76. JBang-Java：Java用の軽量実行環境
77. Bloop：ビルドサーバー
78. Cython Template：PythonとCを組み合わせたテンプレート
79. Basil：ウェブアプリケーションフレームワーク
80. Sinatra：Rubyの軽量ウェブフレームワーク
81. Paper.js：キャンバスベースのグラフィックスライブラリ
82. Awk：テキスト処理に特化したUnixツール
83. Haxe：複数のプラットフォームにコンパイル可能なプログラミング言語
84. Phaser.js + Socket.io：ゲーム開発とリアルタイム通信のためのJavaScriptライブラリ
85. OCaml Script：OCamlをスクリプト言語として使用する環境
86. Elm：Web フロントエンド開発のための関数型プログラミング言語
87. Pyramid：Pythonのウェブフレームワーク
88. Inform：インタラクティブフィクション作成用言語
89. J：APLの後継となる配列処理言語
90. 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エディタです。

<p style="color: red">注意：CursorはWebサービスではなく、PCで動作するアプリケーションです！</p>

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)をクリックし、チャットを開始する

v0, Bolt, Replit Agentと違い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で生成）

作成してみたいサンプルアプリの一覧

天気予報アプリ：特定の地域の天気情報を表示します。
2. チャットアプリ：リアルタイムでユーザー間のメッセージ交換ができます。
3. メモ帳アプリ：テキストの作成、編集、保存が可能なシンプルなメモツール。
4. ブログプラットフォーム：ユーザーが記事を投稿・編集・公開できます。
5. 画像ギャラリー：画像のアップロード、表示、アルバム作成ができます。
6. レシピ共有アプリ：料理のレシピを投稿し、他のユーザーと共有できます。
7. カレンダーアプリ：イベントや予定を管理し、リマインダーを設定できます。
8. タスクタイマー：ポモドーロテクニックなどの時間管理をサポートします。
9. ショッピングリスト：買い物リストを作成し、チェックリスト形式で管理できます。
10. ニュースフィードアプリ：最新のニュース記事やRSSフィードを表示します。
11. 掲示板（フォーラム）：トピックごとにディスカッションが可能な掲示板。
12. クイズアプリ：選択式や記述式のクイズを出題し、スコアを表示します。
13. 投票システム：アンケートや投票を作成し、結果を集計・表示します。
14. プロジェクト管理ツール：タスクの割り当てや進捗状況の追跡ができます。
15. ポートフォリオサイト：自分の作品やプロジェクトを紹介するサイト。
16. オンラインノート共有アプリ：ノートをオンラインで作成・共有できます。
17. 音楽プレイヤー：音楽ファイルの再生やプレイリストの作成ができます。
18. 動画ストリーミングアプリ：動画のアップロード、再生、コメントが可能。
19. 地図アプリ：地図情報の表示やルート検索ができます。
20. 翻訳ツール：テキストを他の言語に翻訳します。
21. パスワードマネージャー：安全にパスワードを生成・保存します。
22. チャットボット：自動応答するボットとの会話ができます。
23. オンライン投票システム：リアルタイムで投票を受け付け、結果を表示します。
24. ファイル共有アプリ：ユーザー間でファイルのアップロード・ダウンロードが可能。
25. タスク管理アプリ：タスクの作成、編集、完了状況の管理ができます。
26. ストックトラッカー：株価や仮想通貨の価格をリアルタイムで追跡します。
27. リアルタイムチャートアプリ：データのリアルタイムなグラフ表示ができます。
28. Eコマースサイト：商品の一覧表示、カート機能、購入手続きが可能。
29. カレンダー予約システム：予約の受付と管理ができます。
30. オンラインゲーム（シンプルなもの）：例えば、テトリスやパズルゲームなど。1. 天気予報アプリ：特定の地域の天気情報を表示します。
31. 個人財務管理アプリ：収入や支出を記録し、予算を管理できます。
32. 習慣トラッカー：毎日の習慣や目標の達成状況を記録します。
33. フィットネストラッカー：運動や食事の記録、健康目標の追跡ができます。
34. レシピ検索アプリ：食材を入力して作れる料理のレシピを検索できます。
35. 語学学習アプリ：単語やフレーズの学習、クイズでの練習が可能。
36. ブックレビューサイト：読んだ本のレビューや評価を共有できます。
37. イベントプランナー：イベントの作成、招待、参加者の管理ができます。
38. ソーシャルメディアプラットフォーム：投稿やコメント、友達との交流が可能。
39. URL短縮サービス：長いURLを短く変換します。
40. 求人掲示板：求人情報の投稿・検索ができます。
41. アンケート作成アプリ：質問を作成し、回答を収集・分析できます。
42. オンラインコードエディタ：ブラウザ上でコードの編集・実行が可能。
43. QRコードジェネレーター：テキストやURLからQRコードを生成します。
44. ミームジェネレーター：画像にテキストを追加してミームを作成できます。
45. 旅行プランナー：旅行のスケジュールや行程を計画できます。
46. 割り勘計算アプリ：友人との費用を公平に分配します。
47. デジタルホワイトボード：リアルタイムで共同編集が可能なボード。
48. 学習管理システム（LMS）：コース、課題、成績の管理ができます。
49. 匿名フィードバックアプリ：匿名で意見やフィードバックを収集します。
50. ファッションコーディネーターアプリ：今日のファッションを提案します。
51. Markdown対応ノートアプリ：Markdown形式でノートを作成・編集できます。
52. オンライン写真編集ツール：基本的な画像編集がブラウザ上で可能。
53. 音楽推薦アプリ：好みに応じた音楽を推薦します。
54. フラッシュカードアプリ：暗記用のフラッシュカードを作成・学習できます。
55. タスク自動化アプリ：定型的な作業を自動化します。
56. 株式ポートフォリオトラッカー：投資の状況を追跡できます。
57. オンライン調査作成ツール：調査を作成し、データを収集します。
58. ムードトラッカー：日々の気分や感情を記録します。
59. コミュニティWiki：共同で知識ベースを構築できます。
60. カラーパレットジェネレーター：デザイン用のカラーパレットを作成します。
61. 食事栄養管理アプリ：摂取カロリー記録、栄養バランス分析、食事写真記録、目標設定と進捗管理、レコメンド機能付き
62. 贈り物管理アプリ：贈答履歴、予算管理、アイデアメモ、記念日リマインダー、お返し管理、好み記録機能
63. 防災備蓄管理：備蓄品リスト、賞味期限管理、必要数計算、交換時期通知、避難経路マップ作成機能
64. 車両メンテナンス記録：点検・整備履歴、燃費記録、部品交換時期予測、故障診断記録、保険期限管理機能
65. スキルアップ記録：学習時間記録、目標設定、進捗グラフ、復習リマインダー、教材管理、モチベーション追跡
66. 名言・アイデア収集：引用文保存、タグ付け、ソース管理、ランダム表示、inspiration board作成機能
67. 医療記録管理：通院履歴、処方箋記録、症状日記、予約管理、服薬リマインダー、検査結果グラフ化機能
68. 家族スケジュール共有：家族メンバー間の予定共有、買い物リスト連携、家事分担管理、位置情報共有、重要イベント通知機能
69. 引っ越し準備アプリ：タスクリスト生成、進捗管理、業者見積比較、荷物リスト作成、スケジュール管理機能
70. 睡眠質管理アプリ：就寝・起床時間記録、睡眠サイクル分析、環境音再生、睡眠スコア算出、改善アドバイス機能
71. 経費申請管理システム：領収書のデジタル化、承認フロー管理、予算対比分析、部門別集計、税務関連書類自動生成機能
72. 会議室予約システム：リアルタイム空き状況確認、定期予約設定、備品管理連携、会議記録保存、参加者自動通知機能
73. 社内文書管理システム：バージョン管理、権限設定、全文検索、更新履歴追跡、テンプレート管理、自動バックアップ機能
74. 勤怠管理アプリ：出退勤記録、残業申請、有給休暇管理、シフト作成、工数管理、給与計算連携、勤務実績レポート機能
75. 営業案件管理システム：商談進捗管理、顧客情報連携、売上予測、活動履歴記録、商談報告書作成、目標達成度分析機能
76. 社内備品管理システム：在庫状況把握、発注管理、修理履歴、使用者追跡、耐用年数管理、コスト分析機能
77. プロジェクト工数管理：タスク別時間記録、進捗状況視覚化、リソース配分最適化、予実管理、収支分析機能
78. 社内研修管理システム：研修材料管理、受講履歴追跡、テスト実施・採点、スキルマップ作成、資格管理機能
79. 顧客対応記録システム：問い合わせ履歴、対応状況追跡、FAQ自動生成、満足度調査、リピート率分析機能
80. 社内アンケートシステム：質問作成、回答集計、匿名設定、結果分析、レポート自動生成、傾向分析機能
81. 業務マニュアル管理：手順書デジタル化、更新履歴管理、動画マニュアル連携、検索機能、アクセス権限管理機能
82. 社内ナレッジベース：情報共有プラットフォーム、タグ付け、評価システム、関連文書リンク、更新通知機能
83. 商品在庫管理システム：入出庫管理、発注点管理、バーコード連携、在庫予測、棚卸し支援、ロケーション管理機能
84. 見積作成システム：商品マスタ連携、テンプレート管理、承認フロー、履歴管理、価格シミュレーション機能
85. 契約書管理システム：テンプレート作成、更新警告、電子署名連携、履歴管理、期限管理、関連文書紐付け機能
86. 社員スキル管理：保有スキル登録、評価履歴、育成計画、研修実績、資格情報、キャリアパス設計機能
87. 稟議システム：申請フォーム作成、承認フロー設定、予算チェック、履歴管理、期限管理、差戻し対応機能
88. 名刺管理システム：OCR取込、人脈マップ作成、商談履歴連携、重複チェック、タグ付け、営業支援機能
89. 社内予算管理：予算申請、実績管理、部門別集計、予実分析、修正予算作成、アラート通知機能
90. 採用管理システム：応募者情報管理、面接スケジュール調整、評価記録、採用フロー管理、統計分析機能
91. 業績管理ダッシュボード：KPI追跡、データ可視化、目標管理、予測分析、アラート設定、レポート自動生成機能
92. 社内問題報告システム：インシデント報告、対応状況管理、再発防止策記録、統計分析、改善提案管理機能
93. 出張管理システム：旅費精算、行程管理、宿泊予約連携、経費予測、報告書作成、承認フロー管理機能
94. 工事案件管理：進捗状況管理、写真記録、作業報告、原価管理、協力会社連携、納期管理機能
95. 品質管理システム：検査記録、不具合管理、改善活動追跡、統計分析、報告書作成、認証管理機能
96. 社内広報システム：お知らせ配信、既読管理、重要度設定、カテゴリ分類、アクセス解析、効果測定機能
97. 業務改善提案システム：アイデア投稿、評価機能、実施状況追跡、効果測定、表彰制度連携、分析レポート機能
98. 作業手順最適化：標準作業時間計測、ボトルネック分析、改善提案管理、効率化指標、作業動画連携機能
99. 社内メンター管理：メンター・メンティーマッチング、面談記録、目標設定、進捗管理、評価フィードバック機能
100. 与信管理システム：取引先評価、支払履歴管理、信用情報連携、与信限度額設定、アラート通知、リスク分析機能

（上記はChatGPT, ClaudeAI, Geminiで生成）

終わりに

急ぎ足でv0、Bolt、Replit、Cursor＋ClineのAI開発環境を見てきましたが、いかがでしょうか？

プログラム開発におけるAIの現状と未来を感じてもらえたのではないかな？と思います。

色んなツールが簡単に試す事が出来て、最初のうちはある程度無料で試せるものも多いので、小さいプログラムをいくつも生成して動かしてみると、プログラミングの学習をするよりも、よっぽど勉強になるはずです。

本書をきっかけに、プログラミングに挑戦して一人でも多くの方が、人生を変えるきっかけにでもなれば、嬉しいかぎりです。

まとめ