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.tst"
というボタンを押してみてください。

あなたがv０に作成してもらったプログラムが同じかどうかはわかりませんが、このプログラムのソースコードの名前は、”counter.tsx”となっています。

tsxというのは実はJavaScriptの拡張子ではなく、TypeScriptの拡張子です。
TypeScriptは、マイクロソフトが提供する、JavaScriptを拡張したプログラム言語です。

JavaScriptは、小規模な開発を行うには素晴らしい言語で、当時としては最先端の機能（マニアックなので覚えなくてもいいですが、関数型プログラミングとか、クラスを作らずに少ないメモリでオブジェクト指向プログラミングを実現したり）を備えていて、いまだにWebプログラミングではJavaScriptが使われ続けています。

ところが大規模なシステムや大人数での開発には向いていません。
そこで登場したのが、TypeScriptです。

TypeScriptは、実際にWebで使われる時にはJavaScriptのプログラムコードに変換されます。

色々と難しい話が続きましたが、こういう事を覚えていくのが、環境を把握するという事なのです。

v0はフロントエンド開発ツール

v0というAI開発ツールは、Vercel社が開発したWeb画面作成用のフロントエンド生成ツールで、実はバックエンドのプログラムは生成してくれません。
Vercel社は、Reactをフロントエンドで使用する時によく使われる、Next.jsというバックエンドのフレームワークを提供している会社です。

バックエンドの開発者はバリバリのプログラマが多く、デザインに自信ない人も多いので、Next.jsで開発する時に、フロント部分（画面）をAIで美しいデザインで生成できるツールを提供しているのです。

エラー時の処理

サンプルプログラム程度であれば、エラーが出る事はほとんどありませんが、もしエラーが発生した場合は、v０にエラーの修正もしてもらいましょう！

プロンプト：「エラーが発生しました。修正してください。」

エラーメッセージが出力されている時は、そのエラーメッセージをプロンプトに貼り付けるといいでしょう。

実行時の画面が不正であれば、画面ハードコピーをv0に渡してエラーを修正する事も出来ます。

画面UIの生成

次は画面部品が複数並んだ画面を作成してみましょう。
本書では、グラフィックツールで作成した、画面仕様書用の画像を使いますが、似たような画面のハードコピーや、インターネット上の画像でも構いません。（趣味でプログラム作るだけならいいですが、公開する場合はロゴや画像などの著作は真似しないでください！）

画像が用意できたら、クリップマークから画像をアップロードして、
「この画像を判断して画面を生成してください」
と実行してみましょう。

少し複雑なものだと、エラーが発生するかも知れません。
動作も期待したものと微妙に違うかも知れません。
その場合は根気強く、v０にエラーを修正してもらいましょう。

本格的なプログラムの作成

それではいよいよ本格的なプログラムを作成してみましょう！
以下のプロンプトを入力してみてください。

プロンプト：「シンプルな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など、環境だけでも学習しておきたいプログラム言語はたくさんあります。

これら全ての言語を、ひとつづつ学習して、自分の環境で動かすとしたら、永遠とも言える時間を費やさないといけません。

これから来る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の操作方法（概要）

1. Cursorをインストールする。
2. 画面左上のアイコンの、Cursorの📑エクスプローラから、
ワークスペース（作業場所のディレクトリ）を決定する
3. アイコンの拡張機能を選択し、Clineを検索してインストールする。
4. 🤖マークが隠れているので、🤖（Cline）を選択する
5. API Providerで、LLMのAPIを設定する
6. ＋マーク（New Task)をクリックし、チャットを開始する

v0, Bolt, Replit Agentと違いClineは、あなたのPCに対してインストールや生成したファイルの保存を行うので、操作を実行していいか？と毎回確認してきます。

わずらわしいと思うかも知れませんが、その都度メッセージや生成ファイル等の、把握しておきたい環境を確認する事が出来ると、いいように考えましょう！

プロのプログラマーはそのタイミングで、例えばプログラム中の表示文字列が英語だったら、Cursor（AIエディタ）で選択して、日本語のメッセージに変更してください！など、都度修正をしながら生成していきます。

それが出来るようになったらもう、あなたはプロフェッショナルと言ってもいいでしょう！

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で生成）

終わりに

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

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

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

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

まとめ