記事一覧

【Windows・初心者向け】VS CodeのインストールからClaude Codeを使い始めるまで

プログラミング未経験でもできる、Windows版VS CodeのインストールからClaude Code拡張機能の導入、サインイン、最初の依頼までの手順をまとめました。必要なプランや、つまずきやすい点も紹介します。

ダウンロードや拡張機能などを象徴する部品を収めた導入用の道具箱

はじめに

このブログの構築や記事の投稿は、AI「Claude Code」に手伝ってもらっています。

Claude Codeは、パソコンの中のファイルを読んだり、作業を進めたりできるAIです。黒い画面(ターミナル)で使う方法もありますが、初心者には VS Code(ブイエスコード)というアプリの中で使う方法 がおすすめです。チャットのような画面で、AIとやり取りしながら作業できます。

この記事では、Windowsのパソコンで、VS CodeのインストールからClaude Codeに最初の依頼をするまでをまとめます。

用意するもの

図解:Claude Codeを使い始めるまでの5ステップ
  • Windowsのパソコン
  • Claudeの有料プランのアカウント(Pro、Max、Team、Enterpriseのいずれか)
    • 公式ドキュメントでは、有料のClaudeサブスクリプションか、Claude Consoleのアカウントが必要とされています
    • 私はProプランで使っています
  • インターネット接続

APIキー(開発者向けの鍵)は不要です。いつものClaudeのアカウントでサインインできます。

手順1:VS Codeをインストールする

VS Codeは、Microsoftが無料で配布しているアプリです。

  1. 公式サイト(https://code.visualstudio.com/ )を開く
  2. Windows版をダウンロードする
  3. ダウンロードしたインストーラー(VSCodeUserSetup-バージョン.exe)を実行し、画面の案内に沿って進める

ポイント: Windows版には「User setup」と「System setup」の2種類があります。公式では、多くの人に User setup が推奨されています。管理者権限がいらず、自動更新もスムーズです。

また、Claude Codeの拡張機能を使うには、VS Code 1.94.0以降 が必要です。新しくインストールすれば、この条件は満たされています。

画面を日本語にしたい場合

VS Codeは、最初は英語の画面で起動します。日本語にしたい場合は、次の手順で切り替えます。

  1. 左側のメニューから「拡張機能」(四角が4つ並んだアイコン)を開く
  2. Japanese Language Pack を検索してインストールする
  3. 案内に沿ってVS Codeを再起動する

手順2:Claude Codeの拡張機能を入れる

  1. VS Codeで Ctrl + Shift + X を押し、拡張機能の画面を開く
  2. 検索欄に Claude Code と入力する
  3. 提供元が Anthropic のものを選び、「Install(インストール)」を押す

入れたのに表示されない場合: VS Codeを再起動するか、Ctrl + Shift + P で開く入力欄に「Developer: Reload Window」と入力して実行します。

手順3:Claude Codeを開いてサインインする

Claude Codeは、火花(スパーク)のようなアイコン で表示されます。開き方は次のとおりです。

  • 左端のアイコンが並ぶ列(アクティビティバー)の、スパークのアイコンをクリックする
  • ファイルを開いているときは、編集画面の右上にもスパークのアイコンが出る
  • Ctrl + Shift + P で「Claude Code」と入力し、「Open in New Tab」などを選ぶ

初めて開くと、サインインの画面が出ます。

  1. 「Sign in」を押す
  2. ブラウザが開くので、Claudeのアカウントでログインして許可する
  3. VS Codeに戻ると、Claude Codeが使える状態になっている

サインイン直後には、使い方を案内するチェックリストが表示されます。順番に試すか、×で閉じても大丈夫です。

手順4:作業用のフォルダーを開く

Claude Codeは、VS Codeで開いているフォルダー を作業場所にします。

  1. 作業用のフォルダーを作る(例:ドキュメントの中に「AI作業」など)
  2. VS Codeの「ファイル」→「フォルダーを開く」で、そのフォルダーを選ぶ

最初は、大事なファイルが入っていない新しいフォルダーで試すと安心です。

手順5:最初の依頼をしてみる

空の吹き出しに小さなカードを入れ、最初の依頼を表すイラスト

Claude Codeの入力欄に、日本語で普通に話しかけます。たとえば次のような依頼です。

  • 「このフォルダーに、今日のやることリストのファイルを作って」
  • 「このフォルダーには何が入っているか教えて」

ファイルを作ったり変更したりするときは、内容が表示され、確認を求められることがあります。内容を見て、問題なければ許可します。

使ってみて分かったこと

図解:導入後につまずきやすいところ

必要に応じて、ほかのソフトも入れることになる

Claude Code自体は、拡張機能を入れるだけで動きました。ただ、作業の内容によっては、ほかのソフトが必要になります。

私の場合、ブログを作る作業で Node.js(プログラムを動かすソフト)と Git(ファイルの変更履歴を管理するソフト)が必要になりました。このときは、Claude Codeが必要性を説明し、私が許可したうえでインストールしてもらいました。

Windowsの安全設定で止まることがある

PowerShell(Windowsのターミナル)で pnpm というコマンドを使おうとしたとき、「スクリプトの実行が無効になっている」というエラーが出ました。このときは、pnpm の代わりに pnpm.cmd と入力することで、設定を変えずに動かせました。

迷ったら、そのままClaude Codeに聞く

エラーが出たら、その画面のメッセージやスクリーンショットをClaude Codeに渡すと、原因と対処法を説明してくれます。私はこのやり方で、ブログの開設までたどり着きました。

まとめ

  1. VS Codeをインストールする(User setupがおすすめ)
  2. 拡張機能「Claude Code」を入れる
  3. スパークのアイコンから開き、Claudeのアカウントでサインインする
  4. 作業用のフォルダーを開く
  5. 日本語で依頼する

Claudeの有料プランがあれば、APIキーなどの難しい設定なしで始められます。まずは新しいフォルダーで、小さな依頼から試してみてください。

関連記事:

参考:

次に読む:Claude Code の準備ができたら、AIと一緒にブログを作ってみましょう → Cloudflare×EmDashで無料ブログを開設する手順

コメント

まだコメントはありません