もう戻れない！VSCode × Claude Code × GitHubの環境を0から作った話

皆さんこんにちは、ライブチューブスターの屈辱です。

先日、自分のパソコンにVSCodeとClaude Codeを入れて、さらにGitHubと連携させるという「開発環境の全セット化」をやってみました。正直、こんなに簡単に「AIと対話しながらコードを書ける環境」が作れるなんて、数年前には考えられなかったです。今日はその体験を、ハマったポイントも含めて記事にしてみました。

① VSCodeにClaude Codeを入れたかった理由

僕は普段、パソコン自作だとかAI活用が好きで、いろいろな新しい技術に手を出すタイプです。ただ、VSCodeはこれまで「見たことはあるけど、ちゃんと使ったことがない」という状態でした。でも、仕事でもVSCodeを使う可能性が出てきたし、何より「Claudeに指示を出すだけで、AIがコード書いてくれる環境」を作りたいという気持ちが強くなってきたんです。

そこで思い立ったのが、「VSCode + Claude Code + GitHub」の組み合わせです。これなら、ローカルで開発しながら、バージョン管理もできて、スキルアップにもなるだろうと。

② 実際の会話ログ

「実際にどんな感じでClaudeと話してるの？」と思う方もいるかもしれません。僕はVSCodeのターミナルでclaudeと打つだけで、Claudeとやり取りします。以下は実際の会話ログの抜粋です。音声入力そのままなので若干ざっくりしていますが、こんな感じで十分通じます。

③ VSCode × Claude Code で何ができるようになったか

会話ログを見てもらうとわかると思いますが、ターミナルでclaudeと打つだけで、AIと対話しながらコードが書けるようになります。エラーが出たら「これ何？」って聞くと、原因と解決策を教えてくれる。ファイルを編集してほしいときは「README.mdに日本語で説明を追記して」と言うと、Claudeが差分を提示して、それを承認するだけで反映される。

つまり、開発の流れが「考える → AIに指示 → 承認 → 完了」という、シンプルなループになったんです。自分でコマンド打つたびに、細かいエラーハンドリングをしなくていい。Claudeが「あ、これはこの設定が必要ですね」って先読みして対応してくれる。

④ GitHub連携で「開発ぽい」流れが完成

VSCode + Claude Codeの組み合わせだけでも強力ですが、ここにGitHubが加わると、本当の開発環境っぽくなります。

流れはこんな感じです：

1. ローカルでファイルを編集（Claude Codeが手伝う）
2. 編集内容をコミット（Claude Codeに「コミットして」と言うだけ）
3. GitHubにプッシュ（これもClaudeが自動でやってくれる）
4. GitHubでコミット履歴を確認

最初、ソース管理パネルのコミットメッセージ欄が見つからなくて困りました。画面が狭くて隠れちゃってたんです。でも、Claudeに「コミットしてpushして」と日本語で頼んだら、マジで全部やってくれた。その瞬間、「あ、これからのコード開発、こんなに簡単になるんだ」って実感しました。

Git 2.53.0をインストールして、git config --globalでユーザー名とメールアドレスを設定。VSCodeのアカウントアイコンからGitHubにサインイン。GitHubでリポジトリを作成してクローン。これで環境が完成です。

まとめ

VSCode + Claude Code + GitHubの組み合わせは、パソコンやAI活用が好きな人間にとって、本当に「一騎当千の武器」になりました。数年前なら、開発環境を作るのに、書籍を読んだり、ネット検索したり、それでも詰まることがたくさんありました。いまは、わからないことがあったら「Claude、これなんですか？」って聞くだけで、原因と解決策が返ってくる。

さらに、AI自体がコードを書いてくれるので、自分は「どうしたいか」という要件を伝えるだけ。実装の細かい部分はAIに任せる。これって、本当に生産性が上がります。

もし、あなたもVSCodeやAI活用に興味があるなら、同じ環境を作ってみてください。最初は「PowerShellの実行ポリシーって何？」「コミットメッセージ欄ってどこ？」みたいなハマりポイントがあるかもしれません。でも、それもClaudeに聞けば大丈夫。この記事が参考になったら、Xでシェアしてもらえると嬉しいです。