Git 基礎講座：VSCodeで学ぶバージョン管理とGitHub連携

問題 1: 新しいフォルダを作成してローカルリポジトリを作る

手順:

1. Windowsでデスクトップに自分の名前で新しいフォルダーを作成する（例: yusei）
2. そのフォルダーをVS Codeで開く
3. ソース管理ビュー（Ctrl + Shift + G）を開く
4. 「リポジトリを初期化する」ボタンをクリック

完了したら: フォルダー内に .git フォルダーが作成されていることを確認する

問題 2: Git管理されているフォルダーを通常のフォルダーに戻す

目的:.gitフォルダーを誤って削除するとGitの管理下から外れてしまうので注意する

手順:

1. 問題1のフォルダーをWindowsのエクスプローラで開く
2. .gitフォルダーが表示されていない場合はエクスプローラーで隠しファイルを表示する
   • 表示」タブの「隠しファイル」にチェックを入れる
3. .gitフォルダーを削除する
   • エクスプローラーで .git フォルダーを右クリックし、「削除」を選択
4. VS Codeのソース管理ビューを確認する
   • ソース管理ビューを開く
   • 「現在開いているフォルダーにはGitリポジトリがありません。…」と表示されていることを確認

問題 3: Git管理を解除した後に再度リポジトリ化

手順:

1. 問題3 を実施し、Git管理を解除する
2. VS Codeのソース管理ビューを開く
3. 「リポジトリを初期化する」ボタンをクリック
4. 新しいテキストファイルを作成し、適当な内容を書いて保存する
5. ソース管理のアイコンに①が表示され、Gitで追跡されていることを確認する。

完了したら: .git フォルダーが再び作成され、Git管理が有効になっていることを確認する。

問題 4: フォルダはGitの管理対象でないことを確認

手順:

1. フォルダの中に新しいフォルダを作成する
2. VS Codeのソース管理ビューを開く
3. フォルダはGitの管理対象でないことを確認する

問題 5: ファイルの移動は「削除と作成」として認識されることを確認

手順:

1. 問題4で作成したフォルダの中にファイルを作成する
2. VS Codeのソース管理ビューを開く
3. ファイルはGitの管理対象であることを再度確認する
4. 問題3のファイルを問題4で作成したフォルダの中に移動する
5. VS Codeのソース管理ビューを開くとファイルの削除（D ）と新規作成（U : 未追跡）として記録されていることを確認する
6. ファイルをgitの管理対象のフォルダ外に移動するとファイルの削除として記録されていることを確認する

問題 6: コミット前に

ファイルの内容をもとに戻せば変更とはみなされないことを確認

手順:

問題 1: 新しいファイルを作成してコミットする

手順:

1. 新しいファイル（例: test.txt）を作成し、適当な文字列を書き込む
2. ソース管理ビュー（Ctrl + Shift + G）を開く
3. 「U」（未追跡）と表示されていることを確認
4. 「+」ボタンをクリックしてステージングする（ステージングされている変更が①になる）
5. コミットメッセージを入力（例: "初回コミット"）
6. 「✓」（チェックマーク）をクリック（またはCtrl + Enter）してコミット
7. ステータスバーの「Git Graph」と書いてある部分をクリックしてGit Graphのタブを表示してコミットされていることを確認する

問題 2: 既存ファイルを変更してコミットする

目的: 変更を加え、コミットする流れを理解する。

手順:

1. 問題 1 で作成したファイル を開く
2. 文字列を書き込む
3. ソース管理ビューを開き、「M」（変更済み）と表示されていることを確認
4. 「+」ボタンをクリックしてステージングする
5. コミットメッセージを入力（例: "見出しを追加"）
6. 「✓」をクリックしてコミット
7. Git Graphで履歴に記録されている（枝が伸びた）ことを確認する

問題 3: ファイルを削除してコミットする

目的: ファイル削除のコミットを体験する。

手順:

1. これまで使用してきたファイルを削除する
2. ソース管理ビューを開く
3. 「D」（削除）と表示されていることを確認
4. 「+」ボタンをクリックしてステージングする
5. コミットメッセージを入力（例: "test.txt を削除"）してコミット
6. Git Graphで履歴に記録されていることを確認する

問題 4: 複数の操作をまとめてコミットする

手順:

1. 複数のファイルを作成する
2. ソース管理ビューを開く
3. Shiftキーを推しながら複数ファイルを選択してステージングする
4. コミットメッセージを入力（例: "test1.txt, test2.txtを作成"）してコミット
5. Git Graphで履歴に記録されていることを確認する

コミットの頻度は？　最初は実行前、徐々に機能ごとの塊でコミットするように持って行く

問題 1: 変更を破棄する（ステージング前）

目的: ファイルの変更をコミット前に、ステージングせずに元に戻す方法を学ぶ。

手順:

1. 新しいテキストファイルを作成する
2. ステージングしてコミットする
3. ファイルを開いて適当な文字列を記入して保存
4. ソース管理ビューを開き、「M」（変更済み）と表示されていることを確認
5. ファイル名の横にある「M」から左に2つ目の↶アイコンをクリック
6. 確認メッセージが出るので「変更を破棄」をクリック
7. 変更が元に戻り、ファイルが元の状態に戻っていることを確認

問題 2: --hard リセット（すべての変更を取り消す）

目的: コミット後に変更を完全に取り消し、ファイルも元の状態に戻す方法を学ぶ。

手順:

1. Git Graphで戻したいコミットを右クリックし、「Reset current branch to this commit」を選択
2. 確認メッセージが表示されたら「Hard - Discard all changes」を選択して「Yes, reset」をクリック
3. ファイルを開き変更がすべて削除されていることを確認

問題 1: 新しいブランチを作成する

目的: VS CodeのGUIを使って、新しいブランチを作成する。

手順:

1. VS Codeで新しいフォルダー（例: branch_practice）を作成し、開く
2. index.html を作成し、以下のコードを記述 <h1>ブランチの練習</h1>
3. ソース管理ビュー（Ctrl + Shift + G）を開き、変更をステージングしてコミット
   • コミットメッセージ: "初回コミット"
4. VS Codeの左下にあるブランチ名（main）をクリック
5. 「ブランチの作成」を選択
6. 新しいブランチ名を入力（例: feature-branch）
7. 「ブランチを作成してチェックアウト」を選択
8. 左下のブランチ名が feature-branch に変わっていることを確認

ブランチを作ることで、開発を安全かつ効率的に進める ことができます。
特にチーム開発では、ブランチを適切に管理することで 作業の分担が明確になり、競合を最小限に抑え、スムーズなリリースが可能になります。

「ブランチを作るかどうか？」を迷ったら、基本的には 「作るべき」 です！

問題 2: ブランチを切り替える

目的: 別のブランチに切り替え、変更履歴が独立していることを確認する。

手順:

1. 現在の feature-branch で index.html を開き、以下のコードを追加 <p>新しい機能を追加中</p>
2. ソース管理ビューで変更をコミット
   • コミットメッセージ: "新機能の追加"
3. Git Graphでブランチ名 feature-branch をダブルクリックするとブランチが切り替わる
4. 「main」に切り替えindex.html を開き、変更が反映されていないことを確認
5. 「feature-branch」に切り替えindex.html を開き、変更が反映されていることを確認

feature-branch での変更が main には影響を与えず、それぞれのブランチが独立していることを確認。

現在のブランチを認識することは、 誤ったブランチでの作業を防ぐ、チーム開発をスムーズに進める、意図しないデプロイやトラブルを防ぐ ために非常に重要です。
作業前や重要な操作の前には、ブランチを確認する習慣をつける ことをおすすめします！

問題 3: ブランチの名前を変更する

目的: 既存のブランチの名前を変更する。

手順:

1. 現在の feature-branch を開く
2. 左下のブランチ名 feature-branch をクリック
3. 「Rename Branch」を選択
4. 新しい名前（例: new-feature）を入力
5. 左下のブランチ名が new-feature に変わったことを確認
6. Git Graphの名前も変わっていることを確認

チームで開発する場合、統一されたブランチ命名規則 を守ることで、コード管理が簡単になり、チーム全員が理解しやすくなります。「このブランチ名で、どんな変更をしているのか？」 が 一目で分かるようにする ことを意識しましょう！

問題 4: ブランチを削除する

目的: 使い終わったブランチを削除する。

手順:

1. 現在のブランチを main に切り替える
2. ブランチ名をクリック
3. 「Delete Branch」を選択
4. 確認ダイアログで「Yes, delete」を選択しマージされていないことの確認が出たら「Yes, force delete branch」をクリック
5. ブランチリストを確認し、new-feature が削除されていることを確認

使い終わったブランチは、マージ後に削除するのが推奨されます。整理することで、プロジェクトの管理がスムーズになり、誤ったブランチの使用を防ぐことができます。ただし、メンテナンスが必要なブランチについては慎重に判断しましょう。

問題 1: 新しいブランチを作成してマージ

目的: 新しいブランチを作成し、変更を加えた後、メインブランチ（main）にマージする方法を学ぶ。

手順:

1. Gitの管理対象フォルダにindex.html を作成し、以下のコードを記述して保存。 <h1>マージの練習</h1>
2. ソース管理ビューを開き、ファイルをステージングし、コミット（例: "index.html 初回作成"）。
3. ブランチを作成する。
   • 左下のブランチ名（main）をクリック。
   • 「新しいブランチを作成」を選択し、名前を feature-branch にする。
   • 新しいブランチに切り替えたことを確認。
4. index.html を編集し、以下を追加して保存。 <p>新しいブランチでの変更</p>
5. ソース管理ビューで変更をステージングし、コミット（例: "feature-branch で変更"）。
6. Git Graph（拡張機能）を開く。
7. ブランチ名をダブルクリックして切り替えmain を選択。
8. Git Graphで feature-branch を右クリックし、「Merge into Current Branch（現在のブランチにマージ）」を選択。
9. 確認画面で「Yes, merge」を選択。
10. Git Graphでmain ブランチに feature-branch の変更が統合されていることを確認。

問題 2: 既存のブランチをマージ

目的: 既存の別のブランチを main にマージする方法を学ぶ。

手順:

1. feature-branch を選択する
2. style.css を作成し、以下のコードを記述。 body { background-color: lightgray; }
3. ソース管理ビューで変更をステージングし、コミット（例: "CSSファイルを追加"）。
4. style.css に以下のコードを追加。 h1 { color: blue; }
5. ソース管理ビューで変更をステージングし、コミット（例: "見出しの色を変更"）。
6. Git Graphを開く。
7. main ブランチに切り替える。
8. Git Graphでfeature-branchブランチを右クリックし、「Merge into Current Branch」を選択。
9. ソース管理ビューで style.css の変更が main に統合されたことを確認。

問題 3: 複数のブランチを連続してマージ

目的: main に対して、複数の異なるブランチを順番にマージする。

手順:

1. script.js を作成し、以下のコードを記述。 console.log("初期スクリプト");
2. ソース管理ビューで変更をステージングし、コミット（例: "スクリプトを追加"）。
3. 新しいブランチ feature-1 を作成。
4. script.js に以下のコードを追加。 console.log("機能1の追加");
5. 変更をコミット（例: "feature-1 の変更"）。
6. 新しいブランチ feature-2 を作成。
7. script.js に以下のコードを追加。 console.log("機能2の追加");
8. 変更をコミット（例: "feature-2 の変更"）。
9. Git Graphを開く。
10. main に切り替え、feature-1 をマージ。
11. main に切り替え、feature-2 をマージ。
12. Git Graphで script.js の変更が main に統合されたことを確認。
13. 完了したら、script.js に両方の変更が反映されていることを確認。

できるだけシンプルなマージを心がけるべき！
特に 不要なブランチのマージを避け、履歴を明確に保つことが重要です。シンプルなマージを行うことで、コンフリクトの発生を防ぎ、履歴が見やすくなり、開発がスムーズに進みます。

問題 1: 2つの異なるブランチで同じ行を変更する

目的: ブランチを作成し、同じ行を変更するとコンフリクトの原因になることを学ぶ。

手順:

1. 新しいフォルダー（例: conflict_practice）を作成し、ローカルリポジトリにする。
2. index.html を作成し、以下のコードを記述。 <h1>Gitのコンフリクト練習</h1>
3. ソース管理ビューを開き、ファイルをステージングしてコミット（例: "初回コミット"）。
4. 新しいブランチ（例: feature-branch）を作成し、切り替え。
5. index.html を編集し、以下のように文言を変更。 <h1>コンフリクトを試してみよう！</h1>
6. 変更をステージングし、コミット（例: "ブランチで変更"）。
7. メインブランチ（main）に戻る。
8. index.html を開き、以下のように文言を変更。 <h1>メインブランチで変更</h1>
9. 変更をステージングし、コミット（例: "メインブランチで変更"）。
10. 完了したら、feature-branch と main で、同じ index.html の <h1> 部分が異なる状態になっていることを確認する。

問題 2: コンフリクトが起こる前の状態を確認する

目的: ブランチをマージする前に、コンフリクトの原因になることを理解する。

手順:

1. Git Graphでmain をダブルクリックしてmainにいる状態にする。
2. feature-branch の上で右クリック。
3. 「…」（三点リーダー）をクリックし、「merge into current branch」を選択し確認画面で「Error:Unable to Merge Branch」が表示されたら「Dismiss」をクリックする。
4. index.htmlを開く。
5. 「どちらの変更を採用するか」のオプションが表示されることを確認。
6. --hard リセット（すべての変更を取り消す）でマージをキャンセルする

問題 3: マージする前にコンフリクトを回避する

目的: コンフリクトが発生する前に、変更を整理しておくことができることを学ぶ。

手順:

1. main にいる状態で、index.html の <h1> を feature-branch と同じに変更。 <h1>コンフリクトを試してみよう！</h1>
2. 変更をステージングし、コミット（例: "コンフリクト回避の変更"）。
3. feature-branch をmain にマージ。
4. コンフリクトが発生しないことを確認。
5. 完了したら、事前に変更を揃えておくことで、コンフリクトを回避できることを理解する。

問題 1: コンフリクトを発生させて解決する

目的: コンフリクトを発生させ、VS CodeのGUIで解決する手順を学ぶ。

手順:

1. 新しいフォルダー（例: conflict_resolution）を作成し、VS Codeで開く。
2. index.html を作成し、以下のコードを記述。 <h1>Gitのコンフリクト練習</h1>
3. ソース管理ビューを開き、ファイルをステージングしてコミット（例: "初回コミット"）。
4. 新しいブランチ（例: feature-branch）を作成し、切り替え。
5. index.html を編集し、以下のように変更。 <h1>コンフリクトを解決しよう！（Featureブランチ）</h1>
6. 変更をステージングし、コミット（例: "Featureブランチで変更"）。
7. メインブランチ（main）に戻る。
8. index.html を開き、以下のように変更。 <h1>コンフリクトを解決しよう！（Mainブランチ）</h1>
9. 変更をステージングし、コミット（例: "Mainブランチで変更"）。
10. ソース管理ビューを開き、メインブランチで feature-branch をマージ。
11. 「…」（三点リーダー）→「ブランチをマージ」→ feature-branch を選択。
12. コンフリクトが発生し、「どちらの変更を採用するか」のオプションが表示されることを確認。
13. 完了したら、コンフリクトが発生し、解決する必要がある状態になっていることを確認。

問題 2: コンフリクトをGUIで解消する

目的: VS CodeのGUIでコンフリクトを手動で解決する方法を学ぶ。

手順:

1. コンフリクトが発生した状態のまま、index.html を開く。
2. VS Codeが表示する「コンフリクト解決オプション」を確認。
3. 「受け入れる変更を選択」を選び、両方の変更をマージする。 <h1>コンフリクトを解決しよう！（Featureブランチ & Mainブランチ）</h1>
4. 修正後、ファイルを保存。
5. ソース管理ビューで変更をステージング。
6. コミットメッセージを入力（例: "コンフリクト解決"）。
7. 「✓」をクリックしてコミット。
8. Git Graph（拡張機能）で履歴を確認し、マージが成功したことを確認。
9. 完了したら、マージコミットが作成され、コンフリクトが解決されたことを確認。

問題 3: 「現在の変更を受け入れる」と「競合の変更を受け入れる」の違いを理解する

目的: 片方の変更のみを適用する場合の挙動を学ぶ。

手順:

1. 問題1の状態を再度作り、コンフリクトを発生させる。
2. index.html を開き、「現在の変更を受け入れる」を選択。
3. 修正後、ファイルを保存。
4. ソース管理ビューで変更をステージングし、コミット（例: "現在の変更のみ適用"）。
5. Git Graph で履歴を確認し、feature-branch の変更が取り込まれていないことを確認。
6. 同じ手順で「競合の変更を受け入れる」を試し、今度は main の変更が取り込まれないことを確認。
7. 完了したら、どちらの変更を選択するかによって、コミット内容が変わることを理解する。

問題 4: 異なるファイルでコンフリクトが発生する場合

目的: 同じファイルではなく、異なるファイルでの変更が競合するパターンを学ぶ。

手順:

1. index.html と style.css を作成し、それぞれ以下の内容を書く。 <!-- index.html --> <h1>Gitのコンフリクト練習</h1> <link rel="stylesheet" href="style.css"> /* style.css */ body { background-color: white; }
2. ソース管理ビューを開き、ステージング & コミット（例: "初回コミット"）。
3. 新しいブランチ（例: feature-style）を作成し、切り替え。
4. index.html を変更。 <h1>Gitのコンフリクト練習 - Featureブランチ</h1>
5. 変更をステージング & コミット（例: "Featureブランチの変更"）。
6. style.css を変更。 body { background-color: lightgray; }
7. 変更をステージング & コミット（例: "Featureブランチのスタイル変更"）。
8. main に戻り、index.html と style.css の両方を変更。 <h1>Gitのコンフリクト練習 - Mainブランチ</h1> body { background-color: lightblue; }
9. 変更をステージング & コミット（例: "Mainブランチの変更"）。
10. feature-style をマージしようとする。
11. コンフリクトが発生しないことを確認。
12. Git Graphで履歴を確認し、両方の変更が取り込まれたことを確認。
13. 完了したら、異なるファイルでの変更はコンフリクトにならず自動的にマージされることを理解する。

問題 1: GitHubのリモートリポジトリを作成し、VS Codeに接続する

目的: GitHubにリポジトリを作成し、VS Codeからリモートリポジトリを設定する。

手順:

1. GitHubにアクセスし、ログインする。
2. 右上の「+」ボタンをクリックし、「New repository」を選択。
3. リポジトリ名を入力（例: vscode-github-practice）。
4. 「Public」または「Private」を選択。
5. 「Create repository」をクリック。
6. VS Codeで新しいフォルダー（例: github_practice）を作成し開く。
7. ソース管理ビュー（Ctrl + Shift + G）を開き、「リポジトリの初期化」ボタンをクリック。
8. 「…」（三点リーダー）をクリックし、「リモートを追加」を選択。
9. GitHubのリポジトリURLを入力（例: https://github.com/your-username/vscode-github-practice.git）。
10. リモートの名前を origin に設定。
11. 完了したら、VS Codeのソース管理ビューでリモートリポジトリが設定されていることを確認。

問題 2: ファイルを作成し、GitHubにプッシュする

目的: ローカルで作成したファイルをGitHubにアップロードする。

手順:

1. index.html を作成し、以下の内容を記述。 <h1>Hello GitHub</h1>
2. ソース管理ビューを開き、ファイルが「U（未追跡）」と表示されていることを確認。
3. 「+」ボタンをクリックしてステージング。
4. コミットメッセージを入力（例: "初回コミット"）。
5. 「✓」をクリックしてコミット。
6. 「…」（三点リーダー）をクリックし、「変更をプッシュ」を選択。
7. プッシュが完了したら、GitHub上で index.html がアップロードされていることを確認。
8. 完了したら、GitHubのリポジトリページを開き、index.html が正しくプッシュされていることを確認。

問題 3: GitHub上で変更を加え、VS Codeにプルする

目的: GitHubで変更を行い、VS Codeで最新の状態を取得する。

手順:

1. GitHubのリポジトリページを開く。
2. index.html をクリックし、「Edit」ボタン（鉛筆マーク）を押す。
3. 新しい行を追加。 <p>GitHubで変更しました</p>
4. 「Commit changes」をクリックして変更を確定。
5. VS Codeに戻り、「…」（三点リーダー）をクリックし、「プル」を選択。
6. 変更がローカルに反映されていることを確認。
7. 完了したら、index.html にGitHubで追加した変更がローカルに反映されていることを確認。

問題 4: 新しいブランチを作成し、GitHubにプッシュする

目的: VS Codeで新しいブランチを作成し、GitHubにプッシュする。

手順:

1. ソース管理ビューを開く。
2. 現在のブランチ名（例: main）をクリック。
3. 「新しいブランチを作成」オプションを選択。
4. 新しいブランチ名を入力（例: feature-branch）。
5. ブランチを切り替えて、新しいファイル feature.txt を作成。
6. 適当な内容を記述し、コミット。
7. 「変更をプッシュ」をクリックし、GitHub上に新しいブランチが作成されていることを確認。
8. 完了したら、GitHubの「Branches」タブに feature-branch が追加されていることを確認。

問題 1: GitHubのリモートリポジトリを作成し、VS Codeに接続する

目的: GitHubにリポジトリを作成し、VS Codeからリモートリポジトリを設定する。

手順:

1. GitHubにアクセスし、ログインする。
2. 右上の「+」ボタンをクリックし、「New repository」を選択。
3. リポジトリ名を入力（例: vscode-github-practice）。
4. 「Public」または「Private」を選択。
5. 「Create repository」をクリック。
6. VS Codeで新しいフォルダー（例: github_practice）を作成し開く。
7. ソース管理ビュー（Ctrl + Shift + G）を開き、「リポジトリの初期化」ボタンをクリック。
8. 「…」（三点リーダー）をクリックし、「リモートを追加」を選択。
9. GitHubのリポジトリURLを入力（例: https://github.com/your-username/vscode-github-practice.git）。
10. リモートの名前を origin に設定。
11. 完了したら、VS Codeのソース管理ビューでリモートリポジトリが設定されていることを確認。

問題 2: ファイルを作成し、GitHubにプッシュする

目的: ローカルで作成したファイルをGitHubにアップロードする。

手順:

1. index.html を作成し、以下の内容を記述。 <h1>Hello GitHub</h1>
2. ソース管理ビューを開き、ファイルが「U（未追跡）」と表示されていることを確認。
3. 「+」ボタンをクリックしてステージング。
4. コミットメッセージを入力（例: "初回コミット"）。
5. 「✓」をクリックしてコミット。
6. 「…」（三点リーダー）をクリックし、「変更をプッシュ」を選択。
7. プッシュが完了したら、GitHub上で index.html がアップロードされていることを確認。
8. 完了したら、GitHubのリポジトリページを開き、index.html が正しくプッシュされていることを確認。

問題 3: GitHub上で変更を加え、VS Codeにプルする

目的: GitHubで変更を行い、VS Codeで最新の状態を取得する。

手順:

1. GitHubのリポジトリページを開く。
2. index.html をクリックし、「Edit」ボタン（鉛筆マーク）を押す。
3. 新しい行を追加。 <p>GitHubで変更しました</p>
4. 「Commit changes」をクリックして変更を確定。
5. VS Codeに戻り、「…」（三点リーダー）をクリックし、「プル」を選択。
6. 変更がローカルに反映されていることを確認。
7. 完了したら、index.html にGitHubで追加した変更がローカルに反映されていることを確認。

問題 4: 新しいブランチを作成し、GitHubにプッシュする

目的: VS Codeで新しいブランチを作成し、GitHubにプッシュする。

手順:

1. ソース管理ビューを開く。
2. 現在のブランチ名（例: main）をクリック。
3. 「新しいブランチを作成」オプションを選択。
4. 新しいブランチ名を入力（例: feature-branch）。
5. ブランチを切り替えて、新しいファイル feature.txt を作成。
6. 適当な内容を記述し、コミット。
7. 「変更をプッシュ」をクリックし、GitHub上に新しいブランチが作成されていることを確認。
8. 完了したら、GitHubの「Branches」タブに feature-branch が追加されていることを確認。

問題 1: リモートの変更をプルする

目的: VS CodeのGUIを使って、リモートの変更をローカルに取り込む方法を理解する。

手順:

1. GitHubなどのリモートリポジトリを準備する。
2. 事前に別のPCやブラウザ上で、リポジトリに変更を加えてコミットしておく。
   • 例: README.md に「リモートで追加した行」を追加。
3. VS Codeで対象のリポジトリを開く。
4. ソース管理ビュー（Ctrl + Shift + G）を開く。
5. リモートに新しい変更があることを確認。
6. ステータスバーの「↓」アイコン（プルボタン）がアクティブになっているか確認。
7. 「↓」（プル）ボタンをクリック。
8. 変更がローカルに取り込まれることを確認。
9. README.md にリモートの変更が反映されていることを確認。
10. 完了したら、リモートの変更がローカルに適用されていることを確認する。

問題 2: プル時の競合を体験する

目的: 同じ行をリモートとローカルで編集した場合にコンフリクトが発生することを理解する。

手順:

1. 事前にGitHubなどで index.html を作成し、以下の内容でコミットする。 <h1>Git プルの練習</h1> <p>この文章はリモートで追加されました。</p>
2. VS Codeで同じリポジトリを開く。
3. ローカルで index.html を開き、同じ行を修正して保存。 <p>この文章はローカルで変更されました。</p>
4. ローカルの変更をコミットせず、そのまま「↓」（プル）ボタンをクリック。
5. コンフリクトが発生することを確認。
6. ソース管理ビューに「マージの競合があります」と表示される。
7. index.html を開くと、リモートとローカルの変更がどちらも表示されている。
8. 競合解決ツールを使って適切な変更を選択し、ファイルを保存。
9. ソース管理ビューで「マージの解決を完了」をクリックし、コミット。
10. 完了したら、プル時の競合を体験し、解決できることを確認する。

問題 3: リモートの変更をプルせずにローカルで編集すると？

目的: ローカルの変更とリモートの変更が競合しない場合、プルがどのように動作するかを理解する。

手順:

1. GitHubで script.js を作成し、以下の内容でコミットする。 console.log("リモートの変更");
2. VS Codeで同じリポジトリを開く。
3. ローカルで style.css を作成し、適当なCSSを記述。 body { background-color: lightgray; }
4. 「↓」（プル）ボタンをクリック。
5. コンフリクトが発生しないことを確認。
6. script.js の変更がローカルに取り込まれ、style.css の変更はそのまま。
7. 完了したら、競合しない場合、プルがスムーズに適用されることを確認する。

問題 4: プルしてからプッシュする習慣をつける

目的: ローカルで変更を加えてプッシュする前に、必ずリモートの変更を取り込む習慣を身につける。

手順:

1. GitHubで config.json を作成し、以下の内容でコミット。 { "version": "1.0" }
2. VS Codeで同じリポジトリを開く。
3. ローカルで config.json を開き、以下の変更を加える。 { "version": "1.1" }
4. ローカルの変更をコミットする。
   • 「+」ボタンをクリックし、ステージング。
   • 「アップデートしました」とコミットメッセージを入力し、コミット。
5. そのままプッシュせずに、「↓」（プル）ボタンをクリック。
6. リモートに新しい変更があった場合、競合が起こるかどうかを確認。
7. 競合がない場合、そのまま config.json が更新される。
8. 競合がある場合、マージコンフリクトの解決を行う（問題 2 参照）。
9. プルが成功した後、「↑」（プッシュ）ボタンをクリックし、リモートに変更を反映。
10. 完了したら、プルしてからプッシュすることで、最新の状態で作業できることを確認する。

問題 1: 新しいブランチを作成し、変更を加えてプルリクエストを作成する

目的: 直接 main を編集せず、新しいブランチで作業し、プルリクエストを作成する流れを学ぶ。

手順:

1. VS Codeでリモートリポジトリをクローンする（GitHub上に既存のリポジトリがあることを前提）。
2. ソース管理ビュー（Ctrl + Shift + G）を開く。
3. 現在のブランチ名をクリックし、「新しいブランチを作成」を選択。
4. ブランチ名を入力（例: feature-update）し、新しいブランチに切り替える。
5. index.html を開き、以下の変更を加える。 <p>プルリクエストのテスト</p>
6. ソース管理ビューで変更が検出されていることを確認。
7. 「+」ボタンをクリックし、ステージングする。
8. コミットメッセージを入力（例: "プルリクエストのための変更"）し、「✓」をクリックしてコミット。
9. 「変更をプッシュ」ボタンをクリックし、リモートへプッシュ。
10. VS Codeの「GitHub拡張機能」を開き、「プルリクエストを作成」ボタンをクリック。
11. プルリクエストのタイトルと説明を入力し、作成する。
12. 完了したら、GitHub上でプルリクエストが作成されていることを確認。

問題 2: プルリクエストをレビューし、マージする

目的: プルリクエストをレビューし、問題がなければ main にマージする。

手順:

1. GitHubのリポジトリページを開き、「Pull requests」タブをクリック。
2. 作成したプルリクエストを選択。
3. 「Files changed」タブで変更内容を確認。
4. 「Review changes」ボタンをクリックし、「Approve」を選択。
5. 「Merge pull request」ボタンをクリックし、main にマージ。
6. 「Delete branch」ボタンが表示されたら、クリックして不要なブランチを削除する。
7. 完了したら、main に変更が反映され、トピックブランチが削除されていることを確認。

問題 3: ローカルのブランチを整理する

目的: マージ後に不要になったローカルのトピックブランチを削除し、最新の main を取得する。

手順:

1. VS Codeのブランチメニューを開く。
2. main に切り替える。
3. ソース管理ビューの「…」（三点リーダー）をクリックし、「リモートからプル」を実行。
4. 「ブランチを削除」メニューを開き、feature-update ブランチを削除。
5. ソース管理ビューで不要なブランチが削除されたことを確認。
6. 完了したら、feature-update が削除され、リポジトリが整理されていることを確認。

問題 1: トピックブランチを作成して作業する

目的: main ブランチを直接編集せずに、新しいトピックブランチを作成し、作業する方法を学ぶ。

手順:

1. GitHubに新しいリポジトリを作成し、VS Codeでクローンする。
2. ソース管理ビュー（Ctrl + Shift + G）を開く。
3. 現在のブランチ名（通常は main）をクリック。
4. 「新しいブランチを作成」ボタンをクリック。
5. 新しいブランチ名（例: feature-branch）を入力し、作成。
6. 作業用のファイル（例: feature.txt）を作成し、適当な内容を書く。
7. ファイルをステージングし、コミットする。
8. 「変更をプッシュ」ボタンをクリックし、GitHubへプッシュ。
9. 完了したら、GitHub上で feature-branch が作成され、変更が反映されていることを確認する。

問題 2: プルリクエストを作成する

目的: トピックブランチの作業が完了したら、GitHub上でプルリクエストを作成する方法を学ぶ。

手順:

1. GitHubのリポジトリページを開く。
2. 「Pull requests」タブを開く。
3. 「New pull request」ボタンをクリック。
4. 比較対象を feature-branch（作業したブランチ）に変更。
5. ベースブランチが main であることを確認。
6. 「Create pull request」ボタンをクリック。
7. タイトルと説明を記入し、「Create pull request」をクリック。
8. 完了したら、プルリクエストが作成され、GitHub上でレビュー可能な状態になっていることを確認する。

問題 3: プルリクエストをマージし、ブランチを削除する

目的: プルリクエストをマージし、不要になったトピックブランチを整理する方法を学ぶ。

手順:

1. GitHubのプルリクエストページを開く。
2. 「Merge pull request」ボタンをクリック。
3. 「Confirm merge」をクリック。
4. 「Delete branch」ボタンが表示されるのでクリック。
5. VS Codeでソース管理ビューを開く。
6. 「...」（三点リーダー）をクリックし、「プル（fetch and pull）」を選択。
7. ローカルの feature-branch も削除する。
8. ブランチ名をクリックし、「ブランチを削除」を選択。
9. main ブランチに戻り、最新の状態になっていることを確認。
10. 完了したら、GitHub上で feature-branch が削除され、ローカルリポジトリも整理されていることを確認する。

問題 1: .gitignore を作成し、特定のファイルをGit管理から除外する

目的: .gitignore を作成し、指定したファイルをGitの管理から除外する。

手順:

1. VS Codeで新しいフォルダー（例: gitignore_practice）を作成し、開く。
2. ソース管理ビュー（Ctrl + Shift + G）を開く。
3. 「リポジトリの初期化」ボタンをクリックし、Gitを初期化。
4. 新しいファイルを作成し、名前を .gitignore にする。
5. 以下の内容を記述して保存。 .vscode/ node_modules/ *.log dist/
6. 新しいフォルダー node_modules を作成し、適当なファイルを入れる。
7. 新しいファイル error.log を作成し、適当なエラーメッセージを記述。
8. ソース管理ビューを開き、node_modules や error.log が追跡されていないことを確認。
9. index.js を作成し、適当なJavaScriptコードを書き、ソース管理ビューで追跡されていることを確認。
10. 完了したら、.gitignore に指定したファイルやフォルダーがGitの管理対象外になっていることを確認。

問題 2: .gitignore に後から追加したファイルが除外されないケースを確認する

目的: .gitignore に後から追加しても、すでに追跡されているファイルはGitの管理から除外されないことを理解する。

手順:

1. 新しいファイル config.json を作成し、以下の内容を記述。 { "apiKey": "12345", "secret": "abcd" }
2. ソース管理ビューで config.json が追跡対象になっていることを確認。
3. config.json をコミット（例: "config.json を追加"）。
4. .gitignore に以下の行を追加。 config.json
5. ソース管理ビューを開く。
6. config.json が追跡対象のままであることを確認。
7. .gitignore に追加するだけでは、すでに追跡されているファイルがGitの管理から除外されないことを理解する。
8. 完了したら、.gitignore に追加するだけでは追跡されているファイルが除外されないことを確認。

問題 3: .gitignore に追加したファイルをGitの管理から除外する

目的: .gitignore に後から追加したファイルをGitの管理から解除する方法を理解する。

手順:

1. 問題 2 の状態から開始。
2. ソース管理ビューで config.json が追跡され続けていることを確認。
3. 「…」（三点リーダー）をクリックし、「リポジトリの変更を表示」を選択。
4. config.json を右クリックし、「追跡を解除」するオプションがあるか確認。
5. VS CodeのGUIでは追跡を解除できないため、「手動で削除 → .gitignore 追加 → 再作成」の流れを実施。
6. config.json を削除する。
7. コミットする（例: "config.json を削除"）。
8. config.json を再作成。
9. ソース管理ビューで追跡されていないことを確認。
10. 完了したら、.gitignore に追加したファイルを後からGitの管理対象から外すには、手動で削除し、再作成する必要があることを確認。

問題 1: 悪いコミットメッセージを修正する

目的: 分かりにくいコミットメッセージを、適切な形式に書き直す。

手順以下の悪いコミットメッセージを確認し、適切な形式に修正してください。

悪い例1

修正

良い例1

ヘッダーのレイアウトが崩れる問題を修正

悪い例2

ちょっと追加した

良い例2

新しいフッターセクションを追加

悪い例3

バグ修正

良い例3

ログイン時に認証エラーが発生する問題を修正

問題 1: Reset（履歴を巻き戻す）

目的: Resetを使って履歴を過去のコミットに戻す方法を理解する。

手順:

1. 新しいフォルダー（例: reset_revert_practice）を作成し、VS Codeで開く
2. index.html を作成し、以下の内容を記述 <h1>Git Reset vs Revert</h1>
3. ソース管理ビュー（Ctrl + Shift + G）を開き、ステージング → コミット（例: "HTMLファイル追加"）
4. 新しい変更を加える <p>Resetの練習中</p>
5. ステージング → コミット（例: "Resetの追加"）
6. Git Graph（拡張機能）を開く
7. 直前のコミットを右クリックし、「Reset current branch on this commit」→ --hard を選択
8. 確認メッセージが表示されたら「OK」をクリック
9. VS Codeのソース管理ビューを開き、追加した <p> タグが消えていることを確認

完了したら: --hard で履歴が巻き戻され、変更が完全に消えたことを確認する。

問題 2: Revert（履歴を打ち消すコミットを作成）

目的: Revertを使って履歴を保持しつつ、過去のコミットを打ち消す方法を理解する。

手順:

1. style.css を作成し、以下の内容を記述 body { background-color: lightblue; }
2. ソース管理ビューを開き、ステージング → コミット（例: "CSS追加"）
3. 新しい変更を加える p { color: red; }
4. ステージング → コミット（例: "赤い文字の追加"）
5. Git Graph（拡張機能）を開く
6. 「赤い文字の追加」コミットを右クリックし、「Revert commit」を選択
7. 自動でRevertコミットが作成されることを確認
8. ソース管理ビューを確認し、変更が打ち消された新しいコミットができていることを確認

完了したら: Revertを使うことで過去の変更を取り消しつつ、履歴が残ることを理解する。

問題 3: ResetとRevertの使い分けを考える

目的: ResetとRevertの違いを理解し、適切な場面で使い分けられるようになる。

質問: 以下のシナリオで適切なGit操作はどれか？ Reset（--hard）またはRevertを選択し、その理由を説明してください。

1. プッシュ前の作業で間違ったコミットを削除したい
2. プッシュ済みのコミットの変更を取り消したい
3. 過去の変更をなかったことにしたいが、履歴は残したい
4. チームメンバーが使っているリモートリポジトリの履歴を変更したい

回答:

1. Reset（--hard） → プッシュ前なら履歴を巻き戻しても問題なし
2. Revert → プッシュ後は履歴を変更しない方が安全
3. Revert → 履歴を保持しつつ変更を取り消せる
4. Reset（--hard）はNG！ → チームメンバーに影響が出るためRevert推奨