🛠️ 最強の開発環境構築チャート

「メモ帳」でコードを書くのはもう終わり。プロと同じ道具（VS Code + GitHub + Cloudflare）を連携させて、書いたコードを全自動でWeb公開するまでの流れです。

💡

ここは読み飛ばしてもOK！
一度設定が完了していれば、このページを見る必要はありません。「パソコンを買い替えた時」にだけ戻ってきてください。

基礎知識：登場人物の紹介

VS Code: 高機能なエディタ。コードを書くための「作業場」。
Git (ギット): 変更履歴を記録する「裏方の管理人」。これがないと連携できない。
GitHub: コードをネット上に保存する「倉庫」。バックアップにもなる。
Cloudflare: GitHubの中身をWebサイトとして表示してくれる「放送局」。

STEP 1: 道具のインストール

1. Git for Windows

公式サイトからダウンロードしてインストールします。設定画面がたくさん出ますが、全て変更せず「Next」連打でOKです。

2. VS Code

インストール後、左のブロック崩しアイコン（拡張機能）から「Japanese」と検索して日本語化パックを入れます。

STEP 2: VS CodeとGitHubの「合体」

ここが最大の難所です。VS Codeに「GitHubのアカウント」を教えてあげて、自由に書き込みできるようにします。

VS Codeの左下にある歯車アイコン ⚙️ をクリックし、「設定の同期をオンにする」を選びます。
画面上部に「サインイン」の選択肢が出るので、「GitHubでサインイン」を選びます。
ブラウザが起動し、GitHubの許可画面が出るので、緑色のボタン（Authorize）を押して許可します。
VS Codeの左下に自分のアイコンが表示されれば連携完了です！

STEP 3: Web公開設定 (Cloudflare)

Cloudflare Pagesを使えば、「GitHubにコードを送るだけ」で勝手にWebサイトが更新されるようになります。

Cloudflareのダッシュボードで「Workers & Pages」→「Gitに接続」を選択。
公開したいリポジトリ（GitHubの倉庫）を選択して「セットアップ開始」。
設定は何もいじらず、一番下の「保存してデプロイ」を押すだけ。

🔄 日々の更新手順マニュアル

サイトの文字を直したり画像を追加したあと、それを本番に反映させる手順です。
ボタンを探すと迷子になるので、「魔法のコマンド」ですべて解決します。

📦

イメージしよう：宅配便の流れ
1. コミット ＝段ボールに荷物を詰めてガムテープで閉じる（荷造り完了）。
2. プッシュ ＝宅配業者に渡して発送する（Webへ送信）。

STEP 1: コマンドパレットを開く

マウス操作は不要です。まず、このショートカットキーを押してください。

Ctrl + Shift + P

画面の上部に「検索窓」のような入力欄が出てきます。

STEP 2: コミット (荷造り)

操作手順

出てきた入力欄に git commit と打ち込みます。
候補に出てくる 「Git: コミット」 を選択します。
「メッセージを入力してください」 と出るので、「トップページ修正」などと入力して Enter キーを押します。

⚠️ 全画面のエディタが開いてしまったら？
もし COMMIT_EDITMSG というファイルが開いたら、1行目にメッセージを書き、右上の「チェックマーク(✓)」を押して閉じてください。

STEP 3: プッシュ (発送)

コミットしただけでは、まだ自分のパソコンの中に変更があるだけです。最後に送信します。

操作手順

もう一度 Ctrl + Shift + P を押します。
入力欄に git push と打ち込みます。
候補に出てくる 「Git: プッシュ」 を選択します。

👉 左下の青いバーがクルクル回って止まれば送信完了！数分後にはWebサイトが変わっています。

🚨 トラブルシューティング (SOS)

「エラーが出た！」「画面がいつもと違う！」という時のための緊急対応マニュアルです。

CASE 1: Cloudflareで「main」が選べない

症状： Cloudflareの設定画面でブランチ(main)が出てこない。GitHubを見に行ったらファイルがなく、英語のコマンドだらけになっている。
原因： VS Codeからの「宛先」設定が迷子になっていて、GitHubにデータが届いていない。

✅ 対処法：強制再接続コマンド

VS Codeで Ctrl + J を押して下のターミナルを開き、以下のコマンドを1行ずつコピー＆ペーストして Enter を押してください。

# 1. 古い宛先設定を削除します
git remote remove origin

# 2. 正しいGitHubの住所を登録 (★URLは自分のリポジトリのものに書き換えて！)
git remote add origin https://github.com/nanashinotarou/VS-Code-GitHub-.git

# 3. ブランチ名を「main」に強制統一します
git branch -M main

# 4. 強制的に荷物を送りつけます
git push -u origin main
            

※4行目を実行した後、文字が流れて止まれば完了です。GitHubを再読み込みして確認してください。

CASE 2: 「Gitを使用する前に～」と怒られる

👤

「あなたは誰？」というエラー
Gitを初めて使う時、名前とメールアドレスを登録していないとエラーになります。

✅ 対処法：自己紹介をする

同じくターミナル（Ctrl+J）で以下を実行してください。

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
            