【GitHub入門】隣の人のWinFormsプロジェクトをCloneして変更を共有してみよう
以下の内容で、初学者向けの技術ブログとしてまとめます。
Windows Formsアプリを自分で作れるようになったら、次に体験してほしいのが複数人での共同開発です。
隣の席の人なら、
「ちょっと画面を見せて」
で済むかもしれません。
しかし実際の開発では、相手が別の部屋、別の会社、別の地域にいることもあります。
そこで今回は、GitHubとGitHub Desktopを使って、別の人のWindows Formsプロジェクトを自分のパソコンに取り込み、変更した内容を相手へ返すところまで体験してみます。
- 1. 今回の流れ
- 2. 1. 左側の人は保存用フォルダーを作る
- 3. 2. 右側の人がCollaboratorを追加する
- 4. 3. 左側の人が招待を承認する
- 5. 4. GitHubからプロジェクトをCloneする
- 6. Cloneとは何か
- 7. 5. Visual Studioでソリューションを開く
- 8. 6. Formのタイトルを変更する
- 9. 7. GitHub Desktopで変更を確認する
- 10. 8. Commitする
- 11. 9. Push originする
- 12. CommitとPushの違い
- 13. 10. 右側の人が変更を受け取る
- 14. 11. Visual Studioで変更を確認する
- 15. なぜわざわざGitHubを使うのか
- 16. GitHubは単なるファイル置き場ではない
- 17. 今回は同時に編集しない
- 18. 実際の開発ではBranchやPull Requestも使う
- 19. まとめ
今回の流れ

今回は2人1組で作業します。
- 右側の人:元のWindows Formsプロジェクトを持っている人
- 左側の人:そのプロジェクトを受け取って変更する人
全体の流れは次のようになります。
右側の人のPC
↓
GitHub
↓ Clone
左側の人のPC
↓
変更
↓ Commit
↓ Push
GitHub
↓ Pull
右側の人のPC
この一連の流れを実際に体験することが今回の目的です。
1. 左側の人は保存用フォルダーを作る
まず左側の人が作業します。
普段C#のプロジェクトを保存しているフォルダーを開きます。
例えば、
MyCSharpProjects
というフォルダーを使っている場合、その中に右側の人の名前をローマ字で作っておきます。
右側の人が山田さんなら、
MyCSharpProjects
└─ yamada
のようにします。
あとでGitHubから取得するプロジェクトを、この場所に保存します。
2. 右側の人がCollaboratorを追加する
次に右側の人が操作します。
ブラウザーでGitHubを開き、自分のWindows Formsアプリのリポジトリを開いてください。
リポジトリを開いたら、
Settings
をクリックします。
続いて、
Collaborators
の項目を開きます。
そして、
Add people
から左側の人のGitHubアカウントを追加します。
これで左側の人を共同作業者として招待できます。
ここで重要なのは、
GitHubのアカウント自体を共有しているわけではない
ということです。
パスワードを教える必要もありません。
特定のリポジトリに対して、その人が共同作業できるように設定しています。
3. 左側の人が招待を承認する
左側の人にはGitHubから招待が届きます。
メールなどから招待内容を確認して、承認します。
承認すると、右側の人のリポジトリへアクセスできるようになります。
これで共同作業の準備ができました。
4. GitHubからプロジェクトをCloneする
左側の人は、ブラウザーで右側の人のGitHubリポジトリを開きます。
緑色の、
Code
ボタンをクリックします。
そこから、
Open with GitHub Desktop
を選択します。
GitHub Desktopが起動すると、保存場所を指定できます。
先ほど作成したフォルダーを利用して保存場所を決めてください。
その後、
Clone
を実行します。
Cloneとは何か
Cloneは、単なるコピーとは少し意味が違います。
USBメモリでコピーする場合は、
右側の人のPC
↓
USBメモリ
↓
左側の人のPC
という単純なファイルコピーです。
一方、GitHubからCloneした場合は、
GitHub
↕
左側の人のPC
という関係が残ります。
つまり、
どのGitHubリポジトリから取得したプロジェクトなのか
という情報を持ったままコピーされます。
そのため、あとから変更をGitHubへ送ったり、GitHub側の変更を受け取ったりできます。
5. Visual Studioでソリューションを開く
Cloneが終わったら、左側の人はVisual Studioでソリューションを開きます。
例えば、
SampleApp.sln
のようなファイルを開きます。
まずはアプリを実行してみてください。
右側の人が作ったアプリと同じものが動けば、Cloneは成功です。
6. Formのタイトルを変更する
今回はGitHubの動きを確認することが目的です。
大きな変更を行う必要はありません。
Form1をフォームデザイナーで開きます。
Form1そのものを選択して、プロパティウィンドウの、
Text
を変更します。
例えば、
商品管理アプリ
となっていたものを、
商品管理アプリ - 田中編集
のように変更します。
変更後にアプリを実行して、タイトルが変わっていることを確認してください。
7. GitHub Desktopで変更を確認する
Visual Studioで変更したあと、GitHub Desktopを開きます。
左側にある、
Changes
を見ると、変更されたファイルが表示されます。
フォームデザイナーを操作した場合、
Form1.Designer.cs
などが変更されていることがあります。
自分で直接コードを書いていなくても、Visual Studioがフォームの設定内容をコードへ反映しているためです。
GitHub Desktopを見ることで、
どのファイルが変更されたのか
も確認できます。
8. Commitする
変更内容をGitの履歴として記録します。
GitHub DesktopのSummary欄に、
フォームのタイトルを変更
などと入力します。
そして、
Commit to main
をクリックします。
Commitは、
現在の変更内容をひとまとまりの履歴として保存する操作
です。
イメージとしては、
Visual Studioで変更
↓
Commit
↓
「フォームのタイトルを変更」
という履歴を保存
となります。
ここで注意したいのは、
CommitしただけではGitHubにはまだ送られていない
という点です。
9. Push originする
Commitのあと、
Push origin
をクリックします。
Pushは、
自分のPCにあるCommitをGitHubへ送る操作
です。
つまり、
変更
↓
Commit
↓
Push
↓
GitHub
という流れになります。
CommitとPushの違い
初心者のうちは、CommitとPushが混同しやすいところです。
Commitは、
自分のPC
の中に変更履歴を記録します。
Pushは、
自分のPC
↓
GitHub
へ、その履歴を送ります。
この2つは別の操作です。
10. 右側の人が変更を受け取る
ここからは右側の人が操作します。
右側の人のPCには、まだ左側の人が変更した内容は入っていません。
ただしGitHubには、すでに左側の人がPushした変更があります。
GitHub Desktopを開きます。
まず、
Fetch origin
を実行します。
Fetchは、
GitHub側に新しい変更があるか確認する操作
と考えると分かりやすいです。
新しい変更が見つかると、
Pull origin
が表示されます。
そこで、
Pull origin
をクリックします。
これでGitHub上の変更が右側の人のPCへ取り込まれます。
11. Visual Studioで変更を確認する
右側の人はVisual Studioを確認してください。
左側の人が変更した、
商品管理アプリ - 田中編集
などのタイトルに変わっていれば成功です。
右側の人は自分ではForm1を変更していません。
しかし、
左側の人
↓
Commit
↓
Push
↓
GitHub
↓
Pull
↓
右側の人
という流れで変更が届きました。
これがGitとGitHubを使った共同開発の基本です。
なぜわざわざGitHubを使うのか
今回の2人は隣同士に座っているかもしれません。
そうすると、
「パソコンを横から見ればいいのでは?」
と思うかもしれません。
しかし、相手が離れた場所にいる場合はどうでしょう。
例えば、
東京
↓
GitHub
↑
大阪
でも同じ仕組みが使えます。
さらに、
日本
↓
GitHub
↑
海外
でも基本的な考え方は変わりません。
GitHubを使えば、開発者同士が同じ場所にいる必要はありません。
GitHubは単なるファイル置き場ではない
GitHubを初めて学ぶと、
「プログラムをインターネット上に保存する場所」
というイメージを持つかもしれません。
もちろん、それもGitHubの役割の1つです。
しかし今回、
Clone
Commit
Push
Fetch
Pull
という操作を行いました。
GitHubは、
プログラムを保存する場所であると同時に、複数の開発者が変更を受け渡しながら共同作業する場所
でもあります。
今回は同時に編集しない
今回の練習では、分かりやすくするため、
左側の人が変更している間、右側の人は同じプロジェクトを変更しない
ことにします。
もし2人が同じ場所を同時に変更すると、
「どちらの変更を残せばよいのか」
という問題が起きることがあります。
これを、
競合(Conflict)
と呼びます。
競合の解決もGitでは大切ですが、最初からすべて覚える必要はありません。
まずは、
Clone
↓
変更
↓
Commit
↓
Push
↓
Pull
の基本をしっかり体験しましょう。
実際の開発ではBranchやPull Requestも使う
今回は学習用として、
mainブランチへ直接CommitしてPushする
方法を使いました。
しかし実際の開発では、作業用のBranchを作り、
作業用Branch
↓
Pull Request
↓
main
という形で変更を取り込むこともよくあります。
なぜなら、
「他の人がいきなりmainを書き換えて大丈夫なのか?」
という問題があるからです。
今回の演習を体験してからBranchやPull Requestを学ぶと、その必要性も理解しやすくなります。
まとめ
今回は、Windows Formsアプリを使ってGitHubによる共同作業を体験しました。
全体の流れをもう一度確認します。
① 右側の人
Collaboratorを追加
↓
② 左側の人
招待を承認
↓
③ 左側の人
Clone
↓
④ Visual Studioで変更
↓
⑤ Commit
↓
⑥ Push origin
↓
⑦ 右側の人
Fetch origin
↓
⑧ Pull origin
↓
⑨ Visual Studioで変更を確認
今回覚えてほしい言葉は次の4つです。
Clone
GitHubにあるプロジェクトを自分のPCへ持ってくる。
Commit
変更内容を履歴として記録する。
Push
自分のPCにあるCommitをGitHubへ送る。
Pull
GitHubにある新しい変更を自分のPCへ取り込む。
隣の人との作業であれば、パソコンを見せ合うだけでも済むかもしれません。
しかし実際の開発では、離れた場所にいる人と共同でプログラムを作ることがあります。
GitとGitHubを使えば、
開発者A
↓
GitHub
↑
開発者B
という形で、場所に関係なく共同開発できます。
今回の演習は、その仕組みを実際に体験する第一歩です。








ディスカッション
コメント一覧
まだ、コメントがありません