• #VS Code
  • #AI
  • #Claude Code
  • #GitHub Copilot
  • #初心者向け
  • #HTML

はじめての VS Code + AI コーディング入門

〜Claude / Copilot に HTML の Web ページを作ってもらうまで〜

0. このドキュメントでやること

この資料では、パソコン初心者の方でも分かるように、

  1. VS Code（ブイエスコード）という開発用のソフトをインストールする
  2. Git（ギット）と GitHub（ギットハブ）のアカウントを用意する
  3. VS Code に AI 機能（Claude Code や GitHub Copilot）を入れる
  4. AI にお願いして、簡単な HTML の Web ページ を作ってもらう

という流れを、順番に説明します。

1. 事前準備

1-1. 必要なもの

  • Windows パソコン
  • インターネット接続
  • ブラウザ（Google Chrome や Microsoft Edge など）
  • メールアドレス（Gmail など） → GitHub のアカウント作成に使います
  • すでに契約済みの AI サービス
  • 例）
* Anthropic Claude（Claude Code を VS Code から使う場合）

* GitHub Copilot（「Codex」と聞いている場合、実質これと思ってください）
* ChatGPT の VS Code 拡張などでも OK

2. VS Code をインストールする

2-1. ダウンロード

  1. ブラウザで次のページを開きます → https://code.visualstudio.com/
  2. 画面中央あたりの 「Download for Windows」（または「Download for Windows x64」） と書いてあるボタンをクリックします。
  3. VSCodeSetup-x.xx.x.exe のようなファイルがダウンロードされます。

2-2. インストール

  1. ダウンロードした VSCodeSetup-...exe をダブルクリックして起動します。
  2. 利用規約画面で「同意する」を選んで「次へ」。
  3. インストール先フォルダは、よく分からなければそのままで OK。
  4. 「追加タスクの選択」では、初心者の方は 特に変更せずそのまま「次へ」→「インストール」。
  5. 数十秒〜数分待つとインストールが完了します。
  6. 「Visual Studio Code を起動」にチェックを入れて「完了」を押すと、VS Code が起動します。

3. Git をインストールする（ざっくりで OK）

Git は「ファイルの変更履歴を保存するためのツール」です。 あとで GitHub と一緒に使うので入れておきます。

3-1. ダウンロード

  1. ブラウザで次のページを開きます → https://git-scm.com/
  2. 上部メニューから 「Downloads」 をクリック
  3. 「Download for Windows」をクリック
  4. Git-x.x.x-64-bit.exe のようなファイルがダウンロードされます。

3-2. インストール

  1. ダウンロードした Git-...exe をダブルクリック。
  2. 基本的に すべて「Next」連打で OK です。 （途中でよく分からない設定が出てきても、そのまま次へ）
  3. 最後に「Finish」で完了。

4. GitHub アカウントを作る

GitHub は、ソースコードを保存するインターネット上のサービスです。 AI が作ったファイルを保存したり、後で他の人と共有したりする時に使えます。

4-1. アカウント作成

  1. ブラウザで https://github.com/ を開く
  2. 右上の 「Sign up」（サインアップ）をクリック
  3. メールアドレス・パスワード・ユーザー名を入力
  4. 指示にしたがって本人確認（メールの認証など）を完了させる

これで GitHub のアカウントができました。

5. VS Code の基本画面の見方（超ざっくり）

VS Code を起動すると、だいたい次のような構成です：

  • 左側：
  • 一番上：ファイル（エクスプローラー）アイコン
  • パズルのピースのようなアイコン：拡張機能（Extensions）
  • 真ん中：
  • 実際にコードを書く場所
  • 下：
  • メッセージやエラーが表示されるバー

ここでは「拡張機能（Extensions）」をよく使います。

6. VS Code に AI（Claude / Copilot / ChatGPT）を入れる

ここでは代表的な 2 パターンを書きます。 （どれを使うかは、その人が契約しているサービスに合わせてください）

6-1. Claude Code（Anthropic Claude）を入れる場合

  1. VS Code を起動する
  2. 左側のメニューから パズルのピースのアイコン（拡張機能） をクリック
  3. 上部の検索ボックスに Claude と入力
  4. Claude Dev や Anthropic など、 Claude 用の拡張機能が出てくるので、「インストール」をクリック
  5. インストールが終わると、左サイドバーや下部に Claude 用のアイコンやパネルが出ます
  6. 初回起動すると、API キーやログインを求められます
  • Claude のサイト（Anthropic のアカウントページ）から API キーを取得
  • VS Code 上の設定画面に、そのキーを貼り付ける

※API キーの取り方は、Claude の公式ページに手順があります。 初心者には「ログインしてダッシュボード → API キー → 新規作成 → コピー → VS Code に貼り付け」という雰囲気で説明すれば大丈夫です。

6-2. GitHub Copilot（旧 Codex 系）を入れる場合

「Codex 入れる」と言われている場合、 現在は実質的に GitHub Copilot だと考えてください。

  1. VS Code を起動する
  2. 左の拡張機能アイコンをクリック
  3. 検索ボックスに GitHub Copilot と入力
  4. GitHub Copilot を選んで「インストール」
  5. インストール後、「サインイン」ボタンが出るのでクリック
  6. ブラウザが開き、GitHub にログインして VS Code との連携を許可する
  7. VS Code に戻ると、右下などに Copilot のステータスが表示されるようになります

※GitHub Copilot は有料サービスなので、事前に契約が必要です。

6-3. ChatGPT の拡張機能を入れる場合（任意）

ChatGPT の契約がある人は、VS Code 用の ChatGPT 拡張機能を入れることもできます。

  1. 拡張機能で ChatGPT と検索
  2. スター数が多く評価が高いものを選ぶ
  3. インストール → API キー or ログイン情報を設定

7. 新しいフォルダとファイルを作る（HTML 用プロジェクト）

ここから実際に 簡単な Web ページ（HTML） を作ります。

7-1. 作業用フォルダを作る

  1. Windows のエクスプローラー（フォルダのアイコン）を開きます
  2. 「ドキュメント」や「デスクトップ」など、分かりやすい場所を開く
  3. 右クリック → 「新規作成」 → 「フォルダー」
  4. フォルダ名を my-first-website などにしておく

7-2. VS Code でフォルダを開く

  1. VS Code を起動
  2. メニューから 「ファイル」→「フォルダーを開く」 を選択
  3. さきほど作った my-first-website フォルダを選んで「フォルダーの選択」
  4. 左側に空のフォルダとして表示されます

7-3. index.html ファイルを作る

  1. VS Code 左側のフォルダエリアで、my-first-website の上で右クリック → 「新しいファイル」
  2. ファイル名を index.html と入力して Enter

これで HTML ファイルを置く準備ができました。

8. AI に HTML を書いてもらう（プロンプト例付き）

ここがこのドキュメントの「肝」です。 VS Code 上で AI に「こんな Web ページを作って」とお願いして、HTML を生成してもらいます。

以下、Copilot を例にしますが、Claude でも ChatGPT でも同じような流れです。

8-1. 編集画面を開く

  1. index.html をクリックして開きます → まだ真っ白な状態

8-2. AI に渡すプロンプト例（コメントとして書く）

ファイルの一番上に、まずコメントとしてプロンプトを書いても構いません。 （AI によっては、サイドバーやチャット欄に直接入力するタイプもあります）

例：Claude / ChatGPT のチャット欄に入力するプロンプト

これから HTML のファイルを作りたい初心者です。
VS Code で index.html を開いています。

以下の条件で、シンプルな 1 ページの Web ページの HTML コードを作ってください。

- タイトル：はじめての私のホームページ
- 画面上部に大きな見出し（h1）でタイトルを表示
- 簡単な自己紹介の文章を 2〜3 文
- 箇条書きで「好きなこと」を 3 つ
- ページ全体の背景色を薄いグレーにして、中央に白い箱（カード）のような領域を作って、その中に内容を表示
- 文字化けしないように、HTML5（<!DOCTYPE html>）形式でお願いします。

出力は、index.html にそのまま貼り付けて使える完全な HTML コードだけをください。

このプロンプトを AI に送信すると、HTML コードが返ってきます。

8-3. 返ってきた HTML を index.html に貼る

  1. AI の返答の中に、<!DOCTYPE html> から始まるコードが表示されるので、全部コピー
  2. VS Code の index.html にペースト
  3. 上書き保存（Ctrl + S）

9. ブラウザで Web ページを確認する

  1. Windows のエクスプローラーで、my-first-website フォルダを開く
  2. 中にある index.html をダブルクリック
  3. 既定のブラウザ（Chrome や Edge）が開き、AI が作った Web ページが表示されます

これで、 「VS Code + AI を使って、簡単な Web ページを作る」 というゴール達成です。

10. Git & GitHub に保存してみる（余裕があれば）

ここは初心者向けには「できれば」で構いません。 「バージョン管理」と「クラウドにバックアップを置く」イメージです。

10-1. VS Code で Git 初期化

  1. VS Code で my-first-website を開いた状態にする
  2. 左側のメニューから「ソース管理」（三本線と点のアイコン）をクリック
  3. 「リポジトリを初期化」ボタンを押す → Git の管理が始まる

10-2. GitHub に公開（超ざっくり）

  1. VS Code のソース管理パネルで、「…」→「GitHub に公開」や「Publish to GitHub」のような項目を探す
  2. GitHub にログイン（ブラウザが開くので認証）
  3. 新しいリポジトリ名（例：my-first-website）を入力
  4. 「Publish」ボタンを押す

これで、GitHub 上にも index.html のバックアップが作られます。

11. もう少し発展させるときのプロンプト例

同じ index.html を少しずつ良くしていきたいときは、 AI に対して次のような追加プロンプトを送ります。

例1：ボタンを追加したい

今の index.html のコードに対して、以下の変更を加えたコードを出してください。

- 自己紹介の下に、「お問い合わせはこちら」というボタンを追加
- ボタンをクリックすると、メール（mailto:）リンクで "example@example.com" 宛てにメール作成画面が開く
- CSS は同じファイルの <style> タグ内に書いてOKです。
- 既存コード全体を、新しい修正を反映した形で出力してください。

例2：スマホでも見やすくしたい

今の index.html を、スマートフォンでも見やすくしたいです。

- meta viewport を追加
- 文字サイズと余白を、スマホ画面（幅 400px 前後）でも読みやすいように調整
- 既存のデザインは大きく変えず、レスポンシブ対応のための最低限の修正にとどめてください。

修正済みの完全な HTML コードを出力してください。

12. まとめ

このドキュメントでは、初心者の方が

  1. VS Code をインストールし
  2. Git / GitHub を準備して
  3. Claude Code や GitHub Copilot（= Codex 系）などの AI 拡張機能を入れ
  4. AI にプロンプトを投げて HTML の Web ページを作ってもらい
  5. それをブラウザで表示する

という一連の流れを体験できるように説明しました。