AI活用マップAIと働くための設計図
なぜAI活用が必要かAI活用度チェックコラムお問い合わせ

トップVSCodeの導入方法

操作手順本文

VSCodeの導入方法

情報この手順でできるようになること

AIとファイルを共有しながら作業できる環境を、VSCode（無料のエディタ）に用意します。プログラミングの知識は不要です。ここまで進めれば、次回からはAIに「このフォルダの中身を見て」と頼むだけで、ファイルを直接読み書きしてもらえるようになります。所要時間は10分ほどです。

Step 1｜VSCodeをインストールする

  1. 公式サイトを開き、お使いのOS（Windows／Mac）に合わせてインストーラーをダウンロードします
  2. ダウンロードしたファイルを開き、案内に沿ってインストールします
  3. インストールが終わったらVSCodeを起動します。スタート画面が開けば完了です

ここまで5分ほどです。

Step 2｜作業フォルダを開く

VSCodeで「開いたフォルダ」が、AIの作業範囲になります。

  1. 書類フォルダなどに、作業用のフォルダを1つ作ります（名前は好みで構いません）
  2. VSCodeの左上メニューから「ファイル」→「フォルダーを開く」を選びます
  3. 先ほど作ったフォルダを選択します
スクリーンショット - VSCodeのフォルダーを開く

左パネルにフォルダの中身が表示されれば完了です。次回からは同じフォルダを開く、これだけ習慣にしてください。

いつものワークスペースを作っておく

ヒント💡 ワークスペースとフォルダの違い

「フォルダを開く」は、1つの場所だけを開く基本の使い方です。対して「ワークスペース」は、複数のフォルダをまとめて1つの単位として扱う仕組みです。まとめた内容は.code-workspaceという設定ファイルに保存され、関連するフォルダが複数に分かれている場合でも、次回からはそのファイルを開くだけで全部まとめて開けます。

複数のフォルダを一度に扱いたいときは、ワークスペースを使います。

  1. 左上メニューの「ファイル」→「ワークスペースにフォルダーを追加...」で、使いたいフォルダを追加します（複数回繰り返せば何個でも追加できます）
  2. 「ファイル」→「名前を付けてワークスペースを保存...」で保存します
  3. 次回からは、保存した.code-workspaceファイルを開くだけで、追加したフォルダ群が一度に開きます

Step 3｜拡張機能を入れる

ヒント💡 拡張機能とは

VSCode本体に、あとから機能を追加する仕組みです。 世界中の開発者が公開しており、便利な機能を持つものが無数にあります。ここで紹介するもの以外も、必要になれば自分で検索して追加できます。選ぶときの目安はインストール数です。数が多いほど多くの人に使われている実績があり、安心して使えます。

推奨の拡張機能

左パネルの、拡張機能アイコンから検索して、インストールと有効化します。

  • Claude Code for VSCode／Codex – OpenAI's coding agent（必須）：VSCodeの中でAIを動かす本体。ChatGPTやClaudeのサブスクプランでログインします
  • Japanese Language Pack for Visual Studio Code（必須）：画面表示を日本語化します
  • Office Viewer（推奨）：Microsoft Wordなどのファイルを閲覧できます
  • Marp for VSCode（任意）：Marp形式で作成されたスライドを閲覧できます

メニューを日本語表示させる

拡張機能「Japanese Language Pack for Visual Studio Code」をインストールしましょう。 英語表示のままでも操作はできますが、日本語にしておくと迷いにくくなります。

  1. 左端のアイコンの並びから、「拡張機能」アイコンをクリックします
  2. 検索欄に「Japanese」と入力します
  3. 出てきた「Japanese Language Pack for Visual Studio Code」の「Install」をクリック、「有効化」します
  4. 右下に表示される案内に従って再起動すると、画面が日本語になります
スクリーンショット - Japanese Language Pack（インストール済み）

インストール済みになると、ボタンが「アンインストール」表示に変わります。この状態になっていれば完了です。

Claude／Codexを使えるようにする

VSCodeの中で、サブスク契約中のAIを動かせる拡張機能です。

  1. 同じく「拡張機能」アイコンから検索します
  2. Claudeを使うなら「Claude Code for VSCode」、ChatGPTを使うなら「Codex – OpenAI's coding agent」を検索します（どちらか一方で十分です）
  3. 「Install」「有効化」をクリックします
スクリーンショット - Claude Code for VS Code（インストール済み）

こちらもインストール済みになると「アンインストール」表示に変わります。

  1. インストール後、Claudeアイコンをクリックすると、右側にClaudeのチャット欄が表示されます。
  2. 画面の指示に沿ってお使いのアカウント（Claude／ChatGPT）でログインします

画面の見方や日々の操作方法は、次の VSCodeの操作方法 をご覧ください。