Claude CodeとLiveプレビューを連携する方法

【結論】解決策 / 実行コマンド

ライブコーディングでは、Claude Codeの公式IDE拡張、差分表示、ローカル開発サーバー、Chrome連携を組み合わせると変更を即座に確認できます。

永続プロセスは別ターミナルで動かす方法が分かりやすい一方、Claude Codeがバックグラウンド実行できる環境もあります。

デモ前にGitブランチ、秘密情報の非表示、通知の停止、停止条件を準備します。

# ターミナル1で実行：開発サーバーを起動
npm run dev
# ターミナル2で実行：Claude Codeを起動
claude
# 起動後のセッション内で実行：Chrome連携を確認
/chrome
# ターミナルで実行：変更差分を確認
git diff --stat

具体的な手順・設定方法

1. デモ専用ブランチと小さな課題を準備します。

2. Claudeへ一度に一つの変更を依頼し、差分とブラウザ表示を都度確認します。

3. 公開画面ではAPIキー、顧客情報、個人通知、内部URLを隠します。

実践プロンプト / 活用テクニック

# 起動後のセッション内で入力
App.jsxのカウンターだけを変更してください。
最初に変更箇所を説明し、承認後に1ステップずつ実装してください。
各ステップ後にテスト結果とブラウザで確認すべき点を1行で報告してください。
Git操作とパッケージ追加は行わないでください。

注意点・よくあるエラーと対処法

未保存ファイルをIDEとClaude Codeで同時編集すると競合します。

画面共有中に環境変数、認証画面、GitリモートURLを表示しないでください。

ライブデモで本番デプロイや強制Pushを実行しないでください。