0. 【重要】コードはどこに入力する?
💻 「ターミナル」を使います
このマニュアルに出てくる英語のコマンド(git pull...など)は、全てVS Codeの下にある「ターミナル」パネルに入力してEnterキーを押します。
ターミナルの出し方:
画面上のメニュー「ターミナル(T)」→「新しいターミナル」をクリック
(または Ctrl + J キー)
💡 ファイルの横の「英語」の意味は?
- M (Modified) : 修正(もともとあったファイルを変えた)
- U (Untracked) : 新規(まだGitに入れていない新しいファイル)
- A (Added) : 追加(新しく作って、コミット準備OK)
- D (Deleted) : 削除(消したファイル)
1. 作業の「黄金サイクル」とタイミング
この順序を守るだけで、トラブルの9割は防げます。
① 作業開始時:まずは最新にする
場所:ターミナル
理由:他のPCやAIによる変更を自分のPCに反映し、衝突(コンフリクト)を防ぐため。
② 作業終了時:保存して公開(Commit & Push)
場所:ソース管理パネルの「コミット」ボタンの横の矢印 → 「コミットしてプッシュ」
理由:「保存」と「公開」を一度に終わらせる、えりさんいつもの手順です。
※これでGitHub(サーバー)への保存まで完了します。
⚠️ 「ステージされている変更」と「変更」が両方ある時は?
この状態でコミットすると、「ステージ(上の段)」にあるものしか保存されません!
必ず、「変更」段の横にある + ボタン(すべての変更をステージ)を押して、全部「ステージ」に入れてからコミットしてください。
🛑 メニューの意味(迷ったらコレを見て!)
ボタンの横の矢印を押すと色々出てきますが、正解は一つです。
- ❌ コミット:PCに保存するだけ(GitHubには送らない)
- ❌ コミット (修正):さっきのコミットをやり直す(上級者用)
- ⭕ コミットしてプッシュ:これを使います!(保存&公開)
- ⚠️ コミットして同期:プッシュ+他人の変更を取り込む(※競合エラーが出やすいので注意)
2. コミットメッセージの「爆速」テンプレ
左側の「ソース管理」パネルの入力欄(メッセージ欄)に入れます。
迷ったらこれだけ使えばOKです。
fix: 文言修正
(誤字脱字、テキストの変更)feat: 写真追加
(新しい画像を入れた時)style: デザイン調整
(色や余白を変えた時)
💡 いろいろまとめて作業しちゃった時は?
「一番大きな変更」を書いて、後ろに「、他」とつければOKです!
自分用なので、自分が思い出せれば完璧さを求める必要はありません。
例: feat: 会社概要を追加、他デザイン調整
3. 「やばい!」と思った時のリカバリー手順
渥美さんが最も不安な「戻し方」と「削除」の正解ルートです。
Q:作業中に「なんか変になった!」元に戻したい
場所:ソース管理パネルの「変更」一覧
- もし「ステージされている変更」にある場合は、「ー(マイナス)」ボタンで「変更」に戻す
- ファイル名の横にある「曲がった矢印(変更を破棄)」をクリック
- 「変更(作業内容)を破棄しますか?」と聞かれるので「破棄」を押す
※ これで、直前のきれいな状態(前回のプッシュ時)に戻ります。
Q:「コミットしてプッシュ」した後に、間違いに気づいた!
一度公開してしまったものを無理やり巻き戻すため、「強制」コマンドを使います。
git push -f origin main
※ -f は「強制(force)」の意味。一人で作業しているからこそ使える必殺技です。
Q:GitHub上のファイルも消したい!(削除手順)
A:PCで消して、いつものように「コミット&プッシュ」するだけです。
- VS Codeのエクスプローラー(左のファイル一覧)で、不要なファイルを右クリックして「削除」
- ソース管理パネルに行くと、ファイル名に取消線がつき、D (Deleted) と表示されます
- いつも通り「コミットしてプッシュ」をする
※ これで自動的に、GitHub上からも消去されます。
4. 便利機能:タイムライン(過去を覗き見)
「あの時の文章に戻したい…」という時は、「タイムライン」が便利です。
コミットした履歴だけでなく、「ワークスペースの編集(ただ保存しただけ)」の状態も細かく残っています。
「コミットし忘れてた!」という時でも、ここを見れば助かることがあります。
- VS Codeのエクスプローラー(ファイル一覧)の下にある「タイムライン」を開く
- 戻したい時間の履歴を右クリック
- 「内容をコピー」して今のファイルに貼り付ける
-
🚚 3つの呪文(Add, Commit, Push)
= えりさんの仕事(荷物をまとめて出荷するまで) -
🏪 デプロイ(Deployment)
= システムの仕事(お店の棚に商品を並べて、公開すること)
5. 【重要】3つの魔法の呪文(基本動作)
※ この3つを順番に唱えるだけで、サイトは更新されます。
git add .
「散らばった変更ファイルを、発送用の箱に集める」イメージです。
(専門用語で「ステージする」と言います)
git commit -m "update"
「箱にフタをして、ラベル(メッセージ)を貼る」作業です。
git push origin main
「トラックへ積み込んで出荷する」作業です。
→ これをすると、Cloudflareが自動検知して、数分でネット上のページが書き換わります。
🤔 「デプロイ」ってなに?
よく聞く「デプロイ」と、この「3つの作業」の関係は以下の通りです。
つまり、「3. 送信する(Push)」さえすれば、あとはシステムが勝手にデプロイ(公開)してくれます!
🆘 緊急時の呪文(強制上書き)
git reset --hard HEAD^
git push -f origin main