宿主さんのためのVS Code入門｜フォルダを開いてCodex・Claude Codeを使う準備

宿主が作業フォルダを作り、VS Codeでフォルダ全体を開き、AI拡張機能を導入する3段階のイラスト AIサイト管理
2026.08.16

CodexやClaude Codeを使ったサイト管理の記事では、「VS Codeでフォルダを開く」という説明がよく登場します。しかし、普段ブラウザとWordPress管理画面だけを使っている方には、そもそもVS Codeやフォルダを開く意味が分からなくて当然です。

この記事では、まだサーバーへ接続しません。まず自分のパソコンに練習用フォルダを作り、VS Codeで開き、画面と拡張機能の仕組みを理解するところまで進みます。

VS Codeとは

Visual Studio Code（VS Code）は、Windows、macOS、Linuxで使える無料のエディターです。文章用のメモ帳と違い、フォルダ内の複数ファイルを一覧で見ながら編集し、変更点の確認やターミナル操作、拡張機能の追加ができます。

VS Codeを入れただけで、WordPressやサーバーが自動的に変更されることはありません。どのフォルダを開き、どの拡張機能へ何を許可するかは利用者が決めます。

「ファイル」ではなく「フォルダを開く」とは

一つのWordPressサイトを管理するとき、本文、画像、設定、作業ルールは複数のファイルに分かれます。それらをまとめて入れる箱がフォルダです。

宿サイト運用フォルダ
├── AGENTS.md       AIと共有する運用ルール
├── CLAUDE.md       Claude Code用の案内
├── articles        記事原稿を置くフォルダ
├── images          画像を置くフォルダ
└── notes           調査メモを置くフォルダ

VS Codeでこの一番外側のフォルダを開くと、左側の一覧から中のファイルを探せます。CodexやClaude Codeも、開いているフォルダを作業の単位として、関連ファイルやルールを理解しやすくなります。

ファイルを一つだけ開くと、同じサイトの別原稿やAGENTS.mdが作業範囲に入らない場合があります。「サイト全体を入れた箱を開く」と覚えてください。

1. VS Codeを公式サイトから入れる

  1. VS Code公式サイトを開く
  2. WindowsまたはmacOSなど、自分のパソコンに合う版を選ぶ
  3. ダウンロードしたインストーラーを開く
  4. 画面の案内に従ってインストールする
  5. VS Codeを起動する

検索広告や非公式のダウンロードサイトから入れず、URLがcode.visualstudio.comであることを確認します。

2. 練習用フォルダを作る

デスクトップや書類フォルダなど、自分が見つけられる場所へ新しいフォルダを一つ作ります。例として名前をinn-site-practiceにします。

最初から本番サイトのファイル、パスワード一覧、宿泊者名簿を入れないでください。練習用のメモだけを置きます。

3. VS Codeでフォルダ全体を開く

  1. VS Code上部の「ファイル」を選ぶ
  2. 「フォルダーを開く」を選ぶ
  3. 作成したinn-site-practiceフォルダを選ぶ
  4. 「開く」または「フォルダーの選択」を押す

左側にフォルダ名が表示されれば成功です。VS Codeでは、開いたフォルダを「ワークスペース」と呼ぶ場合があります。難しく考えず、「今回の作業に使う箱」という意味です。

「このフォルダを信頼しますか」と聞かれたら

VS CodeのWorkspace Trustは、そのフォルダに含まれるコードを実行してよいか判断する仕組みです。自分で作った空の練習フォルダなら内容を確認して信頼できます。インターネットから受け取ったフォルダは、制作者と中身を確認できるまで安易に信頼しません。

4. 最初に覚える画面は四つだけ

  • エクスプローラー：左側にあるファイルとフォルダの一覧
  • エディター：中央にあるファイルの内容を読む・書く場所
  • 拡張機能：左端の四角いアイコンから機能を追加する場所
  • ターミナル：コマンドを入力する場所。最初は勝手に貼り付けて実行しない

ほかの機能は必要になったときに覚えれば十分です。

5. 練習用ファイルを作る

エクスプローラーの「新しいファイル」からmemo.mdを作り、次のように入力して保存します。

# 宿サイト運用の練習

- 今回は本番サイトへ接続しない
- 削除や公開は行わない
- 分からない操作は実行前に確認する

.mdはMarkdown形式の文章ファイルです。普通の文章を保存でき、見出しや箇条書きも扱えます。

6. 拡張機能を探してインストールする

拡張機能はVS Codeへ機能を追加する小さなソフトです。

  1. 左端の「拡張機能」アイコンを選ぶ
  2. 検索欄へ拡張機能名を入力する
  3. 詳細画面で名前だけでなく発行元を確認する
  4. 説明、必要な権限、利用条件を読む
  5. 目的のものだと確認して「インストール」を押す

似た名前の非公式拡張機能もあります。検索結果の一番上だから選ぶのではなく、公式文書からMarketplaceへ移動し、発行元と拡張機能IDを照合してください。拡張機能はVS Codeと同じ権限で動くため、不要なものを大量に入れません。

Codex拡張機能を使う場合

OpenAI公式のCodex IDE extensionから「Install the extension」を選び、Marketplaceの案内に従います。インストール後はVS Code内でサインインし、開いているファイルや選択範囲を含めて相談できます。

最初の依頼は読み取りだけにします。

このフォルダの中にあるファイル名を確認し、
それぞれ何のためのファイルか説明してください。
ファイルの作成、編集、削除、コマンド実行はしないでください。

Claude Codeを使う場合

Claude CodeにはVS Codeとの連携方法があります。導入方式や対応OSが変わる可能性があるため、Anthropic公式のVS Code連携手順から現在の方法を確認します。

Claude Codeをターミナルから使う方式では、開いたフォルダ内で起動することで、そのフォルダを作業対象にします。インストールコマンドを意味も分からず実行せず、対応OS、契約、認証方法を確認してください。

フォルダを開いた後にAIが見られるもの

AIへファイル操作を許可すると、開いたフォルダ内の原稿や設定を読める場合があります。次のものは作業フォルダへ置きません。

  • パスワードや秘密鍵
  • APIキー
  • 宿泊者や問い合わせ者の個人情報
  • 決済情報
  • WordPressのデータベースバックアップ
  • 内容を確認していないダウンロードファイル

フォルダを開くことは、単に画面へ一覧表示するだけでなく、AIへ渡す作業範囲を決める意味もあります。

初回セットアップの確認表

  • VS Codeを公式サイトから入れた
  • 自分で作った練習用フォルダを開いた
  • 左側にフォルダ名とmemo.mdが見える
  • エクスプローラー、エディター、拡張機能、ターミナルの場所が分かる
  • Workspace Trustを内容確認なしで許可していない
  • 拡張機能の発行元と公式リンクを確認した
  • 秘密情報や個人情報をフォルダへ置いていない
  • 最初のAI依頼を読み取りだけにした
  • まだ本番サーバーへ接続していない

まとめ

VS Codeでは、サイトに関係するファイルをまとめたフォルダを一つの作業場所として開きます。そのうえで、公式の拡張機能を発行元まで確認して追加し、最初は練習用ファイルの読み取りから始めます。

この準備ができたら、最初に宿主さんのためのCodex・Claude Code相談入門で、曖昧な悩みから相談・調査・実装へ進める会話方法を確認してください。その後、Codex・Claude CodeでWordPressを管理する安全ルールやWP-CLIの基礎へ進めます。

参考資料

※画面名や導入方法は更新されることがあります。必ず各製品の公式ページで現在の手順を確認してください。

タイトルとURLをコピーしました