生成AIによるコード生成ツールはだいぶ進化しており、
ユーザ要件を入力するとJavaScript/TypeScriptコードにしてくれる
サービスが登場し始めた。
特に、bolt.newはOSS(MITライセンス)があり
ローカルPCで動作するとのこと。
ただ生成AIモデルは外部のサービスAnthropic社のclaude-sonetを使うので
あらかじめ10ドルほど入れAPIキーを取得しておく必要がある。
Windowsでのインストール手順としては、以下の通り。
1 nvm-windowsのインストール
https://github.com/coreybutler/nvm-windows/releases からダウンロードして
nvm-setup.exeを実行する。
2 node 20.15.1 環境にする
nvm install 20.15.1
nvm use 20.15.1
node -v を実行してバージョンを確認
3 pnpm のインストール
npm install pnpm
pnpm -v を実行してバージョンを確認（9.4.0以降）
4 リポジトリのclone
適当なディレクトリで以下のコマンドを実行
git clone https://github.com/stackblitz/bolt.new.git
cd bolt.new
pnpm install
.env.local ファイルを新規作成して以下の行を記述
ANTHROPIC_API_KEY=xxxxxxxxx
VITE_LOG_LEVEL=debug
5 開発サーバ起動
pnpm run dev --host
ブラウザからhttp://localhost:5173/ を開く。
----
画面は英語だが、Claudeなので日本語でも動作する。
別のPCからだと以下のメッセージが出て、server設定を修正しないといけなさそうだったので、ローカルPC上にnodeをインストールして動かすのがてっとりばやい。
Failed to execute 'postMessage' on 'Worker': SharedArrayBuffer transfer requires self.crossOriginIsolated.
ただ..なかなかいいプロンプトが与えられない..
議事録アプリをつくってもらったら、画面は出たものの、OpenAIのキーがないと動かないコードをだしてきた。Claudeなのに..
１行くらいの短いプロンプトで
「Claudeで動作するようにして」
とか
「XXというエラーが出ました。修正して。」
を何度も繰り返していく。
まだうまく動作していないが、多分こんな感じでペアプログラミング..というより一方的にああでもないこおでもない..しながらつくっていくのが正解なんだろう。
がっつりユースケース記述みたいなものを入れるとピクリとも動かないものができたりする。
生成されるコードがWebAssemblyベース、つまりブラウザ上で動くコンテナで動作するので、TypeScript/JavaScriptコードしか対応してない。そういった制約をふまえて指示していかないとだめだ。
今後はGitHub Sparkもでてきそうだし、プログラマはデバッガ＆テスターになっていく運命なのだろうか..
「チーズはどこへ行った」じゃないけど、あたらしいチーズを探しに行く時期かなあ..
