勉強会用資料

1. Git Hands-on
With Github.com

2. アイコンの説明
自分のPC（ローカル）で行う作業です。
Github.com（リモート）で行う作業です。

3. 準備はできてますか？
• 事前準備１．gitのインストール
• 事前準備２．githubアカウントを取得
• 事前準備３．SSH keysの設定
• 事前準備４．githubへのssh接続確認

4. Github.comのアカウント名を教えてください
https://github.com/xxxx

5. やること１（clone + branch + commit + push）
hoge-A
1-3. 変更を commit する
1-4. ブランチをアップロードする
（Push）
master
1-1. リポジトリ を ダウンロード する
（clone）
1-2. 作業用の branch を作成する

6. リポジトリを clone しましょう
▶ cloneとは
・リモートリポジトリを、ローカルに複製するコマンドです。
・cloneを実行すると、
リモートリポジトリの内容がまるまるダウンロードされます。
・cloneしたリポジトリは変更履歴も複製されます。
・元のリポジトリと同じように履歴の参照もできます。
master
clone

7. リポジトリを clone しましょう
URL
https://github.com/dip-dev/handson-1
まずは、リポジトリのURLをコピーします
git@github.com:dip-dev/handson-1.git
▶「Clone with SSH」の方をコピーしてください！

8. 1-1. リポジトリを clone しましょう
git clone git@github.com:dip-dev/handson-1.git
リポジトリを clone する
実行例

9. 1-2. branch を作成しましょう
▶ branchとは
・ブランチ（枝）とは、履歴の流れを分岐して記録していくためのものです。
・分岐したブランチは他のブランチの影響を受けないため、
同じリポジトリの中で複数の変更を同時に進めていくことができます。
hoge-A
master

10. 役を決めましょう
A
B C D E

11. 1-2. branch を作成しましょう
cd handson-1
git branch hoge-A
作業ブランチを作成する
cloneしたリポジトリの、カレントディレクトリに移動する
ブランチ名は、役割ごとに、hoge-A、hoge-B、・・・hoge-E と名前をつけてください。

12. 1-2. branch を作成しましょう
git branch
git checkout hoge-A
作業ブランチを切り替える
ブランチを確認する

13. 1-2. branch を作成しましょう
できましたか？

14. 1-3. ソースコードを変更してcommitしましょう
変更するファイルがどこにあるか分からん！
とう人は、サポーターに聞いてね ^^
リポジトリのカレントディレクトリにある、index.htmlというファイルを変更します！

15. 1-3. ソースコードを変更してcommitしましょう
• Aさん ▶ 3行目を変更してください。
• Bさん ▶ 6行目を変更してください。
• Cさん ▶ 8行目を変更してください。
• Dさん ▶ 10行目を変更してください。
• Eさん ▶ 10行目を変更してください。
変更するファイルがどこにあるか分からん！
サポーターに聞いてねmm

16. git add index.html
git commit –m ‘xxを変更’
1-3. ソースコードを変更してcommitしましょう

17. 1-4. リモートに push してみましょう
▶ pushとは
• ローカルリポジトリ内の変更履歴を、リモートにアップロードする操作です。
commit
push
hoge-A
master

18. 1-4. リモートに push してみましょう
git push origin hoge-A

19. Github.com で commit履歴を見てみましょう
自分のcommit履歴はありますか？
1-4. リモートに push してみましょう

20. 1-4. リモートに push してみましょう
Github.com で Branch を見てみましょう
今PushしたBranchはありますか？

21. やること２（プルリク + マージ）
master
hoge-A
2-2. merge
hoge-B
hoge-C
hoge-D
hoge-E
(A+B) (A+B+C) ・・・(A+B+C+E)
merge
merge
merge
merge
プルリク
プルリク
2-1. プルリク
プルリク
プルリク

22. 2-1. プルリクエストを作成しましょう
▶ プルリクエストとは
• 開発者のローカルリポジトリでの変更を、他の開発者に通知する機能です。
• プルリクエストでは次のようなことができます。
* 作業内容を関係者に通知します。
* ソースコードの変更箇所をわかりやすく表示します。
* ソースコードに関するコミュニケーションの場を提供します。
master
hoge-A
プルリク
変更のお知らせ

23. 2-1. プルリクエストを作成しましょう
▶ タイトル
分かりやすいように、ブランチ名を入れてください。
▶ コメント
入力は任意です。

24. 2-1. プルリクエストを作成しましょう
できましたか？

25. 2-2. マージしてみましょう
▶ Aさんは、マージ大臣です

26. A〜E 順番にすべてマージしましょう
2-2. マージしてみましょう

27. おや？

28. コンフリクト（競合）発生！！
▶ Eさんのプルリクがマージできない！

29. やること３（pull + コンフリクト解決 + push）
hoge-E
commit
3-3. push
(hoge-E＋master)
3-1. pull master
3-2. コンフリクト
修正
コンフリクト

30. 3. コンフリクトを解決しましょう
▶ コンフリクトとは
リモートリポジトリと、ローカルリポジトリで、ファイル内の同じ箇所を変更して
いた場合に発生します。
コンフリクトが発生した場合、どちらの変更を取り込むか自動では判断できないの
でエラーが発生します。

31. 3. コンフリクトを解決しましょう
▶ 手順
3-1. ローカルの作業ブランチに、リモートのmasterブランチをpullする。
3-2. ローカルでコンフリクトを解決する。
3-3. 再度commitして、リモートにPushする。
hoge-E
commit
push
(hoge-E＋master)
pull
master
コンフリクト
修正

32. 3. コンフリクトを解決しましょう
git pull origin master
3-1. ローカルの作業ブランチに、リモートのmasterブランチをプルする。

33. 3. コンフリクトを解決しましょう
3-2. ローカルでコンフリクトを解決する。

34. 3. コンフリクトを解決しましょう
git add index.html
git commit –m ‘コンフリクト解決’
git push origin hoge-E
3-3. 再度コミットして、リモートにPushする。

35. やること４（マージ・再）
master
hoge-E
4-1. merge
(A+B+C+E) (A+B+C+E+D)

36. 4. コンフリクトを解決しましょう
コンフリクトが解消され、マージできる状態になりました。

37. ▶ マージ大臣！出番です。
違う人がやってもいいよ！
4. コンフリクトを解決しましょう

38. 4. コンフリクトを解決しましょう
マージできましたか？？

39. 4. コンフリクトを解決しましょう
コミット履歴とか見てみましょう

40. 補足
▶ マージについて
今回は、GitHub上でmergeの操作を行いました。
ローカルリポジトリでも、コマンドによりmerge操作を行うことができます。
（今日はやりませんmm）
git merge

41. 反復！
A〜Eさんの役を変えて、
もう一度やってみましょう！