VSCode の Git 機能 を

利用したチーム開発手法

1. 導入編

Git・Github・VSCodeのGit機能について知ろう！

1-1. Gitとは何か？

1-1. Gitとは何か？

1-1. Gitとは何か？

Gitとは何か？

Git（ギット）は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。
出典: https://ja.wikipedia.org/wiki/Git

1-1. Gitとは何か？

分散型……バージョン管理システム……？

1-1. Gitとは何か？

ゲームのセーブデータみたいに

今の状態を保存しておくもの

これをリポジトリ、と呼びます

1-1. Gitとは何か？

作業が一段落したら、今の状態を保存します

履歴が溜まっていきますね
すると……？

1-1. Gitとは何か？

いつ、何の機能を実装したのか分かる

履歴には説明文をつけるので、
分かりやすいです

1-1. Gitとは何か？

バグが発生した時も、元に戻せる

過去のデータに、一瞬で元通り

1-1. Gitとは何か？

変なデータ、必要なし

  • program.c
  • program(1).c
  • program(2).c
  • program(3)_これが最終版.c
  • program_提出用.c
1-1. Gitとは何か？

その上、複数人で作業するための機能も沢山

編集の重複を防いだり、差分を分かりやすくしたり……

1-1. Gitとは何か？

Gitとは何か？

ソースコードをいい感じに管理するやつ

1-2. Githubとは何か？

1-2. Githubとは何か？

1-2. Githubとは何か？

Githubとは何か？

GitHub（ギットハブ）は、ソフトウェア開発のプラットフォームであり、ソースコードをホスティングする。コードのバージョン管理システムにはGitを使用する。
出典: https://ja.wikipedia.org/wiki/GitHub

1-2. Githubとは何か？

ソースコードを……ホスティングする……？

1-2. Githubとは何か？

つまり？

1-2. Githubとは何か？

Gitをオンラインで管理するやつ

Gitのデータをアップロードして共有・バックアップするためのサービスです

https://github.com/

1-2. Githubとは何か？

記録がある程度溜まったら、アップロード

PC上のデータが吹っ飛んでも、オンラインに残ります

1-2. Githubとは何か？

複数人で、データ共有

クラウドでの共有は不要です

1-2. Githubとは何か？

他の人も、閲覧可能

共同開発の場としても、能力をアピールする場としても

1-2. Githubとは何か？

Githubとは何か？

gitをオンラインで管理するやつ

1-3. VSCodeのGit機能とは何か？

1-3. VSCodeのGit機能とは何か？

1-3. VSCodeのGit機能とは何か？

VSCodeのGit機能とは何か？

Visual Studio Code には統合されたソース管理機能(SCM)があり、Git のサポートが標準で組み込まれています。
出典: https://code.visualstudio.com/docs/sourcecontrol/overview

1-3. VSCodeのGit機能とは何か？

Gitは、コマンドラインで操作するのが一般的

→

1-3. VSCodeのGit機能とは何か？

VSCodeのソース管理ビューを使えば、コマンド無しで操作できます

拡張機能のインストールも不要！
VSCodeを入れればすぐ使えます
（Git本体は事前準備でインストール済み）

1-3. VSCodeのGit機能とは何か？

今回はVSCodeのGit機能を使って開発します

お気に入りのGitの操作方法があれば、そちらで進めていただいても問題ありません！

2. VSCodeのGit機能を触ってみよう

VSCodeのGit機能を実際に使ってみよう！

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう

Githubからリポジトリをダウンロードしてみましょう

これをclone（クローン）と呼びます

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう

今回はこちらで事前にリポジトリを作成しました

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう

ブラウザで以下URLを開いてください

Zoomのチャット欄にも記載します

https://github.com/jigintern/git-tutorial-2026

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう
1. 「<> Code」ボタンをクリックし、表示されたHTTPSのURLをコピーします

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう
2. 「ようこそ」画面の「Git リポジトリのクローン...」をクリックします

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう
ex. コマンドパレットから「Git: クローン」を選んでも、同じ操作ができます

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう
3. 画面上部の入力欄に、コピーしたURLを貼り付けて、Enterキーを押します

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう
4. PC上での保存先のフォルダーを選択します

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう
5. 「クローンしたリポジトリを開きますか？」という通知が表示されるので、「開く」をクリックします

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう
6. エクスプローラーに、Githubにアップロードされていたファイルが表示されていることを確認します

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう

ダウンロードできてそうですね

2-2. branch: 作業を枝分かれさせよう

2-2. branch: 作業を枝分かれさせよう

2-2. branch: 作業を枝分かれさせよう

作業を枝分かれさせてみましょう

これをbranch（ブランチ）と呼びます

2-2. branch: 作業を枝分かれさせよう

クラウドサービスでファイル共有すると……

編集が重複したりして、片方の編集内容が消されることも

2-2. branch: 作業を枝分かれさせよう
枝分かれすると、複数人で同じファイルを触っても（ちょっと）安心です

2-2. branch: 作業を枝分かれさせよう

では、ブランチを切ってみましょう

ブランチを作ることを、慣習的に「ブランチを切る」、といいます

2-2. branch: 作業を枝分かれさせよう
1. 画面左下のステータスバーに表示されているブランチ名（main）をクリックします

2-2. branch: 作業を枝分かれさせよう
2. 表示されるメニューから「+ 新しいブランチの作成... (Create new branch...)」をクリックします

2-2. branch: 作業を枝分かれさせよう
3. 新規ブランチの名前を入力して、Enterキーを押します。他の参加者と重複しないよう、自分の名前などで設定してください

2-2. branch: 作業を枝分かれさせよう
4. ステータスバーの表示が、新しいブランチ名に切り替わったことを確認します

2-2. branch: 作業を枝分かれさせよう

既にファイルに変更を加えていた場合、その変更は新しいブランチにそのまま持ち越されます

2-3. commit: 作業前と後の差分を記録しよう

2-3. commit: 作業前と後の差分を記録しよう

2-3. commit: 作業前と後の差分を記録しよう

作業前と後の差分を記録してみましょう

これをcommit（コミット）と呼びます

2-3. commit: 作業前と後の差分を記録しよう

Gitはファイルの現在の内容を保存することを繰り返してログを作ると言いましたが……

実は、全てを保存するわけではありません

2-3. commit: 作業前と後の差分を記録しよう

作業を重ねる程にデータが膨大になってしまいます

これでは、いけませんね。しかし、解決する方法があります

2-3. commit: 作業前と後の差分を記録しよう
データの保存時には、作業前と後の差分を記録する

2-3. commit: 作業前と後の差分を記録しよう

では、コミットしてみましょう

2-3. commit: 作業前と後の差分を記録しよう
1. ファイルを新規作成します。ファイル名が重複しないよう、自分の名前などを半角英数字でつけてください

2-3. commit: 作業前と後の差分を記録しよう
2. 作成したファイルに、適当なプログラムを書き込みます

2-3. commit: 作業前と後の差分を記録しよう
3. ソース管理ビューを開いて、「変更」に作成したファイルと差分が表示されることを確認します

2-3. commit: 作業前と後の差分を記録しよう
4. ファイル名にカーソルを合わせて「+」（変更をステージ）をクリックし、「ステージされた変更」に移動させます

2-3. commit: 作業前と後の差分を記録しよう
5. 上部の入力欄にコミットメッセージを記載し、「コミット (Commit)」ボタンをクリックします。これで完了です

2-4. log: 作業の履歴を確認しよう

2-4. log: 作業の履歴を確認しよう

2-4. log: 作業の履歴を確認しよう

作業の履歴を確認してみましょう

この履歴をlog（ログ）と呼びます

2-4. log: 作業の履歴を確認しよう
ソース管理ビューの「グラフ (Graph)」に、コミットの履歴が表示されることを確認します

2-4. log: 作業の履歴を確認しよう

よさそうですね

2-5. push: 作業の成果をGithubにアップロードして共有しよう

2-5. push: 作業の成果をGithubにアップロードして共有しよう

2-5. push: 作業の成果をGithubにアップロードして共有しよう

作業の成果をGithubにアップロードしてみましょう

これをpush（プッシュ）と呼びます

2-5. push: 作業の成果をGithubにアップロードして共有しよう

早速、プッシュしてみましょう

2-5. push: 作業の成果をGithubにアップロードして共有しよう
1. ソース管理ビューの「Branch の発行」をクリックします

2-5. push: 作業の成果をGithubにアップロードして共有しよう
2. 初回はGithubへのサインインを求められるので、「許可 (Allow)」をクリックします

2-5. push: 作業の成果をGithubにアップロードして共有しよう
3. ブラウザが開くので、Githubにログインして「Authorize Visual-Studio-Code」をクリックし、VSCodeに戻ります

2-5. push: 作業の成果をGithubにアップロードして共有しよう
4. ブラウザでGithubを開き、プッシュしたブランチが正しく反映されていることを確認します

2-5. push: 作業の成果をGithubにアップロードして共有しよう

2回目以降は「変更の同期 (Sync Changes)」ボタンでプッシュできます

2-6. Pull Request: 枝分かれした成果を結合しよう

2-6. Pull Request: 枝分かれした成果を結合しよう

2-6. Pull Request: 枝分かれした成果を結合しよう

ブランチ機能で枝分かれさせた作業を結合させましょう

これをmerge（マージ）と呼びます

2-6. Pull Request: 枝分かれした成果を結合しよう

一応、手元でマージもできますが……

マージする時は、バグ等の防止のため、他の人に確認して貰いたいです

2-6. Pull Request: 枝分かれした成果を結合しよう

GithubのPull Request（プルリクエスト）機能を使いましょう！

2-6. Pull Request: 枝分かれした成果を結合しよう

プルリクエストでマージしましょう

2-6. Pull Request: 枝分かれした成果を結合しよう
1. Githubで「Pull requests」のタブをクリック

2-6. Pull Request: 枝分かれした成果を結合しよう
2. 「New pull request」をクリックします

2-6. Pull Request: 枝分かれした成果を結合しよう
3. 新規ブランチの名前、Pull Requestのタイトル、本文を入力します。作業内容が理解しやすい内容にすると良いです

2-6. Pull Request: 枝分かれした成果を結合しよう
4. 「Create pull request」をクリックすると、Pull Requestが作成されます

2-6. Pull Request: 枝分かれした成果を結合しよう

5. 他開発者に、Pull Requestの確認を依頼します

SlackやGithub上でのコメントなど、適宜チーム内で決定した方法で依頼しましょう

2-6. Pull Request: 枝分かれした成果を結合しよう
6-1. 確認を依頼された人は、Pull Requestの変更内容等を確認して、問題箇所があればコメント等で指摘します

2-6. Pull Request: 枝分かれした成果を結合しよう
6-2. 問題箇所が無い場合は、LGTM（Looks Good To Me: 私は良いと思います）等のコメントをつけて確認したことを報告しましょう

2-6. Pull Request: 枝分かれした成果を結合しよう
7. Pull Requestの作成者は、「Merge pull request」をクリックして、Pull Requestを元のブランチに結合します

2-6. Pull Request: 枝分かれした成果を結合しよう
7. Pull Requestの作成者は、「Merge pull request」をクリックして、Pull Requestを元のブランチに結合します

2-6. Pull Request: 枝分かれした成果を結合しよう
8. mainブランチを確認して、変更内容が正しく取り込まれていることを確認します

Githubで開いてみましょう

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう

Githubの更新を、PC上に取り込みましょう

これをfetch（フェッチ） / pull（プル）と呼びます

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう

fetch（フェッチ）は、Github上のリモートリポジトリの変更を確認する操作です。
pull（プル）は、Github上のリモートリポジトリの変更をダウンロードする操作です。

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう
  1. fetchしてGithubの変更を確認して
  2. pullしてその変更を取り込む
2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう

というイメージになります

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう

実際に取り込んでみましょう

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう
1. ステータスバーのブランチ名をクリックし、mainブランチに切り替えます

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう
2-1. ソース管理ビュー右上の「...」メニューから、「フェッチ」をクリックします

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう
2-2. これだけでは変更内容は取り込まれませんが、Github上で変更があったことをVSCodeが認識します

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう
3-1. ステータスバーのブランチ名の横に、「2↓」のように取り込める変更の数が表示されます

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう
3-2. 同じ「...」メニューから「プル」をクリックします

変更内容が取り込まれ、ファイルが更新されます

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう
4. 変更内容が取り込まれていることを、ソース管理ビューの「グラフ (Graph)」から確認します

3. まとめ

できるようになったことを、振り返ろう

  1. clone: Githubリポジトリを丸ごとダウンロードする
  2. branch: 作業を枝分かれさせて、他の開発者との衝突を防止する
  3. 通常通りに、プログラムを書く
  4. commit: 作業前と後の差分を記録する
  5. push: 作業の成果をGithubにアップロードして共有する
  6. Pull Request: 枝分かれした成果を結合する
  7. review: 他の開発者の作業内容を確認する

これでGit入門は完璧です

お疲れ様でした！