コーディングを始めるためのClaude Code＋VS Codeの環境構築の手順

コーディングをやってみたい。あるいは、毎日の反復作業を自動化したい。けれど、プログラミングはやったことがない。PSDDを始めてみたい。この記事は、そういう人が最初の一歩を踏み出すためのものです。

生成AIの発展で、コードを書く作業は自然言語でもできるようになりました。「こういうツールが欲しい」と日本語で伝えれば、AIがコードを書き、動かすところまで手伝ってくれます。その生成AIの一つが「Claude Code」です。この記事の最後には、Claude Codeに日本語で指示を出せる状態になります。契約から、エディタとの接続まで、順に進めていきます。

ゴールイメージ

手順に入る前に、この記事のゴールを先に見せます。下の画面が、セットアップを終えた状態です。入力欄が表示され、ここに日本語で指示を打ち込めるようになっています。この画面にたどり着けば完成です。

セットアップ完了後の入力欄

この環境ができると、たとえば次のような作業を自分の手で片づけられるようになります。これまで「詳しい人に頼む」か「手作業で耐える」かのどちらかだった作業を、自分で処理できるようになります。

まずは、この環境を作るところまでを目指します。

準備する2つのもの

準備するものは多くありません。基本は次の2つだけです。順番に見ていきます。

• Claudeの有料プラン … Claude Codeを使うための契約
• VS Code … AIと一緒にコードを書くための、無料のエディタ

Claudeの有料プラン（Pro）

Claude Codeを使うには、有料プランが必要です。無料プランでは使えません。無料のClaudeチャットは使えますが、Claude Codeはそこに含まれていません。最初は、月額20ドルのProプランで始めます。これからバイブコーディングを覚えるなら、Proで十分です。

無料のエディタ、VS Code

VS Code（Visual Studio Code）は、Microsoftが無料で提供しているコードエディタです。コードを書くための、高機能なメモ帳のようなものとイメージしてください。WindowsでもMacでも使えます。Claude Codeは、このVS Codeの中に組み込んで使います。

この2つを用意し、つなぐところまでが、この記事のゴールです。次の章から、実際に手を動かしていきます。

Claudeの契約手順

それでは、Proプランを契約します。手順は3つのステップです。順に進めてください。

契約はこれで完了です。次は、コードを書くためのエディタ、VS Codeを用意します。

料金・仕様は2026年6月時点です。最新は公式の料金ページで確認してください。

VS CodeとClaude Codeの接続

ここからが、この記事の要です。無料のエディタVS Codeをインストールし、そこにClaude Codeを組み込んで、契約したアカウントとつなぎます。順に進めれば、完成イメージで見せた入力欄までたどり着きます。

VS Codeのインストール

まず、VS Codeをインストールします。公式サイトからインストーラーを入手し、画面の指示に従って進めるだけです。WindowsでもMacでも手順は同じです。

公式サイトから入手すれば最新版が入るので、バージョンは基本的に問題ありません。念のため確認したい場合は、メニューの「Help（ヘルプ）」→「About（バージョン情報）」で見られます。次に入れるClaude Codeの拡張機能には、VS Code 1.98.0以上が必要です。

バージョン情報の詳細

拡張機能の導入とサインイン

VS Codeが入ったら、Claude Codeの拡張機能を導入し、契約したアカウントでサインインします。これで両者がつながります。

セットアップ完了の確認

サインインが終わると、Claude Codeのパネルに入力欄が表示されます。冒頭の完成イメージで見せた、あの画面です。ここに指示を打ち込めるようになっていれば、セットアップは完了です。

指示を打ち込める入力欄

試しに、入力欄に日本語で何か話しかけてみてください。応答が返ってくれば、VS CodeとClaudeが正しくつながっている証拠です。この画面が出ていれば、この記事のゴールに到達しています。

これで、コーディングを始める環境が整いました。