Yahoo! JAPAN MEETUP #21~Gitを使ったチーム開発体験@名古屋~

Copyrig ht © 2017 Yahoo Japan Corporation. All Rig hts Reserved.
Yahoo JAPAN MEET UP
~Gitを使ったチーム開発体験@名古屋~

Copyrig ht © 2017 Yahoo Japan Corporation. All Rig hts Reserved.Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.
第1部
Gitの概要/準備
2

こういう経験していませんか？
3
よーし、先週開発してたアプリの続きをやる
ぞ〜
・・・
あれ？このコードってなんで追加したんだっ
け？

4
ありがとう！じゃこのファイルをコピペして・・・
わ！自分が作ってた部分が上書きされちゃった！
ここの機能の開発、出来たよ！
ソースコードをメールに添付して送るから取り込んでね。

5
ありがとう！じゃこのファイルをコピペして・・・
わ！自分が作ってた部分が上書きされちゃった！
ここの機能の開発、出来たよ！
ソースコードをメールに添付して送るから取り込んでね。
GitとGitHubを使って
解決しましょう！

今日のワークショップのゴール
6
チーム開発のための
Git/GitHubの基礎を学ぶ

バージョン管理って？
7
ファイルの変更を記録しておくシステム
「誰が」「どのファイルを」「どう変更したか」
がわかる

8
ファイルの変更を記録する場所
↓
リポジトリ
iPhoneアプリ
リポジトリ
APIサーバ
リポジトリ
○○ライブラリ
リポジトリ

9
2017/09/24 12:15
佐藤さんが
背景画像を変更
2017/09/24 14:15
田中さんが
タイトルを変更
2017/09/25 08:15
山田さんが
本文を変更
過去の状態最新の状態
リポジトリ内でのバージョン管理

バージョン管理の嬉しいところ
10
2017/09/24 12:15
佐藤さんが
2017/09/24 14:15
田中さんが
2017/09/25 08:15
山田さんが
本文を変更
差分
過去の状態との差分がわかる

バージョン管理の嬉しいところ
11
2017/09/24 12:15
佐藤さんが
2017/09/24 14:15
田中さんが
2017/09/25 08:15
山田さんが
本文を変更
過去の状態を最新として扱う
過去の状態に戻せる

バージョン管理とGit
12
バージョン管理の方式はいくつかある
今回はGitを使います
Subversion Git Mercurial

GitとGitHub
13
Git バージョン管理のシステム
GitHub Gitでのバージョン管理をしやすくするWeb
サービス
ブラウザで変更履歴を見たりコードを
共有したりするのが簡単に出来る

Gitを使うには
14
コマンドラインツールでgitコマンドを使う
or
GUIツールを使う
↓
今回はSourceTreeというGUIツールを使います

Sourcetreeのダウンロード
https://ja.atlassian.com/software/sourcetr
ee
にアクセスして、ダウンロード
15

SourceTreeのインストール
• Windows
• exeファイルを実行
• mac OS
• zipファイルを展開して出来た
SourceTree.appをアプリケーション以下に
移動

17
ライセンスに同意にチェック

18
「既存のアカウント」
・Googleアカウント
・Atlassianアカウント
のどちらかでログイン

19

20
Mac:「セットアップをスキップ」
Windows:「スキップ」

もしこの画面が出たら
21
Gitが見つかりませんでした Mercurialが見つかりませんでした

GitHubの設定
GitHub用に下記の作業を進めます
• アカウント作成
• リポジトリの作成
22

GitHubの設定(アカウント作成)
https://github.com
にアクセス
23

GitHubの設定(アカウントの作成)
24

Copyrig ht © 2017 Yahoo Japan Corporation. All Rig hts Reserved.Copyrig ht © 2017 Yahoo Japan Corporation. All Rig hts Reserved.25
リポジトリを作りましょう
https://github.com/new
にアクセス
自分のアカウント以下に
リポジトリを作成
• nagoya-meetup2018

SourceTreeとGitHubを連携（Win）
26
アカウントを追加をクリック
GitHub、HTTPSを選択
Basic認証

SourceTreeとGitHubを連携（mac）
メニューバー「Sourcetree」
→環境設定→アカウント
GitHubを選択し
「接続アカウント」をクリック
→ログイン画面からログイン

SourceTreeとGitHubを連携
リモートリポジトリを選択し
先ほど作成した
nagoya-meetup2018
が存在すれば連携完了！

休憩
29

第2部
Gitハンズオン
30

この部でやりたいこと
• GitHub→自分のPCに持ってくる
• ファイルを追加・修正する
• GitHubに反映する

GitHub→自分のPCに持ってくる
リモートリポジトリ :
色んな人が共有出来るようにしたリポジトリ。
GitHub上に置かれたリポジトリはリモートリポジトリ。
ローカルリポジトリ :
自分のPC上にだけ存在するリポジトリ。
33
ローカルリポジトリリモートリポジトリ

clone :
リモートリポジトリをローカルリポジトリにコピーする
※初回のみの操作
34
clone

ファイルを修正してGitで扱う
ファイルの変更をローカルリポジトリに
登録するには2つのステップが必要です
36
ローカルリポジトリ
ファイルを変更したよ！

どのファイルの変更を登録するかを選択して、
ステージング領域に追加する
→ add という
37
ステージング領域
（インデックスともいう）
add

addしたステージング領域の変更を
ローカルリポジトリに登録する
→ commit という
38
commit

commit時にはどういう変更をしたかを
コメントで残す必要があります
39
commit
commitコメント

大事なこと
• ファイルの変更はaddしてcommit
• commitしたときはコメントを残す
40
commit
commitコメント
add

自分のPC→GitHubに反映する
push:
ローカルリポジトリの変更をリモートリポジトリに反映する
42
push

第2部の課題ワーク
SourceTreeを使って
一連の流れをやってみましょう！
43

clone :
リモートリポジトリをローカルリポジトリにコピーする
※初回のみの操作
44
clone

cloneをSourceTreeでやってみよう
45
GitHub上のリポジトリのページで、赤で囲んだボタンをクリック
→リポジトリのURLがコピーされます

46
1. 新規→「URLからクローン」を選択
2. ソースURLに先ほどコピーしたURLをペースト
3. 「クローン」をクリック
4. 「保存先のパス」がローカルリポジトリになります

47
上記の設定をおまけでやっておきましょう

ローカルリポジトリを確認しよう
エクスプローラ/Finderで
先ほどのパスを開いてみましょう
この開いたフォルダ
＝ローカルリポジトリ
48

ファイルを追加しましょう
テキストファイルをメモ帳やテキストエディタで作成します
• ファイル名は「README.txt」
• 本文には「Hello Nagoya!」
• 保存場所はローカルリポジトリ
49

どのファイルの変更を登録するかを選択して、
ステージング領域に追加する
→ add という
50
add

ステージングにaddしよう
51
README.txtが出来ている

52
• チェックボックスをチェック
• ファイルを上にドラッグ&ドロップ
のどちらかでステージングへadd

53
ファイルがステージングにaddされた

54
ファイルの差分が表示されている

addしたステージング領域の変更を
ローカルリポジトリに登録する
→ commit という
55
commit

ローカルリポジトリにcommitしよう
56
「コミット」をクリック

57
commitコメントを入力してコミット

58
ステージングからローカルリポジトリに
commitされたのでなくなった

自分のPC→GitHubに反映する
push:
59
push

リモートリポジトリにpushしよう
60
「プッシュ」をクリック

リモートリポジトリにpushしよう
61
masterをチェックしてOK

GitHubに反映されていることを確認
62

作業ワークのやることリスト
• リモートリポジトリからローカルリポジトリにclone
• README.txtを作成してローカルリポジトリに保存
• SourceTreeでadd→commit→push
• GitHub上で反映されているか確認
わからないところがあったらサポーターに！
63

第2部のまとめ
• リポジトリは2種類ある
• リモートリポジトリ
• ローカルリポジトリ
• ファイルの変更を登録するには
• addしてコメントを書いてcommit
• リモート→ローカルにコピーするにはclone
• リモートリポジトリに反映するにはpush
64

休憩
65

第3部
チーム開発演習
66

この部でやりたいこと
1つのリモートリポジトリに対して2人がそれ
ぞれ作業出来る

第2部でやったこと
push:
68
push

pushを2人同時にやると…？
69
機能Aを
push
機能Bを
push

70
機能Aと機能Bが
混ざってしまう

71
混ざるのを避けるため
作業環境を分ける

72
混ざるのを避けるため
ブランチを分ける

ブランチについて
73
最新の状態
大元のブランチ
→masterブランチ

74
Aさんの作業ブランチ
Bさんの作業ブランチ
最新の状態からブランチを分ける
→チェックアウトという

75
それぞれの変更をコミット

76
masterブランチに反映
→マージ

マージをするには？
Pull Requestを作成する
• GitHubの機能
• マージしてOKかコードレビューをする
77
Pull Request作成コードレビュー

ブランチの作成方法
78
「ブランチ」をクリック

79
ブランチ名はGitHubアカウントとします

左メニューの「ブランチ」に項目が増えています
○が付いているのが現在のブランチ
ブランチ名をダブルクリックすると切り替えられます
80

Pull Requestの作成方法
• ファイルを修正してadd→commit
• 作成したブランチをリモートリポジトリにpush
• masterブランチにpushしないように注意！
• すると、GitHub上の画面がこのようになります
81

Compare & pull requestをクリック
82

83

84
Pull Requestの概要文
→どのような変更をしたかの説明を記載します。

85
Create pull requestをクリック

86

Pull Requestでのコードレビュー
87
Files changedで差分が見られる

Pull Requestでのコードレビュー
88
Merge pull requestをクリックしてマージ
レビュワーは問題なければコメントを残す

マージ分をローカルに反映する
Pull Requestがマージされると
• リモートリポジトリのmasterブランチに反映される
• ローカルリポジトリのmasterブランチにはまだ未反映
89
作業ブランチ master master
マージ

ローカルリポジトリのmasterブランチに反映させる
→ pull という
90
作業ブランチ master master
マージ pull

91
masterブランチに切り替え

92
「プル」をクリック

93
ブランチを作成して
マージしている

第3部の課題ワーク
ここからはペアで作業します
机の上にあるペア番号を確認してください
94
スクリーン
Aさん Bさん

前準備(演習用ソースコードのコピー)
https://github.com/kosshima/git-
meetup180217
Aさんが上記のGitHubにアクセスして
「Fork」してください
※Fork：
他の人のGitHub上のリポジトリを自分のリポジトリにコ
ピーする
95

Forkの方法
96

前準備(Collaboratorsに登録)
97

98

99
BさんのGitHubアカウントを入力して
Add collaboratorをクリック

確認
サポーターが確認します
100

ペアで作業してみようその1
準備は完了です！
AさんのGitHubにある
「git-meetup180217」を
AさんもBさんもcloneしてください
101

ブランチを作成し、sample.htmlの
↑部分をそれぞれ書き換えてください
102

AさんもBさんも同時に作業してください
• アカウント名でブランチを作成
• sample.htmlに自分のアカウント名を追記
• add→commit→push
• Pull Requestを作成
ここまで出来たらサポーターがチェックします
103

BさんはAさんのPull Requestをレビューします
• 問題なければその旨をコメント
• マージする
• Bさんのローカルリポジトリにpullして反映
• ブランチをmasterに切り替えてから
104

AさんはBさんのPull Requestをレビューします
• マージする
• Aさんのローカルリポジトリにpullして反映
105

2人同時に同じ箇所を修正します
まずmasterブランチにcheckoutして
pullしてください
106

次に先ほどとは別の名前で
ブランチを作成し、sample.htmlの
↑部分をそれぞれ書き換えてください
最近食べた美味しかったものをそれぞれ書きます
107

２人同時に行います
• 先ほどとは別の名前でブランチを作成
• sample.htmlに好きな食べ物を追記
• add→commit→push
• Pull Requestを作成
ここまで出来たらサポーターがチェックします
108

AさんはBさんのPull Requestをレビューします
• マージする
• Aさんのローカルリポジトリにpullして反映
• ブランチをmasterに切り替えてから
109

BさんはAさんのPull Requestをレビューします
• マージする
• Bさんのローカルリポジトリにpullして反映
110
ここで一回STOP
コンフリクトが起こります
※コンフリクト：同じ箇所を修正し、修正が重複している状態

コンフリクト
111

コンフリクトの解消
112
後のコミット
先のコミット

113

114

マージが可能に
115
マージします

masterブランチの確認
116

第3部のまとめ
• 作業前にブランチを作成する
• 完了したらmasterブランチへPull Request
• コードレビューをしてマージする
• ローカルリポジトリにはpullで反映する
• 同時に同じ箇所を修正しあったら
コンフリクトが起こる
• コンフリクトが起きても修正は可能
117

おわりに
118

ローカルリポジトリでの作業
• ファイルの変更はaddしてcommit
• commitしたときはコメントを残す
119
commit
commitコメント
add

ローカルとリモートのやりとり
clone : リモートリポジトリをローカルリポジトリにコピー
pull : リモートリポジトリの変更をローカルリポジトリに反映
push : ローカルリポジトリの変更をリモートリポジトリに反映
120
push
pull
clone

121
masterブランチ
Pull Request作業用ブランチ

まとめ
GitとGitHubにはこれ以外にも便利な機能があります。
が、コマンドや機能を覚えるのはあとからでも出来ます。
まずは基本的な仕組みをしっかりおさえて
今後の開発で使っていきましょう！
122

Appendix
123

Gitコマンドでの操作
• add
$ git add ファイルパス
• commit
$ git commit –m "commitコメント"

• ブランチの作成
$ git branch ブランチ名
• 今のブランチを確認
$ git branch
• ブランチの切り替え
$ git checkout ブランチ名
• ブランチの作成＋そのブランチに切り替え
$ git checkout –b ブランチ名

• clone
$ git clone リポジトリURL
• pull
$ git pull origin pullしたいブランチ名
• push
$ git push origin pushしたいブランチ名

"origin"ってなに？
→リモートリポジトリのURLを指している。
毎回打つのが面倒なので"origin"という略称で代用出来るようにデ
フォルトでなっている。
下の2つは同じことを表している。
$ git pull origin master
$ git pull git@github.com:ユーザ名/リポジトリ名.git master
127

Yahoo! JAPAN MEETUP #21~Gitを使ったチーム開発体験@名古屋~

More Related Content

What's hot

Similar to Yahoo! JAPAN MEETUP #21~Gitを使ったチーム開発体験@名古屋~

More from Yahoo!デベロッパーネットワーク

Yahoo! JAPAN MEETUP #21~Gitを使ったチーム開発体験@名古屋~