Vibe Coding 入門
1. 準備：VS Code 拡張機能の導入
- VS Code の拡張機能マーケットプレイスで 「Claude」（Anthropic公式）を検索してインストールします。
- サイドバーに表示される Claude アイコンをクリックし、Anthropic アカウントでログインします。
my-vibe-linksフォルダを VS Code で開き、Claude のチャットパネルを立ち上げます。
2. 最初の「Vibe」を伝える
チャットパネル、または VS Code 内のターミナル（claude コマンド起動中）で、以下のプロンプトを入力します。
プロンプト:
「自分専用のリンク集サイトを作りたい。モダンでミニマルなデザインにして。
links.jsonというファイルからデータを読み込んで表示するようにして。とりあえずindex.htmlと、サンプルデータを入れたlinks.jsonを作って。」
ここがポイント：
Claude 拡張機能がファイルを直接生成します。VS Code のエディタ上に新しいファイルが即座に現れるので、中身をすぐに確認できます。
3. ブラウザでの確認（自動実行）
次に、環境構築を丸投げします。
プロンプト:
「このサイトを今すぐブラウザで確認したい。ローカルサーバーを立てて。」
Claude は VS Code のターミナルを自動で操作し、python3 -m http.server などのコマンドを実行します。 起動後、VS Code 内で「ブラウザで開く」という通知が出るので、それをクリックするだけです。
4. VS Code を見ながら「ノリ」で修正する
エディタでコードを見ながら、さらに直感的な指示を重ねます。
- デザインの変更: 「背景を深夜の星空みたいなダークモードにして。カードにはネオンの光彩（Glow）をつけて。」
- 機能の追加: 「リンクを追加できる管理用のフォームも作れる？パスワードを知ってる人だけが使える感じで。」
- 整理（リファクタリング）: 「CSS を別ファイルに切り出して整理して。」
VS Code + Claude Code を使いこなす Vibe スキル
| スキル | 内容 |
|---|---|
| 丸投げデバッグ | ターミナルでエラーが出たら、そのログを Claude に読ませて修正を承認（Approve）するだけ。 |
| 一括リファクタリング | 「コードが散らかったから整理して」と頼めば、複数ファイルにまたがる修正を一瞬で完了します。 |
| 自然言語での git 操作 | 「GitHub Pages で公開する手順を実行して」と頼めば、git のコミットからプッシュまで代行します。 |
