中島聡が実演する、コードを一行も書かないClaude Codeでの開発

開発環境:エディタ、ブラウザ、3つのターミナル

画面にはエディタのCursorとブラウザが並んでいる。普段はCursorを大きいスクリーンに、ブラウザを接続したMacBook Proの画面に出すが、撮影のため同じ画面に表示している。中島によれば、もうCursorである必要はなく、Microsoftの開発環境だけでも十分だという。Cursorは惰性で使い続けているだけで、コーディングの大半はClaudeに任せている。

開発対象のMulmoChatは、AIチャットからさまざまな操作ができるアプリだ。中島はこれを、将来のLLMを中心にしたOSのユーザーインターフェースを設計する意味合いも持つものだと説明している。

ターミナルは常に3つ動かしている。1つ目でサーバーを立ち上げ、ブラウザからアクセスする。サーバー側を書き換えない限り、このターミナルは閉じずに置いておく。2つ目はGitの操作用で、3つ目でClaudeを走らせる。

2:28

まずブランチを切り、対象ファイルを読ませる

作業を始めるときは、最初にブランチを切る。今回はセットアップ関係の変更なので、mainからコピーした「setup change」という名前のブランチを作り、そこでClaudeを起動した。

ClaudeのMDファイルにはさまざまな指示が書いてある。それでも中島は、効率を上げるため、最初に変更してほしいファイルを読むよう依頼する。今回はメインビューなどのファイルを指定して読み込ませ、準備を整えてから具体的な作業に入った。

3:48

変更1:セットアップボタンをサイドバーへ移す

最初の作業は、メイン画面にあるセットアップボタンをサイドバーに移すことだった。中島によれば、こうした作業は人間がやると意外に面倒だ。基本はコードを動かしてカット&ペーストするだけだが、意外と間違えることが多いという。

Claudeはまずサイドバーに追加する部分を示し、続けてメイン側からボタンを消す変更を提案してきた。中島は確認画面で1番を選んで承認した。2番を選んで以降を自動化することはしないと話している。Claudeはシステムプロンプトもサイドバーからアクセスできるようにし、設定用のポップアップのコード自体もアプリ側からサイドバー側へ移した。変更の途中ではエラー表示も出たが、完了後にエラーを消し、ボタンがサイドバーで動き、メイン画面からは消えていることを確認した。

UIの変更については、コードをそれほど真剣には見ないと中島は言う。ざっとは見るが大騒ぎする話ではなく、動かなければ分かるからだ。

ここで一度コミットする。細かくコミットしておけば、何かおかしくなったときにすぐ戻れる。中島は自分でコードを書いていたときも細かくコミットしていたという。続いて「チャットに接続していないときだけボタンを表示したい」と指示した。Claudeはチャットがアクティブでないときだけ表示する実装にし、接続するとボタンが消え、停止すると再び現れることを確認して、これもコミットした。

9:53

変更2:ユーザーのネイティブ言語を設定可能にする

次は、セットアップ画面でユーザーのネイティブ言語を設定できるようにする作業だ。中島は「日本語は外さないように、10個の言語を設定して」と指示した。英語が入るのは当然なので、日本語だけは漏れないよう念を押した形だ。数はあとで直すのが楽なので、まずは10個で作らせた。Claudeは英語、中国語、ヒンディー語、スペイン語、フランス語などを選んだ。

中島が感心したのは保存方法だ。頼んでいないのに、Claudeは選んだ言語をローカルストレージに保存する実装にしていた。既存のセットアップ画面がシステムプロンプトをローカルストレージに保存していたので、そこから類推して言語も同じように保存すべきだと判断したのだろう、と中島は見ている。中国語を選んでリロードしても設定が残り、意図どおり動いていることを確認した。

「AIは人間の仕事を奪うか」という問いへの見方

この場面を受けて、中島はAIがエンジニアの仕事を奪うかという議論に触れた。どのレベルのエンジニアの仕事を奪うかを考えると、今のように言われなくても保存処理まで実装する点は評価できる。新卒や大学を出たばかりでもこれくらい書ける人はいるが、書けない人もいるからだ。中島は、確認を求めてくるのでもよかったと付け加えている。

この程度の簡単な変更なら、今はほとんどコードレビューをしないとも話した。ざっとは見るが、セキュリティの問題が出るような話でも、技術的に難しい話でもないので、そのまま進めるという。

変更3:システムプロンプトの編集機能を外す

言語を設定できるようになったので、ユーザーがシステムプロンプトを書き換える必要はなくなった。中島はシステムプロンプトを固定にし、変更用のUIを外すよう指示した。言わなくてもやってくれそうだと思いつつ、システムプロンプトをローカルストレージに保存する仕組みも不要なので外してよいと伝えた。

中島によれば、これ自体は大したことのない作業だ。それでも手でやると手間がかかり、細かいところを間違えて差し戻しになることもある。それを考えると、生産効率は中島から見て「爆上がり」だという。

コードレビューのタイミングにも触れた。途中でしっかり見たいときは変更の差分を確認するが、最後にプルリクエストを作るときにまとめて全部見られる。どの段階でレビューするかは、変更の複雑さによる。

変更4:システムプロンプトに言語を付け加える

続いて、モデルに渡すシステムプロンプトの末尾に、ユーザーが選んだネイティブ言語を付け加えるよう依頼した。Claudeは、システムプロンプトの後ろに「User language is ...」という形で言語を付ける実装をし、ここまでは予定どおりだった。

「本当の意味で優秀な技術者」とは言えない部分

ただし問題が一つあった。Claudeは「getNativeLanguage」という関数をアプリのビュー側に作った。その結果、セットアップ側にも似たコードがあり、言語の一覧が2か所に並ぶことになった。中島はこれが気に食わないという。言語を増やすたびに両方を変えなければならないからだ。中島はこれを、AIが「本当の意味の優秀な技術者とは言えない部分」だと指摘した。

中島はいったんコミットしてから、「リストが2つあるのは気に食わないから整理しろ」と指示した。Claudeは言語設定用のファイルを新しく作り、言語の一覧と、言語を言語コードに変換する処理をそこにまとめた。中島はこの結果を「なかなかいい」と評価している。

それでも中島は、本当に優秀なエンジニアなら最初から言語のリストを2か所に置くような無駄はしないと言う。そうすると必ず後で苦労し、結局直さなければならなくなるからだ。まず動くものを作り、あとでまとめるやり方でもよいが、今のAIはそうした整理を能動的にはなかなかやらない。だから人間が見てあげる必要がある、というのが中島の見方だ。

中島の結論は、今の段階のAIは「ジュニアエンジニア」だというものだ。こうした点には気が利かないが、やるべきことを教えれば仕事はしっかりこなす。

24:09

実際に言語を切り替えて動作を確認する

Claudeが整理作業をしている間に、中島は動作を試した。ネイティブ言語を中国語にして接続すると、アシスタントは中国語で話し始めた。英語に切り替えたあと日本語に戻して「こんにちは」と話しかけると、日本語で応答が返ってきた。

整理の変更が出てくると、中島は重複していたリストの片方が消え、各所が新しいファイルをインポートして使っていることをざっと確認した。このスピードでしっかりレビューするのは難しいが、動きは良いので信用して進めると話している。

リロード後にもう一度試した。ドイツ語を選ぼうとしたが、Claudeが選んだ10言語にドイツ語は入っていなかった。中島は「ドイツの人に失礼」とこぼしつつフランス語で試し、最後に日本語に戻した。アシスタントは「今日はどんなことを一緒に勉強してみたいですか?」と応答し、一連の変更が動くことを確認した。

28:16

「一行もコードを書かない」が、バイブコーディングではない

中島は最後に、今回の作業を振り返った。この30分で、中島は一度もコードを書いていない。細かく指示を出して仕事をさせ、提案をざっと見て、気になればコードレビューやリファクタリングをする。多くの場合はそのままプルリクエストを投げ、場合によってはそのままマージし、ときには軽くコードを見てからマージする。

中島は、これはいわゆるバイブコーディングとはかなり違うと強調する。コードの中身を気にしているし、指示も細かく出すからだ。そのうえで、もはや自分ではコードを書いていない。必要に応じて書くこともあるが、今回のようなUIの変更や仕組みの変更程度なら、自然言語で指示を出し、コードを見ながら進められる。

今回ダメ出しをしたのは、言語リストの重複を直させた1回だけだった。ただし、Claudeの書いたコードが受け入れられないこともある。その場合は「それじゃダメだ」とやり直させるし、大きく変更させた後にやはり気に入らず、直前のコミットまで戻すこともあるという。

中島は、指示の細かさは今後AIが優秀になれば粗くなるかもしれないと見ている。今は比較的細かく指示を出しているが、その代わりに自分で書くよりずっと生産効率が高い。これが最近の中島のコーディングスタイルだと締めくくった。