今回、バイブコーディングのお題として、実例を交えてClaudeCodeの使い方について解説しようと思うのですが、 何か聞きたい事はありますか?

ClaudeCodeが向いているタスクというのは、どちらかというとデザインの部分というよりもバックエンド寄りの部分ですよね。バックエンドと言ってもピンとこない人もいると思うのですが、エンジニアリングの業界では、お客さんが見るブラウザで動く部分というのはフロントエンド、そして、その後ろ、ブラウザからデータが飛んでって、サーバーで動くところをバックエンドって言います。ClaudeCodeはどちらかというと、バックエンドが強いと感じます。逆に、ちょっとしたCSSの操作とか、見た目のところは、具体的に指示しても思うように動いてくれなかったりします。ですので、強みで言うとバックエンドのところかなと思います。

今回なんですけれども、百聞は一見にしかず、という事で、私のほうで、あるお題に対してClaudeCodeを使ってバイブコーディングをしました。そちらの動画も撮ってあるので 見て頂こうと思います。今回作ったのはランニングページです。

そうですね、まずは、その動画を見て頂くと良いかと思います。 ここでは、もう少しClaudeCodeについてお話ししたいと思います。ClaudeCodeっていうのは、他のバイブコーディングツールと比較して何が違うかというと、他のツールはエディターとかで動いてたんですよね。エディターの中で動いて、手でコーディングされたものを補完するような感じで使われてたんですけども、このClaudeCodeは、「コマンドプロンプト」などのインターフェース（パソコンに対して直接指示を出す画面）から指示を出して、コードの全体像から書いてくれます。

今回、本当は一つのシステムが作られる過程、すべてを見て貰いたかったんですけれども、その中で先ほど話したようにランディングページの作り方について公開しました。ただ、やはり本当のバイブコーディングの「面白さ」というか癖というか、そういったのはもっと複雑なシステムを作るときに見えてきます。実例で言うと、AIに作って貰ったものが、修正が必要になった時に「ここを修正してください」って伝えると、普通、人間だったら間違ったところを直しますよね。でも、ClaudeCodeは、間違ったところを残した上で、新しいコードを書いたりします。なので、ちょっとめんどくさいですが、修正を依頼する時は、「今回のところはこういうふうに直してください。直した後、使わなくなった部分は削除してください」と、より具体的に指示を出さないと、どんどん不要なコードが増える傾向にあります。

そうですね、AIの特性を理解するのは大切です。私はAIに指示を出す時、まず最初に「実装はまだしないで」って言ってます。「まだ実装はしないで。こういうことをやりたいんだけど、実装できそう？」って伝えるようにしています。なんでそういう伝え方をするかというと、「こういうことをやりたいんだけど、実装できそう？」だけだと、ClaudeCodeは、実装できそうと思ったら、確認せずにコードを書いちゃうんですね。それで、「できました！」って、コードを沢山書いてから、報告してきます。そのコードを想定通りのものなら良いのですが、違う場合、コードを元に戻すのがとても大変です。

そうですね、バイブコーディングは、すごく便利ですが、一度でも、思うようなコードを書いて貰えなかった場合は、元に戻すのがすごく大変です。例えば、AIに書いて貰ったコードを、同じAIに「元に戻してください」って言っても、元に戻してくれなかったりします。特に、いきなり長いコードを書いてもらった時。例えば1000行くらい書いてもらった後に、「やっぱり元に戻してください」って言うと、「はい！戻しました！」とAIが言ってても完璧には戻してくれないです。後からエラーが出て、「あれ？あの時に戻してくれたんじゃなかった？」みたいな感じで聞くと「ごめんなさい！まだ完全に戻せていませんでした」みたいな感じで返ってきます。なので、バイブコーディングで重要なのは、AIを一人歩きさせないこと。必ずこまめに「できそうですか？」「やれそうですか？」「 どういうふうにやるんですか？」と確認することが大切ですね。

これも、また別の機会に詳しく解説しますが、ClaudeCodeの良いところは、ただコードを書くだけじゃなくて、そのコードをローカル環境でどうやったら実行できるのか。更には、オンライン環境でどうやったら実行できるのか？っていうところまで教えてくれます。例えば、私は、オンライン環境だとHerokuというサービスを使っているのですが、やはりローカル環境とオンライン環境では、デプロイの仕方が違います。その時に、CloudeCodeは「Herokuでは、まず、このコマンドを打って、次に、このコマンドを打って…」と、具体的に教えてくれるのは、凄く助かります。

これまでプログラミングに興味があったけど、なかなか一歩踏み出せなかった人でもバイブコーディングを使うことで、これまで貯めてきたアイディアを形にできるのですごくいい時代だなと思いますし、私がプログラミングを始めた時に、もし、バイブコーディングがあったら、もっと効率よく勉強できて、無駄な時間を過ごさずに済んだなと思っています。