Claude Code for VS Code を使ってAIチャットだけでアプリを作る方法
バイブコーディング（Vibe Coding）、皆さんしてますか？🤟
私はちょっとはコードがわかるので、わからないところだけを ChatGTP や Claude code に聞いてコードをコピペしたりしてました。
しかし、今やそんなのもやらない時代らしいんです！
本当にチャットだけでアプリを作ることができるのか、テストしてみました。
expand_more
事前準備
VS code を起動する
言うても環境は必要です。
VS code を事前にインストールしておきましょう。
拡張機能「Claude Code for VS Code」をインストール
左側のメニューから「拡張機能」を選択し、「Claud code」で検索します。
一番上の拡張機能をクリックすると説明文などが表示されます。
「インストール」をクリックしましょう。
「発行元の”Anthropic”を信頼しますか？」というダイアログが表示されます。
Anthropic は Claud Code を開発している会社なので信頼しましょう。
偽物の会社ではないか、必ずダイアログの内容を確認してから「発行元を信頼してインストール」をクリックします。
プロジェクトフォルダを開く
インストールが完了したら、プロジェクトフォルダを開きましょう。
何も入ってない空のフォルダを開けばOK。
チャットで指示を出してみよう
プロジェクトフォルダを開くと右下にチャットボックス欄が出現します！
ここにテキストを打ち込んで指示を出しましょう。
特に作りたいものがないので、「Reactを使ったブラウザ上で動くToDoアプリを作って」と指示出してみました。すると、勝手に動き出しました！
たまに許可を求めてくるので、「許可」ボタン押したりしつつ放置します。
時間がかかってたので、待ちきれずに「終わったの？」と聞いてますね笑（私はせっかちです・・・）
localhost開いてみろ！さて、どんなToDoリスト作る？っと聞かれたので、さらに細かく説明します。
また勝手に動き出します。
終わったよと言われたので、試しにlocalhostを開いてみました。
シンプルイズベストって感じですね🤣
さらに機能を追加します。
ボードにしてドラッグ&ドロップで各ステータスに移動できるようにします。
途中、色やレイアウトを変更依頼かけました。
Claud Code が自分で自分と対話しながら「何かおかしいです」とか言ってるのが可愛いです🫶
AI とのチャットだけでできた成果物
ドラッグ&ドロップでカードを移動できるToDo管理アプリができました👏
機能的にはいい感じのものができましたが、UIを細かく指定するのに言葉にするのがしんどいです。私の語彙力がないだけなんですけど・・・。
ここは自分でいじったほうが早いかもしれません。
でも今回はチャットだけでやりたい・・・ということでけっこう細かい指示を何度も出す羽目になりました。
ってことで指示出してたらあっという間に無料の制限に達してしまいました💦
最終的にはここまでできました〜！私のスキルだけではこれを作れないです笑
結論：チャット「だけ」では無理！😇（使い手の問題）
意外とUI調整の方が面倒くさくて、「何て説明したらいいか」と考えるより自分でいじっちゃった方が早いです。
AIが自問自答しながらエラーチェックなどはしてくれるのですが、編集画面で保存できてなかったりするので、テストをAI任せにするのは難しいかも。（そこ一番やってほしいところなんですけどね・・・）
まだなんちゃってフロントエンドエンジニアにも需要がありそうで安心する私でした😮💨
0件のコメント
コメントはまだありません。最初の一人になりましょう！