「Claude Codeを使うならVS Codeがいいって聞いたけど、そもそもVS Codeって何？」「プログラマー向けのソフトを、自分が使いこなせる気がしない……」
エンジニアではない方にとって、VS Codeは少し身構えてしまう存在かもしれません。
でも安心してください。ブログ運営でVS Codeを使う目的は、Claude Codeにチャット感覚で指示を出すためです。プログラミングの知識は必要ありません。この記事では、VS Codeのインストールから、Claude Codeを動かすところまでを1本で解説します。
- VS Codeをインストールして、日本語で使えるようになる
- VS CodeにClaude Codeの拡張機能を入れて、最初の指示を出せるようになる
- うまく動かないときに確認すべきポイントが分かる
VS Codeの画面って、なんだか難しそうなボタンがいっぱい並んでいるイメージがあるんですよね……。
分かります。でも、ブログ運営で使う機能はほんの一部だけなんです。私はMacとWindowsの両方で導入したことがありますが、最低限の操作さえ押さえれば大丈夫でした。順番に進めていきましょう。
- 国立大学卒のサラリーマン
- 新卒でJTCに入社するも、新入社員研修中にFIREを決意。副業ブログを始めるが、収益が伸びず挫折。いつしかブログは放置。
- Claude codeと出会い、放置していたブログを久々に動かしてみると、できることの多さに驚く。収益も面白いほど増加。
- Claude codeで副業ブログを動かすノウハウを発信することで、さらに良い使い方が見えてくるのではないかと思い、本ブログを開始。
VS Codeとは・必要な理由
VS Code（Visual Studio Code）は、Microsoft社が無料で提供しているソフトです。本来はプログラムを書くための「エディター」と呼ばれるソフトですが、拡張機能を追加することで、さまざまな用途に使えます。
Claude Codeは、もともと「ターミナル」と呼ばれる黒い画面で動かすツールです。ただ、コマンドを打ち込む黒い画面は、非エンジニアにとってハードルが高いですよね。そこで役立つのが、VS CodeのClaude Code拡張機能です。
- チャットのような画面で指示を出せる：入力欄に日本語で書いて送るだけ
- Claude Code本体のインストールが不要：拡張機能にClaude Codeが同梱されているので、黒い画面での作業なしで使い始められる
- 作ったファイルをその場で確認できる：Claude Codeが書いた記事のファイルを、同じ画面で開いて読める
つまりVS Codeは、Claude Codeを非エンジニアでも扱いやすくしてくれる「作業机」のような存在です。
VS Codeのインストール手順
VS Codeは、公式サイト（code.visualstudio.com）から無料でダウンロードできます。似た名前の別ソフト「Visual Studio」と間違えないように注意してください。
Macの場合
- 公式サイトからMac用のファイル（.dmg）をダウンロードする
- ダウンロードしたファイルを開く
- 表示された「Visual Studio Code」のアイコンを、「アプリケーション」フォルダにドラッグする
- 「アプリケーション」フォルダからVS Codeをダブルクリックして起動する
よく使うことになるので、起動したらDockのアイコンを右クリック（Controlキーを押しながらクリック）して、「オプション」→「Dockに追加」を選んでおくと便利です。
Windowsの場合
- 公式サイトからWindows用のインストーラーをダウンロードする
- ダウンロードしたファイル（VSCodeUserSetupから始まる名前）をダブルクリックする
- 利用規約に同意し、画面の案内に沿って「次へ」を進めてインストールする
- インストールが終わったら、VS Codeを起動する
Windows版には「User setup」と「System setup」の2種類がありますが、公式に推奨されているのはUser setupです。管理者権限がなくてもインストールでき、アップデートもスムーズに行われます。
VS Codeの日本語化設定
VS Codeは最初は英語で表示されます。画面の説明を読みやすくするために、先に日本語化しておきましょう。
パソコンの言語設定が日本語になっていれば、VS Codeを起動したときに、日本語の言語パックをインストールするよう画面右下に案内が出ることがあります。その場合は案内に従ってインストールし、再起動すれば完了です。
案内が出なかった場合は、次の手順で設定します。
- 画面左端にある、四角が組み合わさった形のアイコン（Extensions＝拡張機能）をクリックする
- 検索欄に「Japanese Language Pack」と入力し、Microsoft社が提供しているものをインストールする
- 表示される案内に従ってVS Codeを再起動する
再起動しても英語のままの場合は、Macなら「Command＋Shift＋P」、Windowsなら「Ctrl＋Shift＋P」を押して、表示された入力欄に「Configure Display Language」と入力し、「日本語」を選んでください。
VS Codeの画面の基本構成
日本語化できたら、画面の見方を確認しておきましょう。ブログ運営で意識するのは、次の5つのエリアだけで十分です。
| エリア | 場所 | ブログ運営での使い方 |
|---|---|---|
| アクティビティバー | 画面の左端に並ぶアイコン | ファイル一覧、拡張機能、Claude Codeなどを切り替える |
| サイドバー（エクスプローラー） | アクティビティバーの右隣 | 作業フォルダの中のファイル一覧を見る |
| エディター | 画面の中央 | Claude Codeが作った記事のファイルを開いて読む |
| Claude Codeのパネル | 拡張機能を入れると表示される | Claude Codeに指示を出し、返事を読む |
| ステータスバー | 画面の一番下 | 現在の状態を確認する（普段はあまり気にしなくてOK） |
ほかにもたくさんのボタンやメニューがありますが、最初は気にしなくて大丈夫です。分からないボタンがあれば、それこそClaude Codeに「VS Codeのこのボタンは何？」と聞いてしまいましょう。
VS CodeにClaude Code拡張機能を入れる手順
いよいよ、Claude Codeの拡張機能を入れます。
- 画面左端の拡張機能アイコンをクリックする（Macは「Command＋Shift＋X」、Windowsは「Ctrl＋Shift＋X」でも開けます）
- 検索欄に「Claude Code」と入力する
- 提供元が「Anthropic」になっている「Claude Code」を選び、「インストール」をクリックする
名前の似た拡張機能もあるので、提供元がAnthropic社であることを必ず確認してください。インストール後に表示が変わらない場合は、VS Codeを再起動しましょう。
なお、拡張機能を使うには、VS Codeのバージョンが1.94.0以上であることと、Claudeの有料プラン（ProやMaxなど）への加入が必要です。有料プランの契約については、Claude Codeのインストール方法と使い方の記事で解説しています。
VS CodeでClaude Codeを動かしてみる
拡張機能が入ったら、実際にClaude Codeを動かしてみましょう。
1. ブログ用の作業フォルダを開く
まず、デスクトップなど分かりやすい場所に、ブログ用のフォルダ（たとえば「blog」）を作ります。VS Codeのメニューから「ファイル」→「フォルダーを開く」を選び、そのフォルダを開きましょう。Claude Codeは、ここで開いたフォルダの中で作業します。
フォルダを開いたときに「このフォルダ内のファイルの作成者を信頼しますか？」と聞かれたら、自分で作ったフォルダなので「信頼する」を選びます。信頼しない（制限モード）のままだと、Claude Codeの拡張機能が動きません。
2. Claude Codeのパネルを開いてサインインする
画面左端のアクティビティバーに、Claude Codeのアイコン（Claudeのロゴのような形のマーク）が追加されています。これをクリックするとClaude Codeのパネルが開きます。ファイルを開いているときは、エディターの右上にも同じアイコンが表示されます。
初めて開くとサインイン画面が表示されるので、「Sign in」をクリックします。ブラウザが開くので、Claudeのアカウントでログインして連携を許可すれば完了です。
3. 最初の指示を出してみる
パネル下部の入力欄に、日本語で指示を書いて送ってみましょう。最初は、こんな簡単なお願いで十分です。
- 「このフォルダに、ブログのメモ用のファイルを作って」
- 「副業ブログのテーマ案を5つ考えて、ファイルにまとめて」
Claude Codeがファイルを作ると、左側のファイル一覧に表示されます。クリックすればエディターで中身を読めます。「チャットで頼んだことが、本当にファイルとして出来上がる」という体験を、まずはしてみてください。
4. 作業の許可の出し方を知っておく
Claude Codeは、ファイルを書き換えるときなどに「この操作をしてもいいですか？」と確認を求めてくることがあります。内容を読んで、問題なければ許可、違うと思えば拒否したり、どうしてほしいかを伝えたりします。
どこまで確認を求めてくるかは、入力欄の下にあるモードの表示から切り替えられます。モードの違いと、安全に使うための考え方は、Claude Codeのインストール方法と使い方の記事で詳しく解説しています。
VS Codeでうまく動かないとき
つまずいたときは、次のポイントを確認してみてください。
| 困っていること | 確認すること |
|---|---|
| 拡張機能がインストールできない | VS Codeのバージョンが1.94.0以上か（Macは「Code」メニュー、Windowsは「ヘルプ」メニューのバージョン情報で確認） |
| Claude Codeのアイコンが見当たらない | ファイルを1つ開いてみる／VS Codeを再起動する／フォルダを「信頼する」にしているか |
| サインインできない | Claudeの有料プランに加入しているアカウントでログインしているか |
| 指示を送っても返事がない | インターネットにつながっているか／新しい会話を始めて試す |
| 動きがおかしい | ほかのAI系の拡張機能を一時的に無効にしてみる |
VS Codeの再起動は、「Command＋Shift＋P」（Windowsは「Ctrl＋Shift＋P」）で入力欄を出し、「Reload Window」と入力して選ぶのが手軽です。
最初は「VS Codeのような画面に慣れる」こと自体に時間がかかる方が多いです。焦らなくて大丈夫。毎日少しずつ触っていれば、自然と手になじんできますよ。
VS Codeの使い方、まとめ
この記事では、VS Codeのインストールから、Claude Codeを動かすところまでを解説しました。ポイントを振り返っておきます。
- VS Codeは、Claude Codeにチャット感覚で指示を出すための無料の作業画面
- インストールしたら、最初に日本語化しておくと迷わない
- 拡張機能「Claude Code」（提供元Anthropic）を入れれば、Claude Code本体の別途インストールは不要
- ブログ用フォルダを開き、サインインすれば、日本語で指示を出せる
次は、Claude Codeの有料プランや、日本語での使い方、作業の許可の考え方など、使い始める前に知っておきたい設定を確認していきましょう。
このカテゴリ（ロードマップ・準備編）の記事一覧は、準備編のまとめ記事で紹介しています。
