ホーム

MacでVS CodeからClaude Codeを使う

MacにClaude Codeを入れたら、次は「ファイルを編集しながらClaudeと会話したい」という場面が増えます。Visual Studio Code (VS Code) を使えば、エディターとターミナルが1ウィンドウに収まり、片側でファイルを編集しつつ、もう片側でclaudeを操作できます。

キーコンセプト

• VS Code：Microsoft製の無料エディター。Macで動き、拡張機能も豊富
• 統合ターミナル：VS Code下部にあるターミナルパネル。ここでclaudeを実行
• エクスプローラーパネル：左側のファイルツリー。Claudeが作ったファイルも即座に表示されます

必要なもの

• MacにClaude Codeをインストール を完了
• VS Codeの基本 を完了
• 作業時間の目安：10〜15分

ステップ1：VS Codeを起動

• Finder を開き、アプリケーション に移動
• Visual Studio Code を見つけてダブルクリック
• 「Visual Studio Code はインターネットからダウンロードされたアプリケーションです」という警告が表示された場合は、開く をクリック
• Welcomeタブが開きます - このタブは閉じてもかまいません

ヒント: 後で簡単にアクセスできるように、Dock内のVS Codeを右クリックして オプション > Dockに追加 を選択してください。

ステップ2：作業用フォルダを作成

• Finder を開く
• 左サイドバーの 書類 をクリック
• メニューバーの ファイル をクリックし、次に 新規フォルダ をクリック
• フォルダに test_claude と名前を付ける

ステップ3：VS Codeでフォルダを開く

• VS Codeで、メニューバーの ファイル をクリックし、次に フォルダーを開く をクリック
• 書類 に移動し、作成した test_claude フォルダを選択
• 開く をクリック
• 「このフォルダー内のファイルの作成者を信頼しますか?」と表示された場合は、はい、作成者を信頼します をクリック

左側のエクスプローラーパネルに TEST_CLAUDE が表示されます。

ステップ4：Claude Codeを起動

• 新しいターミナルを開く：メニューバーの ターミナル をクリックし、次に 新しいターミナル をクリック
• VS Codeの下部にターミナルパネルが表示されます
• ターミナルで、次のように入力：

  claude
  

• Claude Codeが起動します - おなじみのClaude Codeインターフェースが表示されます
• これで、VS Codeでファイルを編集しながらClaude Codeを使用する準備が整いました

ステップ5：ワークフローをテスト

• Claude Codeで、次のように入力：

  LLMがMarkdown形式を好む理由を説明する短い記事を書き、article.mdとして保存してください。
  

• Claude Codeがファイルを作成します - 左側のエクスプローラーパネルに article.md が表示されます
• エクスプローラーで article.md をクリックすると、エディターで表示されます
• 整形された記事をプレビューするには：article.md タブを右クリックし、プレビューを開く を選択
• 適切な見出し、箇条書き、フォーマットでレンダリングされたMarkdownが表示されます

後でVS CodeでClaudeを再度開く

VS Codeを閉じた後、プロジェクトに戻る方法は次のとおりです：

• 方法A: VS Codeを開き、ファイル > 最近使用したファイルを開く をクリックし、test_claude を選択
• 方法B: ターミナルを開き、cd ~/Documents/test_claude でプロジェクトに移動し、code . と入力

VS Codeは最近使用したフォルダを記憶しているため、通常は「最近使用したファイルを開く」を使用する方法Aが最も早いです。

次のステップ

• Claude Codeに既存のコードベースの説明を依頼：「このプロジェクトが何をするのか説明してください」
• Claude Codeに新しい機能の作成を依頼：「リストの平均を計算する関数を追加してください」
• Claude Codeを使用してバグを修正：「このコードがエラーを出します。修正してもらえますか？」
• Claude Code VS Code拡張機能を試して、インライン差分を含む視覚的なインターフェースを使用（拡張機能で「Claude Code」を検索）

トラブルシューティング

• ターミナルに「zsh」と表示されるが、Claude Codeが起動しない - Claude Codeが正しくインストールされているか確認してください。claude --version を実行して確認します
• ターミナルで「code」コマンドが見つからない - VS Codeで、メニューバーの 表示 をクリックし、次に コマンドパレット をクリックして、「shell command」と入力し、Shell Command: Install ‘code’ command in PATH を選択します
• VS Codeが不明な開発者からのものとして開けない - システム設定 > プライバシーとセキュリティ に移動し、このまま開く をクリックします

ワークフローの概要

• VS Code はビジュアルエディターインターフェースを提供します
• 統合ターミナル はVS Code内でClaude Codeを実行します
• ファイルは書類フォルダ（または選択した場所）に保存されます
• エディターでファイルを編集し、ターミナルでClaude Codeとチャット - 両方の長所を活用できます

Steven Ge 作成（2025年12月10日）