[{"data":1,"prerenderedAt":818},["ShallowReactive",2],{"content-/vscode-ai-coding-beginners-guide":3,"all-pages-for-dir":796,"related-/vscode-ai-coding-beginners-guide":797,"og-image-/vscode-ai-coding-beginners-guide":817},{"id":4,"title":5,"body":6,"category":779,"concepts":779,"description":780,"extension":781,"meta":782,"navigation":783,"ogImage":779,"path":784,"project_name":779,"published":785,"publishedAt":786,"seo":787,"source":779,"stem":788,"tags":789,"todo":779,"unpublished":785,"updatedAt":786,"__hash__":795},"pages/2025-12/2025-12-08/vscode-ai-coding-beginners-guide.md","はじめての VS Code + AI コーディング入門",{"type":7,"value":8,"toc":733},"minimark",[9,13,18,23,27,48,55,58,62,66,100,102,106,110,132,136,164,166,170,173,177,199,203,221,223,227,230,234,256,259,261,265,268,297,300,302,306,309,313,363,366,370,377,403,406,410,413,428,430,434,441,445,463,467,488,492,507,510,512,516,519,526,530,537,541,544,549,559,562,566,588,590,594,611,618,620,624,627,631,645,649,666,672,674,678,684,688,694,698,704,706,710,713,730],[10,11,5],"h1",{"id":12},"はじめての-vs-code-ai-コーディング入門",[14,15,17],"h3",{"id":16},"claude-copilot-に-html-の-web-ページを作ってもらうまで","〜Claude / Copilot に HTML の Web ページを作ってもらうまで〜",[19,20,22],"h2",{"id":21},"_0-このドキュメントでやること","0. このドキュメントでやること",[24,25,26],"p",{},"パソコン初心者の方でも分かるように、この資料では",[28,29,30,34,37,40],"ol",{},[31,32,33],"li",{},"VS Code（ブイエスコード）という開発用のソフトをインストールする",[31,35,36],{},"Git（ギット）と GitHub（ギットハブ）のアカウントを用意する",[31,38,39],{},"VS Code に AI 機能（Claude Code や GitHub Copilot）を入れる",[31,41,42,43,47],{},"AI にお願いして、",[44,45,46],"strong",{},"簡単な HTML の Web ページ"," を作ってもらう",[24,49,50,51,54],{},"という流れを、",[44,52,53],{},"順番に説明","します。",[56,57],"hr",{},[19,59,61],{"id":60},"_1-事前準備","1. 事前準備",[14,63,65],{"id":64},"_1-1-必要なもの","1-1. 必要なもの",[67,68,69,72,75,78,81],"ul",{},[31,70,71],{},"Windows パソコン",[31,73,74],{},"インターネット接続",[31,76,77],{},"ブラウザ（Google Chrome や Microsoft Edge など）",[31,79,80],{},"メールアドレス（Gmail など）\n→ GitHub のアカウント作成に使います",[31,82,83,84],{},"すでに契約済みの AI サービス",[67,85,86],{},[31,87,88,89],{},"例）",[67,90,91,94,97],{},[31,92,93],{},"Anthropic Claude（Claude Code を VS Code から使う場合）",[31,95,96],{},"GitHub Copilot（「Codex」と聞いている場合、実質これと思ってください）",[31,98,99],{},"ChatGPT の VS Code 拡張などでも OK",[56,101],{},[19,103,105],{"id":104},"_2-vs-code-をインストールする","2. VS Code をインストールする",[14,107,109],{"id":108},"_2-1-ダウンロード","2-1. ダウンロード",[28,111,112,119,126],{},[31,113,114,115],{},"ブラウザで次のページを開きます\n→ ",[116,117,118],"code",{},"https://code.visualstudio.com/",[31,120,121,122,125],{},"画面中央あたりの\n",[44,123,124],{},"「Download for Windows」","（または「Download for Windows x64」）\nと書いてあるボタンをクリックします。",[31,127,128,131],{},[116,129,130],{},"VSCodeSetup-x.xx.x.exe"," のようなファイルがダウンロードされます。",[14,133,135],{"id":134},"_2-2-インストール","2-2. インストール",[28,137,138,145,148,151,158,161],{},[31,139,140,141,144],{},"ダウンロードした ",[116,142,143],{},"VSCodeSetup-...exe"," をダブルクリックして起動します。",[31,146,147],{},"利用規約画面で「同意する」を選んで「次へ」。",[31,149,150],{},"インストール先フォルダは、よく分からなければそのままで OK。",[31,152,153,154,157],{},"「追加タスクの選択」では、初心者の方は ",[44,155,156],{},"特に変更せずそのまま","「次へ」→「インストール」。",[31,159,160],{},"数十秒〜数分待つとインストールが完了します。",[31,162,163],{},"「Visual Studio Code を起動」にチェックを入れて「完了」を押すと、VS Code が起動します。",[56,165],{},[19,167,169],{"id":168},"_3-git-をインストールするざっくりで-ok","3. Git をインストールする（ざっくりで OK）",[24,171,172],{},"Git は「ファイルの変更履歴を保存するためのツール」です。あとで GitHub と一緒に使うので入れておきます。",[14,174,176],{"id":175},"_3-1-ダウンロード","3-1. ダウンロード",[28,178,179,184,191,194],{},[31,180,114,181],{},[116,182,183],{},"https://git-scm.com/",[31,185,186,187,190],{},"上部メニューから ",[44,188,189],{},"「Downloads」"," をクリック",[31,192,193],{},"「Download for Windows」をクリック",[31,195,196,131],{},[116,197,198],{},"Git-x.x.x-64-bit.exe",[14,200,202],{"id":201},"_3-2-インストール","3-2. インストール",[28,204,205,211,218],{},[31,206,140,207,210],{},[116,208,209],{},"Git-...exe"," をダブルクリック。",[31,212,213,214,217],{},"基本的に ",[44,215,216],{},"すべて「Next」連打で OK"," です。\n（途中でよく分からない設定が出てきても、そのまま次へ）",[31,219,220],{},"最後に「Finish」で完了。",[56,222],{},[19,224,226],{"id":225},"_4-github-アカウントを作る","4. GitHub アカウントを作る",[24,228,229],{},"GitHub は、ソースコードを保存するインターネット上のサービスです。AI が作ったファイルを保存したり、後で他の人と共有したりする時に使えます。",[14,231,233],{"id":232},"_4-1-アカウント作成","4-1. アカウント作成",[28,235,236,243,250,253],{},[31,237,238,239,242],{},"ブラウザで ",[116,240,241],{},"https://github.com/"," を開く",[31,244,245,246,249],{},"右上の ",[44,247,248],{},"「Sign up」","（サインアップ）をクリック",[31,251,252],{},"メールアドレス・パスワード・ユーザー名を入力",[31,254,255],{},"指示にしたがって本人確認（メールの認証など）を完了させる",[24,257,258],{},"これで GitHub のアカウントができました。",[56,260],{},[19,262,264],{"id":263},"_5-vs-code-の基本画面の見方超ざっくり","5. VS Code の基本画面の見方（超ざっくり）",[24,266,267],{},"VS Code を起動すると、だいたい次のような構成です：",[67,269,270,281,289],{},[31,271,272,273],{},"左側：",[67,274,275,278],{},[31,276,277],{},"一番上：ファイル（エクスプローラー）アイコン",[31,279,280],{},"パズルのピースのようなアイコン：拡張機能（Extensions）",[31,282,283,284],{},"真ん中：",[67,285,286],{},[31,287,288],{},"実際にコードを書く場所",[31,290,291,292],{},"下：",[67,293,294],{},[31,295,296],{},"メッセージやエラーが表示されるバー",[24,298,299],{},"ここでは「拡張機能（Extensions）」をよく使います。",[56,301],{},[19,303,305],{"id":304},"_6-vs-code-に-aiclaude-copilot-chatgptを入れる","6. VS Code に AI（Claude / Copilot / ChatGPT）を入れる",[24,307,308],{},"ここでは代表的な 2 パターンを書きます。\n（どれを使うかは、その人が契約しているサービスに合わせてください）",[14,310,312],{"id":311},"_6-1-claude-codeanthropic-claudeを入れる場合","6-1. Claude Code（Anthropic Claude）を入れる場合",[28,314,315,318,324,331,341,344],{},[31,316,317],{},"VS Code を起動する",[31,319,320,321,190],{},"左側のメニューから ",[44,322,323],{},"パズルのピースのアイコン（拡張機能）",[31,325,326,327,330],{},"上部の検索ボックスに\n",[116,328,329],{},"Claude","\nと入力",[31,332,333,336,337,340],{},[116,334,335],{},"Claude Dev"," や ",[116,338,339],{},"Anthropic"," など、\nClaude 用の拡張機能が出てくるので、「インストール」をクリック",[31,342,343],{},"インストールが終わると、左サイドバーや下部に Claude 用のアイコンやパネルが出ます",[31,345,346,347,350,351,354,355],{},"初回起動すると、",[44,348,349],{},"API キー","や",[44,352,353],{},"ログイン","を求められます",[67,356,357,360],{},[31,358,359],{},"Claude のサイト（Anthropic のアカウントページ）から API キーを取得",[31,361,362],{},"VS Code 上の設定画面に、そのキーを貼り付ける",[24,364,365],{},"※API キーの取り方は、Claude の公式ページに手順があります。\n初心者には「ログインしてダッシュボード → API キー → 新規作成 → コピー → VS Code に貼り付け」という雰囲気で説明すれば大丈夫です。",[14,367,369],{"id":368},"_6-2-github-copilot旧-codex-系を入れる場合","6-2. GitHub Copilot（旧 Codex 系）を入れる場合",[24,371,372,373,376],{},"「Codex 入れる」と言われている場合、\n現在は実質的に ",[44,374,375],{},"GitHub Copilot"," だと考えてください。",[28,378,379,381,384,389,394,397,400],{},[31,380,317],{},[31,382,383],{},"左の拡張機能アイコンをクリック",[31,385,386,387,330],{},"検索ボックスに\n",[116,388,375],{},[31,390,391,393],{},[116,392,375],{}," を選んで「インストール」",[31,395,396],{},"インストール後、「サインイン」ボタンが出るのでクリック",[31,398,399],{},"ブラウザが開き、GitHub にログインして VS Code との連携を許可する",[31,401,402],{},"VS Code に戻ると、右下などに Copilot のステータスが表示されるようになります",[24,404,405],{},"※GitHub Copilot は有料サービスなので、事前に契約が必要です。",[14,407,409],{"id":408},"_6-3-chatgpt-の拡張機能を入れる場合任意","6-3. ChatGPT の拡張機能を入れる場合（任意）",[24,411,412],{},"ChatGPT の契約がある人は、VS Code 用の ChatGPT 拡張機能を入れることもできます。",[28,414,415,422,425],{},[31,416,417,418,421],{},"拡張機能で ",[116,419,420],{},"ChatGPT"," と検索",[31,423,424],{},"スター数が多く評価が高いものを選ぶ",[31,426,427],{},"インストール → API キー or ログイン情報を設定",[56,429],{},[19,431,433],{"id":432},"_7-新しいフォルダとファイルを作るhtml-用プロジェクト","7. 新しいフォルダとファイルを作る（HTML 用プロジェクト）",[24,435,436,437,440],{},"ここから実際に ",[44,438,439],{},"簡単な Web ページ（HTML）"," を作ります。",[14,442,444],{"id":443},"_7-1-作業用フォルダを作る","7-1. 作業用フォルダを作る",[28,446,447,450,453,456],{},[31,448,449],{},"Windows のエクスプローラー（フォルダのアイコン）を開きます",[31,451,452],{},"「ドキュメント」や「デスクトップ」など、分かりやすい場所を開く",[31,454,455],{},"右クリック → 「新規作成」 → 「フォルダー」",[31,457,458,459,462],{},"フォルダ名を ",[116,460,461],{},"my-first-website"," などにしておく",[14,464,466],{"id":465},"_7-2-vs-code-でフォルダを開く","7-2. VS Code でフォルダを開く",[28,468,469,472,479,485],{},[31,470,471],{},"VS Code を起動",[31,473,474,475,478],{},"メニューから\n",[44,476,477],{},"「ファイル」→「フォルダーを開く」"," を選択",[31,480,481,482,484],{},"さきほど作った ",[116,483,461],{}," フォルダを選んで「フォルダーの選択」",[31,486,487],{},"左側に空のフォルダとして表示されます",[14,489,491],{"id":490},"_7-3-indexhtml-ファイルを作る","7-3. index.html ファイルを作る",[28,493,494,500],{},[31,495,496,497,499],{},"VS Code 左側のフォルダエリアで、",[116,498,461],{}," の上で右クリック\n→ 「新しいファイル」",[31,501,502,503,506],{},"ファイル名を\n",[116,504,505],{},"index.html","\nと入力して Enter",[24,508,509],{},"これで HTML ファイルを置く準備ができました。",[56,511],{},[19,513,515],{"id":514},"_8-ai-に-html-を書いてもらうプロンプト例付き","8. AI に HTML を書いてもらう（プロンプト例付き）",[24,517,518],{},"ここがこのドキュメントの「肝」です。\nVS Code 上で AI に「こんな Web ページを作って」とお願いして、HTML を生成してもらいます。",[24,520,521,522,525],{},"以下、",[44,523,524],{},"Copilot を例にしますが、Claude でも ChatGPT でも同じような流れ","です。",[14,527,529],{"id":528},"_8-1-編集画面を開く","8-1. 編集画面を開く",[28,531,532],{},[31,533,534,536],{},[116,535,505],{}," をクリックして開きます\n→ まだ真っ白な状態",[14,538,540],{"id":539},"_8-2-ai-に渡すプロンプト例コメントとして書く","8-2. AI に渡すプロンプト例（コメントとして書く）",[24,542,543],{},"ファイルの一番上に、まずコメントとしてプロンプトを書いても構いません。\n（AI によっては、サイドバーやチャット欄に直接入力するタイプもあります）",[545,546,548],"h4",{"id":547},"例claude-chatgpt-のチャット欄に入力するプロンプト","例：Claude / ChatGPT のチャット欄に入力するプロンプト",[550,551,557],"pre",{"className":552,"code":554,"language":555,"meta":556},[553],"language-text","これから HTML のファイルを作りたい初心者です。\nVS Code で index.html を開いています。\n\n以下の条件で、シンプルな 1 ページの Web ページの HTML コードを作ってください。\n\n- タイトル：はじめての私のホームページ\n- 画面上部に大きな見出し（h1）でタイトルを表示\n- 簡単な自己紹介の文章を 2〜3 文\n- 箇条書きで「好きなこと」を 3 つ\n- ページ全体の背景色を薄いグレーにして、中央に白い箱（カード）のような領域を作って、その中に内容を表示\n- 文字化けしないように、HTML5（\u003C!DOCTYPE html>）形式でお願いします。\n\n出力は、index.html にそのまま貼り付けて使える完全な HTML コードだけをください。\n","text","",[116,558,554],{"__ignoreMap":556},[24,560,561],{},"このプロンプトを AI に送信すると、HTML コードが返ってきます。",[14,563,565],{"id":564},"_8-3-返ってきた-html-を-indexhtml-に貼る","8-3. 返ってきた HTML を index.html に貼る",[28,567,568,575,581],{},[31,569,570,571,574],{},"AI の返答の中に、",[116,572,573],{},"\u003C!DOCTYPE html>"," から始まるコードが表示されるので、全部コピー",[31,576,577,578,580],{},"VS Code の ",[116,579,505],{}," にペースト",[31,582,583,584,587],{},"上書き保存（",[116,585,586],{},"Ctrl + S","）",[56,589],{},[19,591,593],{"id":592},"_9-ブラウザで-web-ページを確認する","9. ブラウザで Web ページを確認する",[28,595,596,602,608],{},[31,597,598,599,601],{},"Windows のエクスプローラーで、",[116,600,461],{}," フォルダを開く",[31,603,604,605,607],{},"中にある ",[116,606,505],{}," をダブルクリック",[31,609,610],{},"既定のブラウザ（Chrome や Edge）が開き、AI が作った Web ページが表示されます",[24,612,613,614,617],{},"これで、\n",[44,615,616],{},"「VS Code + AI を使って、簡単な Web ページを作る」","\nというゴール達成です。",[56,619],{},[19,621,623],{"id":622},"_10-git-github-に保存してみる余裕があれば","10. Git & GitHub に保存してみる（余裕があれば）",[24,625,626],{},"ここは初心者向けには「できれば」で構いません。\n「バージョン管理」と「クラウドにバックアップを置く」イメージです。",[14,628,630],{"id":629},"_10-1-vs-code-で-git-初期化","10-1. VS Code で Git 初期化",[28,632,633,639,642],{},[31,634,635,636,638],{},"VS Code で ",[116,637,461],{}," を開いた状態にする",[31,640,641],{},"左側のメニューから「ソース管理」（三本線と点のアイコン）をクリック",[31,643,644],{},"「リポジトリを初期化」ボタンを押す\n→ Git の管理が始まる",[14,646,648],{"id":647},"_10-2-github-に公開超ざっくり","10-2. GitHub に公開（超ざっくり）",[28,650,651,654,657,663],{},[31,652,653],{},"VS Code のソース管理パネルで、「…」→「GitHub に公開」や「Publish to GitHub」のような項目を探す",[31,655,656],{},"GitHub にログイン（ブラウザが開くので認証）",[31,658,659,660,662],{},"新しいリポジトリ名（例：",[116,661,461],{},"）を入力",[31,664,665],{},"「Publish」ボタンを押す",[24,667,668,669,671],{},"これで、GitHub 上にも ",[116,670,505],{}," のバックアップが作られます。",[56,673],{},[19,675,677],{"id":676},"_11-もう少し発展させるときのプロンプト例","11. もう少し発展させるときのプロンプト例",[24,679,680,681,683],{},"同じ ",[116,682,505],{}," を少しずつ良くしていきたいときは、\nAI に対して次のような追加プロンプトを送ります。",[14,685,687],{"id":686},"例1ボタンを追加したい","例1：ボタンを追加したい",[550,689,692],{"className":690,"code":691,"language":555,"meta":556},[553],"今の index.html のコードに対して、以下の変更を加えたコードを出してください。\n\n- 自己紹介の下に、「お問い合わせはこちら」というボタンを追加\n- ボタンをクリックすると、メール（mailto:）リンクで \"example@example.com\" 宛てにメール作成画面が開く\n- CSS は同じファイルの \u003Cstyle> タグ内に書いてOKです。\n- 既存コード全体を、新しい修正を反映した形で出力してください。\n",[116,693,691],{"__ignoreMap":556},[14,695,697],{"id":696},"例2スマホでも見やすくしたい","例2：スマホでも見やすくしたい",[550,699,702],{"className":700,"code":701,"language":555,"meta":556},[553],"今の index.html を、スマートフォンでも見やすくしたいです。\n\n- meta viewport を追加\n- 文字サイズと余白を、スマホ画面（幅 400px 前後）でも読みやすいように調整\n- 既存のデザインは大きく変えず、レスポンシブ対応のための最低限の修正にとどめてください。\n\n修正済みの完全な HTML コードを出力してください。\n",[116,703,701],{"__ignoreMap":556},[56,705],{},[19,707,709],{"id":708},"_12-まとめ","12. まとめ",[24,711,712],{},"このドキュメントでは、初心者の方が",[28,714,715,718,721,724,727],{},[31,716,717],{},"VS Code をインストールし",[31,719,720],{},"Git / GitHub を準備して",[31,722,723],{},"Claude Code や GitHub Copilot（= Codex 系）などの AI 拡張機能を入れ",[31,725,726],{},"AI にプロンプトを投げて HTML の Web ページを作ってもらい",[31,728,729],{},"それをブラウザで表示する",[24,731,732],{},"という一連の流れを体験できるように説明しました。",{"title":556,"searchDepth":734,"depth":734,"links":735},2,[736,738,739,742,746,750,753,754,759,764,769,770,774,778],{"id":16,"depth":737,"text":17},3,{"id":21,"depth":734,"text":22},{"id":60,"depth":734,"text":61,"children":740},[741],{"id":64,"depth":737,"text":65},{"id":104,"depth":734,"text":105,"children":743},[744,745],{"id":108,"depth":737,"text":109},{"id":134,"depth":737,"text":135},{"id":168,"depth":734,"text":169,"children":747},[748,749],{"id":175,"depth":737,"text":176},{"id":201,"depth":737,"text":202},{"id":225,"depth":734,"text":226,"children":751},[752],{"id":232,"depth":737,"text":233},{"id":263,"depth":734,"text":264},{"id":304,"depth":734,"text":305,"children":755},[756,757,758],{"id":311,"depth":737,"text":312},{"id":368,"depth":737,"text":369},{"id":408,"depth":737,"text":409},{"id":432,"depth":734,"text":433,"children":760},[761,762,763],{"id":443,"depth":737,"text":444},{"id":465,"depth":737,"text":466},{"id":490,"depth":737,"text":491},{"id":514,"depth":734,"text":515,"children":765},[766,767,768],{"id":528,"depth":737,"text":529},{"id":539,"depth":737,"text":540},{"id":564,"depth":737,"text":565},{"id":592,"depth":734,"text":593},{"id":622,"depth":734,"text":623,"children":771},[772,773],{"id":629,"depth":737,"text":630},{"id":647,"depth":737,"text":648},{"id":676,"depth":734,"text":677,"children":775},[776,777],{"id":686,"depth":737,"text":687},{"id":696,"depth":737,"text":697},{"id":708,"depth":734,"text":709},null,"パソコン初心者向けに、VS Code、Git、GitHub のセットアップから Claude Code や GitHub Copilot を使って HTML の Web ページを作成するまでの手順を解説","md",{},true,"/vscode-ai-coding-beginners-guide",false,"2025-12-08T00:00:00.000Z",{"title":5,"description":780},"2025-12/2025-12-08/vscode-ai-coding-beginners-guide",[790,791,792,375,793,794],"VS Code","AI","Claude Code","初心者向け","HTML","yhozRy-6UhpA_XfnMSK7oP_L-DH10AUgZMxIFQ3FBC4",[],[798,802,806,810,814],{"title":799,"path":800,"publishedAt":801},"誰がAXをできるのか。業務をコードに落とし込める人の条件","/who-can-do-ax","2026-07-16T00:00:00.000Z",{"title":803,"path":804,"publishedAt":805},"「世界でAIを使っているのは800万人」は本当か — 公式発表の確認と10年後までのフェルミ推定","/ai-user-count-fermi-estimate","2026-07-15T00:00:00.000Z",{"title":807,"path":808,"publishedAt":809},"「ALL Software をエージェントネイティブに」を疑う：CLI-Anything を開けて読んでみた","/cli-anything-doubt","2026-05-15T00:00:00.000Z",{"title":811,"path":812,"publishedAt":813},"2026年3月11日の開発日記 - CF計算書メンタルモデルとAI時代の質問力","/2026-03-11-diary","2026-03-11T00:00:00.000Z",{"title":815,"path":816,"publishedAt":813},"個人事業主がAIで事業を変える──美容業オーナーとの対話から見えた7つの論点","/ai-solo-business-transformation","https://log.eurekapu.com/og/blog/vscode-ai-coding-beginners-guide.png?v=2025-12-08T00%3A00%3A00.000Z&title=%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AE%20VS%20Code%20%2B%20AI%20%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E5%85%A5%E9%96%80&author=Kei%20Komatsu&sig=57cf457d67b86197",1785654673803]