0. 【重要】コードはどこに入力する?

💻 「ターミナル」を使います

このマニュアルに出てくる英語のコマンド(git pull...など)は、全てVS Codeの下にある「ターミナル」パネルに入力してEnterキーを押します。

ターミナルの出し方:
画面上のメニュー「ターミナル(T)」→「新しいターミナル」をクリック
(または Ctrl + J キー)

💡 ファイルの横の「英語」の意味は?
  • M (Modified) : 修正(もともとあったファイルを変えた)
  • U (Untracked) : 新規(まだGitに入れていない新しいファイル)
  • A (Added) : 追加(新しく作って、コミット準備OK)
  • D (Deleted) : 削除(消したファイル)

1. 作業の「黄金サイクル」とタイミング

この順序を守るだけで、トラブルの9割は防げます。

① 作業開始時:まずは最新にする

場所:ターミナル

git pull origin main

理由:他のPCやAIによる変更を自分のPCに反映し、衝突(コンフリクト)を防ぐため。

② 作業終了時:保存して公開(Commit & Push)

場所:ソース管理パネルの「コミット」ボタンの横の矢印 → 「コミットしてプッシュ」

理由:「保存」と「公開」を一度に終わらせる、えりさんいつもの手順です。
※これでGitHub(サーバー)への保存まで完了します。

⚠️ 「ステージされている変更」と「変更」が両方ある時は?

この状態でコミットすると、「ステージ(上の段)」にあるものしか保存されません!

必ず、「変更」段の横にある + ボタン(すべての変更をステージ)を押して、全部「ステージ」に入れてからコミットしてください。

🛑 メニューの意味(迷ったらコレを見て!)

ボタンの横の矢印を押すと色々出てきますが、正解は一つです。

  • コミット:PCに保存するだけ(GitHubには送らない)
  • コミット (修正):さっきのコミットをやり直す(上級者用)
  • コミットしてプッシュこれを使います!(保存&公開)
  • ⚠️ コミットして同期:プッシュ+他人の変更を取り込む(※競合エラーが出やすいので注意)

2. コミットメッセージの「爆速」テンプレ

左側の「ソース管理」パネルの入力欄(メッセージ欄)に入れます。
迷ったらこれだけ使えばOKです。

💡 いろいろまとめて作業しちゃった時は?

「一番大きな変更」を書いて、後ろに「、他」とつければOKです!
自分用なので、自分が思い出せれば完璧さを求める必要はありません。

例: feat: 会社概要を追加、他デザイン調整

3. 「やばい!」と思った時のリカバリー手順

⚠️ VS Codeの「ターミナル」で行ってください
渥美さんが最も不安な「戻し方」と「削除」の正解ルートです。

Q:作業中に「なんか変になった!」元に戻したい

「コミットしてプッシュ」ボタンを押す前なら、ボタン一つで戻せます。

場所:ソース管理パネルの「変更」一覧

  1. もし「ステージされている変更」にある場合は、「ー(マイナス)」ボタンで「変更」に戻す
  2. ファイル名の横にある「曲がった矢印(変更を破棄)」をクリック
  3. 「変更(作業内容)を破棄しますか?」と聞かれるので「破棄」を押す

※ これで、直前のきれいな状態(前回のプッシュ時)に戻ります。

Q:「コミットしてプッシュ」した後に、間違いに気づいた!

⚠️ ボタンを押した後は、ターミナル必須です
一度公開してしまったものを無理やり巻き戻すため、「強制」コマンドを使います。
git reset --hard HEAD^
git push -f origin main

-f は「強制(force)」の意味。一人で作業しているからこそ使える必殺技です。

Q:GitHub上のファイルも消したい!(削除手順)

A:PCで消して、いつものように「コミット&プッシュ」するだけです。

  1. VS Codeのエクスプローラー(左のファイル一覧)で、不要なファイルを右クリックして「削除」
  2. ソース管理パネルに行くと、ファイル名に取消線がつき、D (Deleted) と表示されます
  3. いつも通り「コミットしてプッシュ」をする

※ これで自動的に、GitHub上からも消去されます。

4. 便利機能:タイムライン(過去を覗き見)

「あの時の文章に戻したい…」という時は、「タイムライン」が便利です。

💡 ここがすごい!
コミットした履歴だけでなく、「ワークスペースの編集(ただ保存しただけ)」の状態も細かく残っています。
「コミットし忘れてた!」という時でも、ここを見れば助かることがあります。
  1. VS Codeのエクスプローラー(ファイル一覧)の下にある「タイムライン」を開く
  2. 戻したい時間の履歴を右クリック
  3. 「内容をコピー」して今のファイルに貼り付ける
  4. 5. 【重要】3つの魔法の呪文(基本動作)

    ※ この3つを順番に唱えるだけで、サイトは更新されます。

    1. 変更を集める Stage
    git add .

    「散らばった変更ファイルを、発送用の箱に集める」イメージです。
    (専門用語で「ステージする」と言います)

    2. 記録する Commit
    git commit -m "update"

    「箱にフタをして、ラベル(メッセージ)を貼る」作業です。

    3. 送信する Push
    git push origin main

    「トラックへ積み込んで出荷する」作業です。
    → これをすると、Cloudflareが自動検知して、数分でネット上のページが書き換わります。

    🤔 「デプロイ」ってなに?

    よく聞く「デプロイ」と、この「3つの作業」の関係は以下の通りです。

    • 🚚 3つの呪文(Add, Commit, Push)
      えりさんの仕事(荷物をまとめて出荷するまで)
    • 🏪 デプロイ(Deployment)
      システムの仕事(お店の棚に商品を並べて、公開すること)

    つまり、「3. 送信する(Push)」さえすれば、あとはシステムが勝手にデプロイ(公開)してくれます!

    🆘 緊急時の呪文(強制上書き)

    「間違えてプッシュしてしまった!」時だけ使います
    git reset --hard HEAD^ git push -f origin main