Github Desktop を

利用したチーム開発手法

1. 導入編

Git・Github・Github Desktop
について知ろう！

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. Github Desktopとは何か？

1-3. Github Desktopとは何か？

1-3. Github Desktopとは何か？

Github Desktopとは何か？

GitHub Desktop では、コマンド ラインや Web ブラウザーではなく GUI を使用して GitHub と対話できます。
出典: https://docs.github.com/ja/desktop

1-3. Github Desktopとは何か？

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

→

1-3. Github Desktopとは何か？

Github Desktopを使えば、コマンド無しで操作できます

環境構築もインストールするだけ！
事前にインストールして貰いました

1-3. Github Desktopとは何か？

UIはこんな感じ

表示されているのは、この資料を書いている時の様子です

1-3. Github Desktopとは何か？

今回はGithub Desktopを使って開発します

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

2. Github Desktopを触ってみよう

Github Desktopを実際に使ってみよう！

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-2025

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう
1. 「<> Code」のボタンをクリックします

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう
2. 表示されたウィンドウの「Open with Github Desktop」をクリックして、Github Desktopを開きます

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう
3. 「Local Path」にPC上での保存先を設定し、「Clone」をクリックします

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう
4. リポジトリがクローンできたことを確認します

2-1. clone: Githubリポジトリを丸ごとダウンロードしよう
5. 「Open in Visual Studio Code」をクリックして、リポジトリをVisual Studio Codeで開きます

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

Visual Studio Codeが開きます

何か他のエディタを使用している場合はそちらで開くかも

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. ブランチ操作用のフォームを開きます

2-2. branch: 作業を枝分かれさせよう
2. 「New Branch」をクリックして、新規ブランチの作成ウィンドウを開きます

2-2. branch: 作業を枝分かれさせよう
3. 新規ブランチの名前を入力して、「Create Branch」をクリックします。ブランチ名の重複が発生しないように注意してください

2-2. branch: 作業を枝分かれさせよう
ex. 既にブランチに変更を加えている場合は、以下のような画面が表示されるので、「Bring my changes to ...」を選択してください

2-2. branch: 作業を枝分かれさせよう
4. 新しいブランチができるので、作業に取り掛かることができます。

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. Visual Studio Codeを開いて、ファイルを新規作成します。ファイル名が重複しないよう、自分の名前などを半角英字でつけてください

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

2-3. commit: 作業前と後の差分を記録しよう
3. Github Desktopを開いて、差分が表示されていること、その差分が正しいことを確認します

2-3. commit: 作業前と後の差分を記録しよう
4. 画面左下のフォームから、変更内容についての説明文（コミットメッセージ）を記載します

2-3. commit: 作業前と後の差分を記録しよう
5. 「Commit to ...」をクリックします。これで完了です

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

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

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

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

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

2-4. log: 作業の履歴を確認しよう
「History」をクリックして、コミットの履歴が表示されることを確認します

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. 「Changes」をクリックして、元の画面に戻ります

2-5. push: 作業の成果をGithubにアップロードして共有しよう
2. 「Publish branch」をクリックして、変更内容をプッシュします

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

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. 画面上部の「Fetch origin」をクリックします

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

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう
2-3. （Github Desktopの自動更新がONになっている場合、既に変更が取り込まれている場合があります）

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう
3. 画面上部の「Pull origin」をクリックします

2-7. fetch / pull: Githubリポジトリの変更部分をダウンロードしよう
4. 変更内容が取り込まれていることを、「History」から確認します

3. まとめ

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

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

これでGit入門は完璧です

お疲れ様でした！