VSCの拡張機能に追加された Claude Code を使って、バイブスだけで最高にチルなアプリをバイブコーディングする
1. Visual Studio Code の拡張機能に Claude Code が追加
Visual Studio Code（VSC） に Anthropic から Claude Code の拡張機能が追加されました！👏👏
VSC 上で使えることで、プロジェクト構造全体を把握した提案をしてくれたり、リアルタイムなインライン補完ができたり、とより快適なバイブコーディングができるようになりました。
※インライン補完：コードを書く途中に、エディタ上で AI や IDE がその場で次に書くべきコードを提案してくれる機能
💡Claude Code の特徴💡
選択肢から選んでいきタスクを進める、というのがClaude Code の操作の特徴として挙げられます。
ということで、バイブスだけでチルなアプリ（？）をつくってみたいと思います！😎
2. インストール方法 ※Windows OS ユーザーは少し面倒
インストール方法はちょっとした手順があります。というのも拡張機能のインストールだけでなく、Claude Code 自体をインストールする必要があります。
同じことが VSC でインストールした際に色々書いてありますので、一度読むことをおすすめします。
Claude Code のインストールは簡単
ただし、記事執筆時点（2025年6月）では、 Claude Code は macOS もしくは Linux OS に対応しているため、Windows の場合は、WSL（Windows Subsystem for Linux）上にインストールする必要があります。
WSL を有効にする方法については末尾に参考記事を載せているのでそちらを参考にしてください。
Claude Code のインストールの様子
先ほどのコードで Claude Code がインストールされるとターミナル上にはこのようなメッセージが表示されます。
ここでターミナルでアカウント認証を行います。Anthropic のコンソールに遷移し、「こちらを Claude Code に貼り付けてください、という指示があります」
【Windows の場合】VSC ではWSL（Ubuntu）上に Claude Code を立ち上げます。
左下を見ると、"Ubuntu-22.04”で稼働していますね。
VSC で Ubuntu を使う方法については末尾に参考記事を載せているのでそちらを参考にしてください。
拡張機能がインストールされて Claude Code が使えるようになると VSC の右上に Claude のアイコンが出てきます。こちらを押すと Claude が立ち上がります。
試しに何かやり取りしてみましょう。
日本語対応しているみたいです。
3. 制作
ではさっそくチルなアプリをつくっていきましょう。チルって「落ち着く」みたいな意味なんでしょうかね。
こんな指示出されたら嫌ですね…。
さっそく ToDo を洗いだしてくれました。先ほどの指示から要件定義とデザインをやってくれたみたいです。
コーディングはこんな感じ。
第一弾完成
機能を整理してくれました。
ここから二度ほどバイブスによる修正を加えていきます。
一回目の修正
もう少しいけてる感じにしたいので、それっぽい指示をだしてみました。
ドープってよくわかりませんが、進めてくれてます。
第二弾完成
できました。機能が拡張されたのと配色が暗めになりました。
二回目の修正
もうちょっと突き抜けてほしかったので編集を頼みました。バイブスの語彙がなくてよくわからない日本語になりましたが、要件定義してくれました。
第三弾完成
だんだん怖い感じになってきました。
5. まとめ
Claude Code for VSCode を使って技術用語を使わずに WEB アプリを作成しました！
最終的にはちょっと怖い感じのアプリになりましたが、要件定義をおこない、ToDo を出してプロジェクトを進めてくれる辺りは、開発に必要な知識がない方でも学びながら実装ができそうだと感じました。動的なビジュアルエフェクトができるのは単純に楽しかったです！
Claude Code for VSCode についてはスタートするまでが少し大変な印象でした。まだ Cluade や Claude Code または WSL を使用したことがない方は参考記事を載せていますので、是非活用してください😉
