---
title: Yahoo! JAPAN MEETUP #21~Gitを使ったチーム開発体験@名古屋~
tags: 
author: [Yahoo!デベロッパーネットワーク](https://www.docswell.com/user/ydnjp)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PEXM65Z47X.jpg?width=480
description: Yahoo! JAPAN MEETUP #21~Gitを使ったチーム開発体験@名古屋~ by Yahoo!デベロッパーネットワーク
published: February 26, 18
canonical: https://www.docswell.com/s/ydnjp/KQ7PN5-2018-02-26-134728
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PEXM65Z47X.jpg)

Yahoo JAPAN MEET UP
~Gitを使ったチーム開発体験@名古屋~
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 2

![Page Image](https://bcdn.docswell.com/page/3EKG168PJD.jpg)

第1部
Gitの概要/準備
2
0 1 7 Yahoo
Yaho o Japan
Jap anCorporation.
Co rp o ratio n.AllAll
Rig hts
Reserved .
Co
p yrig ht ©
Copyright
Rights
Reserved.
© 22017


# Page. 3

![Page Image](https://bcdn.docswell.com/page/L73NQ62475.jpg)

こういう経験していませんか？
よーし、先週開発してたアプリの続きをやる
ぞ〜
・・・
あれ？このコードってなんで追加したんだっ
け？
3
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 4

![Page Image](https://bcdn.docswell.com/page/87DW9VZ5JG.jpg)

こういう経験していませんか？
ここの機能の開発、出来たよ！
ソースコードをメールに添付して送るから取り込んでね。
ありがとう！じゃこのファイルをコピペして・・・
わ！自分が作ってた部分が上書きされちゃった！
4
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 5

![Page Image](https://bcdn.docswell.com/page/VJP9ZVDDE8.jpg)

こういう経験していませんか？
ここの機能の開発、出来たよ！
ソースコードをメールに添付して送るから取り込んでね。
GitとGitHubを使って
解決しましょう！
ありがとう！じゃこのファイルをコピペして・・・
わ！自分が作ってた部分が上書きされちゃった！
5
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 6

![Page Image](https://bcdn.docswell.com/page/2EVMWZ1GEQ.jpg)

今日のワークショップのゴール
チーム開発のための
Git/GitHubの基礎を学ぶ
6
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 7

![Page Image](https://bcdn.docswell.com/page/57GGD48D7L.jpg)

バージョン管理って？
ファイルの変更を記録しておくシステム
「誰が」「どのファイルを」「どう変更したか」
がわかる
7
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4EQX1G9X7P.jpg)

バージョン管理って？
ファイルの変更を記録する場所
↓
リポジトリ
APIサーバ
リポジトリ
iPhoneアプリ
リポジトリ
8
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .
○○ライブラリ
リポジトリ


# Page. 9

![Page Image](https://bcdn.docswell.com/page/KJ46R5X271.jpg)

バージョン管理って？
リポジトリ内でのバージョン管理
過去の状態
2017/09/24 14:15
田中さんが
タイトルを変更
2017/09/24 12:15
佐藤さんが
背景画像を変更
9
最新の状態
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .
2017/09/25 08:15
山田さんが
本文を変更


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LE1VQWNK7G.jpg)

バージョン管理の嬉しいところ
過去の状態との差分がわかる
差分
2017/09/24 14:15
田中さんが
タイトルを変更
2017/09/24 12:15
佐藤さんが
背景画像を変更
10
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .
2017/09/25 08:15
山田さんが
本文を変更


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GEWLM64P72.jpg)

バージョン管理の嬉しいところ
過去の状態に戻せる
過去の状態を最新として扱う
2017/09/24 14:15
田中さんが
タイトルを変更
2017/09/24 12:15
佐藤さんが
背景画像を変更
11
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .
2017/09/25 08:15
山田さんが
本文を変更


# Page. 12

![Page Image](https://bcdn.docswell.com/page/47ZMQY26E3.jpg)

バージョン管理とGit
バージョン管理の方式はいくつかある
今回はGitを使います
Subversion Git Mercurial
12
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 13

![Page Image](https://bcdn.docswell.com/page/YJ6N6DVLJV.jpg)

GitとGitHub
13
Git
バージョン管理のシステム
GitHub
Gitでのバージョン管理をしやすくするWeb
サービス
ブラウザで変更履歴を見たりコードを
共有したりするのが簡単に出来る
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GJ5563DMJ4.jpg)

Gitを使うには
コマンドラインツールでgitコマンドを使う
or
GUIツールを使う
↓
今回はSourceTreeというGUIツールを使います
14
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 15

![Page Image](https://bcdn.docswell.com/page/9E2NMZ8R7R.jpg)

Sourcetreeのダウンロード
https://ja.atlassian.com/software/sourcetr
ee
にアクセスして、ダウンロード
15
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 16

![Page Image](https://bcdn.docswell.com/page/D7YPXR657M.jpg)

SourceTreeのインストール
• Windows
• exeファイルを実行
• mac OS
• zipファイルを展開して出来た
SourceTree.appをアプリケーション以下に
移動
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 17

![Page Image](https://bcdn.docswell.com/page/VEN51DZ4J8.jpg)

SourceTreeのインストール
ライセンスに同意にチェック
17
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 18

![Page Image](https://bcdn.docswell.com/page/Y79Y5GZ4E3.jpg)

SourceTreeのインストール
「既存のアカウント」
・Googleアカウント
・Atlassianアカウント
のどちらかでログイン
18
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 19

![Page Image](https://bcdn.docswell.com/page/G786YV1VJD.jpg)

SourceTreeのインストール
19
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 20

![Page Image](https://bcdn.docswell.com/page/L7L945QRER.jpg)

SourceTreeのインストール
Mac:「セットアップをスキップ」
Windows:「スキップ」
20
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 21

![Page Image](https://bcdn.docswell.com/page/4EMZK31P7W.jpg)

もしこの画面が出たら
Gitが見つかりませんでした
21
Co p yrig ht © 2 0 1 7
Mercurialが見つかりませんでした
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 22

![Page Image](https://bcdn.docswell.com/page/PER6XQLYJ9.jpg)

GitHubの設定
GitHub用に下記の作業を進めます
• アカウント作成
• リポジトリの作成
22
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 23

![Page Image](https://bcdn.docswell.com/page/P7XM65W4JX.jpg)

GitHubの設定(アカウント作成)
https://github.com
にアクセス
23
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 24

![Page Image](https://bcdn.docswell.com/page/37KG16VPED.jpg)

GitHubの設定(アカウントの作成)
24
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 25

![Page Image](https://bcdn.docswell.com/page/LJ3NQ6M4J5.jpg)

リポジトリを作りましょう
https://github.com/new
にアクセス
自分のアカウント以下に
リポジトリを作成
•
nagoya-meetup2018
25
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 26

![Page Image](https://bcdn.docswell.com/page/8JDW9V65EG.jpg)

SourceTreeとGitHubを連携（Win）
GitHub、HTTPSを選択
Basic認証
アカウントを追加をクリック
26
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 27

![Page Image](https://bcdn.docswell.com/page/VEP9ZVYD78.jpg)

SourceTreeとGitHubを連携（mac）
メニューバー「Sourcetree」
→環境設定→アカウント
GitHubを選択し
「接続アカウント」をクリック
→ログイン画面からログイン
27
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 28

![Page Image](https://bcdn.docswell.com/page/27VMWZGG7Q.jpg)

SourceTreeとGitHubを連携
リモートリポジトリを選択し
先ほど作成した
nagoya-meetup2018
が存在すれば連携完了！
28
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 29

![Page Image](https://bcdn.docswell.com/page/5JGGDMDDJL.jpg)

休憩
29
0 1 7 Yahoo
Yaho o Japan
Jap anCorporation.
Co rp o ratio n.AllAll
Rig hts
Reserved .
Co
p yrig ht ©
Copyright
Rights
Reserved.
© 22017


# Page. 30

![Page Image](https://bcdn.docswell.com/page/47QX1R1XJP.jpg)

第2部
Gitハンズオン
30
0 1 7 Yahoo
Yaho o Japan
Jap anCorporation.
Co rp o ratio n.AllAll
Rig hts
Reserved .
Co
p yrig ht ©
Copyright
Rights
Reserved.
© 22017


# Page. 31

![Page Image](https://bcdn.docswell.com/page/KE46R8R2J1.jpg)

この部でやりたいこと
• GitHub→自分のPCに持ってくる
• ファイルを追加・修正する
• GitHubに反映する
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 32

![Page Image](https://bcdn.docswell.com/page/L71VQ2QKJG.jpg)

この部でやりたいこと
• GitHub→自分のPCに持ってくる
• ファイルを追加・修正する
• GitHubに反映する
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 33

![Page Image](https://bcdn.docswell.com/page/G7WLMRMPJ2.jpg)

GitHub→自分のPCに持ってくる
リモートリポジトリ :
色んな人が共有出来るようにしたリポジトリ。
GitHub上に置かれたリポジトリはリモートリポジトリ。
ローカルリポジトリ :
自分のPC上にだけ存在するリポジトリ。
ローカルリポジトリ
33
Co p yrig ht © 2 0 1 7
リモートリポジトリ
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 34

![Page Image](https://bcdn.docswell.com/page/4JZMQRQ673.jpg)

GitHub→自分のPCに持ってくる
clone :
リモートリポジトリをローカルリポジトリにコピーする
※初回のみの操作
clone
ローカルリポジトリ
34
Co p yrig ht © 2 0 1 7
リモートリポジトリ
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 35

![Page Image](https://bcdn.docswell.com/page/YE6N6R6LEV.jpg)

この部でやりたいこと
• GitHub→自分のPCに持ってくる
• ファイルを追加・修正する
• GitHubに反映する
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 36

![Page Image](https://bcdn.docswell.com/page/GE55686ME4.jpg)

ファイルを修正してGitで扱う
ファイルの変更をローカルリポジトリに
登録するには2つのステップが必要です
ファイルを変更したよ！
ローカルリポジトリ
36
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 37

![Page Image](https://bcdn.docswell.com/page/972NMKMRJR.jpg)

ファイルを修正してGitで扱う
どのファイルの変更を登録するかを選択して、
ステージング領域に追加する
→ add という
add
ステージング領域
（インデックスともいう）
ローカルリポジトリ
37
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 38

![Page Image](https://bcdn.docswell.com/page/DJYPXNX5JM.jpg)

ファイルを修正してGitで扱う
addしたステージング領域の変更を
ローカルリポジトリに登録する
→ commit という
ステージング領域
（インデックスともいう）
commit
ローカルリポジトリ
38
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 39

![Page Image](https://bcdn.docswell.com/page/V7N51X14E8.jpg)

ファイルを修正してGitで扱う
commit時にはどういう変更をしたかを
コメントで残す必要があります
commitコメント
ステージング領域
（インデックスともいう）
commit
ローカルリポジトリ
39
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 40

![Page Image](https://bcdn.docswell.com/page/YJ9Y585473.jpg)

ファイルを修正してGitで扱う
大事なこと
• ファイルの変更はaddしてcommit
• commitしたときはコメントを残す
commitコメント
ステージング領域
commit
add
ローカルリポジトリ
40
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 41

![Page Image](https://bcdn.docswell.com/page/GJ86Y8YVED.jpg)

この部でやりたいこと
• GitHub→自分のPCに持ってくる
• ファイルを追加・修正する
• GitHubに反映する
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 42

![Page Image](https://bcdn.docswell.com/page/LJL94R4R7R.jpg)

自分のPC→GitHubに反映する
push:
ローカルリポジトリの変更をリモートリポジトリに反映する
push
ローカルリポジトリ
42
Co p yrig ht © 2 0 1 7
リモートリポジトリ
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 43

![Page Image](https://bcdn.docswell.com/page/47MZKRKPJW.jpg)

第2部の課題ワーク
SourceTreeを使って
一連の流れをやってみましょう！
43
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 44

![Page Image](https://bcdn.docswell.com/page/P7R6XRXYE9.jpg)

GitHub→自分のPCに持ってくる
clone :
リモートリポジトリをローカルリポジトリにコピーする
※初回のみの操作
clone
ローカルリポジトリ
44
Co p yrig ht © 2 0 1 7
リモートリポジトリ
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 45

![Page Image](https://bcdn.docswell.com/page/PJXM6R64EX.jpg)

cloneをSourceTreeでやってみよう
GitHub上のリポジトリのページで、赤で囲んだボタンをクリック
→リポジトリのURLがコピーされます
45
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 46

![Page Image](https://bcdn.docswell.com/page/3JKG1R1P7D.jpg)

cloneをSourceTreeでやってみよう
1.
2.
3.
4.
46
新規→「URLからクローン」を選択
ソースURLに先ほどコピーしたURLをペースト
「クローン」をクリック
「保存先のパス」がローカルリポジトリになります
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 47

![Page Image](https://bcdn.docswell.com/page/LE3NQ8Q4E5.jpg)

cloneをSourceTreeでやってみよう
上記の設定をおまけでやっておきましょう
47
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 48

![Page Image](https://bcdn.docswell.com/page/8EDW9M957G.jpg)

ローカルリポジトリを確認しよう
エクスプローラ/Finderで
先ほどのパスを開いてみましょう
この開いたフォルダ
＝ローカルリポジトリ
48
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 49

![Page Image](https://bcdn.docswell.com/page/V7P9ZRZDJ8.jpg)

ファイルを追加しましょう
テキストファイルをメモ帳やテキストエディタで作成します
• ファイル名は「README.txt」
• 本文には「Hello Nagoya!」
• 保存場所はローカルリポジトリ
49
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 50

![Page Image](https://bcdn.docswell.com/page/2JVMWRWGJQ.jpg)

ファイルを修正してGitで扱う
どのファイルの変更を登録するかを選択して、
ステージング領域に追加する
→ add という
add
ステージング領域
（インデックスともいう）
ローカルリポジトリ
50
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 51

![Page Image](https://bcdn.docswell.com/page/5EGGDMGDEL.jpg)

ステージングにaddしよう
README.txtが出来ている
51
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 52

![Page Image](https://bcdn.docswell.com/page/4JQX1RXXEP.jpg)

ステージングにaddしよう
• チェックボックスをチェック
• ファイルを上にドラッグ&amp;ドロップ
のどちらかでステージングへadd
52
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 53

![Page Image](https://bcdn.docswell.com/page/K746R862E1.jpg)

ステージングにaddしよう
ファイルがステージングにaddされた
53
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 54

![Page Image](https://bcdn.docswell.com/page/LJ1VQ2VKEG.jpg)

ステージングにaddしよう
ファイルの差分が表示されている
54
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 55

![Page Image](https://bcdn.docswell.com/page/GJWLMRLPE2.jpg)

ファイルを修正してGitで扱う
addしたステージング領域の変更を
ローカルリポジトリに登録する
→ commit という
ステージング領域
（インデックスともいう）
commit
ローカルリポジトリ
55
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 56

![Page Image](https://bcdn.docswell.com/page/4EZMQRM6J3.jpg)

ローカルリポジトリにcommitしよう
「コミット」をクリック
56
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 57

![Page Image](https://bcdn.docswell.com/page/Y76N6RNL7V.jpg)

ローカルリポジトリにcommitしよう
commitコメントを入力してコミット
57
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 58

![Page Image](https://bcdn.docswell.com/page/G755685M74.jpg)

ローカルリポジトリにcommitしよう
ステージングからローカルリポジトリに
commitされたのでなくなった
58
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 59

![Page Image](https://bcdn.docswell.com/page/9J2NMKNRER.jpg)

自分のPC→GitHubに反映する
push:
ローカルリポジトリの変更をリモートリポジトリに反映する
push
ローカルリポジトリ
59
Co p yrig ht © 2 0 1 7
リモートリポジトリ
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 60

![Page Image](https://bcdn.docswell.com/page/DEYPXNP5EM.jpg)

リモートリポジトリにpushしよう
「プッシュ」をクリック
60
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 61

![Page Image](https://bcdn.docswell.com/page/VJN51X5478.jpg)

リモートリポジトリにpushしよう
masterをチェックしてOK
61
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 62

![Page Image](https://bcdn.docswell.com/page/YE9Y58Y4J3.jpg)

GitHubに反映されていることを確認
62
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 63

![Page Image](https://bcdn.docswell.com/page/GE86Y86V7D.jpg)

作業ワークのやることリスト
•
リモートリポジトリからローカルリポジトリにclone
•
README.txtを作成してローカルリポジトリに保存
•
SourceTreeでadd→commit→push
•
GitHub上で反映されているか確認
わからないところがあったらサポーターに！
63
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 64

![Page Image](https://bcdn.docswell.com/page/LEL94R9RJR.jpg)

第2部のまとめ
• リポジトリは2種類ある
• リモートリポジトリ
• ローカルリポジトリ
• ファイルの変更を登録するには
• addしてコメントを書いてcommit
• リモート→ローカルにコピーするにはclone
• リモートリポジトリに反映するにはpush
64
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 65

![Page Image](https://bcdn.docswell.com/page/4JMZKRZPEW.jpg)

休憩
65
0 1 7 Yahoo
Yaho o Japan
Jap anCorporation.
Co rp o ratio n.AllAll
Rig hts
Reserved .
Co
p yrig ht ©
Copyright
Rights
Reserved.
© 22017


# Page. 66

![Page Image](https://bcdn.docswell.com/page/PJR6XR6Y79.jpg)

第3部
チーム開発演習
66
0 1 7 Yahoo
Yaho o Japan
Jap anCorporation.
Co rp o ratio n.AllAll
Rig hts
Reserved .
Co
p yrig ht ©
Copyright
Rights
Reserved.
© 22017


# Page. 67

![Page Image](https://bcdn.docswell.com/page/PEXM6RM47X.jpg)

この部でやりたいこと
1つのリモートリポジトリに対して2人がそれ
ぞれ作業出来る
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 68

![Page Image](https://bcdn.docswell.com/page/3EKG1RGPJD.jpg)

第2部でやったこと
push:
ローカルリポジトリの変更をリモートリポジトリに反映する
push
ローカルリポジトリ
68
Co p yrig ht © 2 0 1 7
リモートリポジトリ
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 69

![Page Image](https://bcdn.docswell.com/page/L73NQ8N475.jpg)

pushを2人同時にやると…？
機能Aを
push
機能Bを
push
69
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 70

![Page Image](https://bcdn.docswell.com/page/87DW9MW5JG.jpg)

pushを2人同時にやると…？
機能Aと機能Bが
混ざってしまう
70
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 71

![Page Image](https://bcdn.docswell.com/page/VJP9ZR9DE8.jpg)

pushを2人同時にやると…？
混ざるのを避けるため
作業環境を分ける
機能Aと機能Bが
混ざってしまう
71
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 72

![Page Image](https://bcdn.docswell.com/page/2EVMWRMGEQ.jpg)

pushを2人同時にやると…？
混ざるのを避けるため
ブランチを分ける
機能Aと機能Bが
混ざってしまう
72
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 73

![Page Image](https://bcdn.docswell.com/page/57GGDMXD7L.jpg)

ブランチについて
最新の状態
大元のブランチ
→masterブランチ
73
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 74

![Page Image](https://bcdn.docswell.com/page/4EQX1R8X7P.jpg)

ブランチについて
Aさんの作業ブランチ
最新の状態からブランチを分ける
→チェックアウト という
Bさんの作業ブランチ
74
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 75

![Page Image](https://bcdn.docswell.com/page/KJ46R82271.jpg)

ブランチについて
それぞれの変更をコミット
75
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 76

![Page Image](https://bcdn.docswell.com/page/LE1VQ2MK7G.jpg)

ブランチについて
masterブランチに反映
→マージ
76
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 77

![Page Image](https://bcdn.docswell.com/page/GEWLMR3P72.jpg)

マージをするには？
Pull Requestを作成する
• GitHubの機能
• マージしてOKかコードレビューをする
Pull Request作成
77
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .
コードレビュー


# Page. 78

![Page Image](https://bcdn.docswell.com/page/47ZMQRV6E3.jpg)

ブランチの作成方法
「ブランチ」をクリック
78
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 79

![Page Image](https://bcdn.docswell.com/page/YJ6N6R5LJV.jpg)

ブランチの作成方法
ブランチ名はGitHubアカウントとします
79
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 80

![Page Image](https://bcdn.docswell.com/page/GJ5568YMJ4.jpg)

ブランチの作成方法
左メニューの「ブランチ」に項目が増えています
○が付いているのが現在のブランチ
ブランチ名をダブルクリックすると切り替えられます
80
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 81

![Page Image](https://bcdn.docswell.com/page/LE3NQ859E5.jpg)

Pull Requestの作成方法
•
•
•
81
ファイルを修正してadd→commit
作成したブランチをリモートリポジトリにpush
• masterブランチにpushしないように注意！
すると、GitHub上の画面がこのようになります
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 82

![Page Image](https://bcdn.docswell.com/page/8EDW9MD87G.jpg)

Pull Requestの作成方法
Compare &amp; pull requestをクリック
82
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 83

![Page Image](https://bcdn.docswell.com/page/V7P9ZRXWJ8.jpg)

Pull Requestの作成方法
83
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 84

![Page Image](https://bcdn.docswell.com/page/2JVMWRL9JQ.jpg)

Pull Requestの作成方法
Pull Requestの概要文
→どのような変更をしたかの説明を記載します。
84
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 85

![Page Image](https://bcdn.docswell.com/page/5EGGDMX4EL.jpg)

Pull Requestの作成方法
Create pull requestをクリック
85
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 86

![Page Image](https://bcdn.docswell.com/page/4JQX1R8REP.jpg)

Pull Requestの作成方法
86
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 87

![Page Image](https://bcdn.docswell.com/page/K746R82QE1.jpg)

Pull Requestでのコードレビュー
Files changedで差分が見られる
87
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 88

![Page Image](https://bcdn.docswell.com/page/LJ1VQ2MLEG.jpg)

Pull Requestでのコードレビュー
レビュワーは問題なければコメントを残す
Merge pull requestをクリックしてマージ
88
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 89

![Page Image](https://bcdn.docswell.com/page/GJWLMR3QE2.jpg)

マージ分をローカルに反映する
Pull Requestがマージされると
• リモートリポジトリのmasterブランチに反映される
• ローカルリポジトリのmasterブランチにはまだ未反映
作業ブランチ
89
マージ
master
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .
master


# Page. 90

![Page Image](https://bcdn.docswell.com/page/4EZMQRV3J3.jpg)

マージ分をローカルに反映する
ローカルリポジトリのmasterブランチに反映させる
→ pull という
作業ブランチ
90
マージ
pull
master
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .
master


# Page. 91

![Page Image](https://bcdn.docswell.com/page/Y76N6R5Z7V.jpg)

マージ分をローカルに反映する
masterブランチに切り替え
91
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 92

![Page Image](https://bcdn.docswell.com/page/G75568Y974.jpg)

マージ分をローカルに反映する
「プル」をクリック
92
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 93

![Page Image](https://bcdn.docswell.com/page/9J2NMKG5ER.jpg)

マージ分をローカルに反映する
ブランチを作成して
マージしている
93
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 94

![Page Image](https://bcdn.docswell.com/page/DEYPXNV6EM.jpg)

第3部の課題ワーク
ここからはペアで作業します
机の上にあるペア番号を確認してください
スクリーン
Aさん
94
Bさん
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 95

![Page Image](https://bcdn.docswell.com/page/VJN51XG178.jpg)

前準備(演習用ソースコードのコピー)
https://github.com/kosshima/gitmeetup180217
Aさんが上記のGitHubにアクセスして
「Fork」してください
※Fork：
他の人のGitHub上のリポジトリを自分のリポジトリにコ
ピーする
95
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 96

![Page Image](https://bcdn.docswell.com/page/YE9Y58WYJ3.jpg)

Forkの方法
96
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 97

![Page Image](https://bcdn.docswell.com/page/GE86Y8NK7D.jpg)

前準備(Collaboratorsに登録)
97
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 98

![Page Image](https://bcdn.docswell.com/page/LEL94RPPJR.jpg)

前準備(Collaboratorsに登録)
98
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 99

![Page Image](https://bcdn.docswell.com/page/4JMZKR42EW.jpg)

前準備(Collaboratorsに登録)
99
BさんのGitHubアカウントを入力して
Add collaboratorをクリック
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 100

![Page Image](https://bcdn.docswell.com/page/PJR6XRW579.jpg)

確認
サポーターが確認します
100
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 101

![Page Image](https://bcdn.docswell.com/page/PEXM6RPX7X.jpg)

ペアで作業してみよう その1
準備は完了です！
AさんのGitHubにある
「git-meetup180217」を
AさんもBさんもcloneしてください
101
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 102

![Page Image](https://bcdn.docswell.com/page/3EKG1RD9JD.jpg)

ペアで作業してみよう その1
ブランチを作成し、sample.htmlの
↑部分をそれぞれ書き換えてください
102
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 103

![Page Image](https://bcdn.docswell.com/page/L73NQ8R975.jpg)

ペアで作業してみよう その1
AさんもBさんも同時に作業してください
• アカウント名でブランチを作成
• sample.htmlに自分のアカウント名を追記
• add→commit→push
• Pull Requestを作成
ここまで出来たらサポーターがチェックします
103
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 104

![Page Image](https://bcdn.docswell.com/page/87DW9MY8JG.jpg)

ペアで作業してみよう その1
BさんはAさんのPull Requestをレビューします
• 問題なければその旨をコメント
• マージする
• Bさんのローカルリポジトリにpullして反映
• ブランチをmasterに切り替えてから
104
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 105

![Page Image](https://bcdn.docswell.com/page/VJP9ZR6WE8.jpg)

ペアで作業してみよう その1
AさんはBさんのPull Requestをレビューします
• 問題なければその旨をコメント
• マージする
• Aさんのローカルリポジトリにpullして反映
105
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 106

![Page Image](https://bcdn.docswell.com/page/2EVMWR39EQ.jpg)

ペアで作業してみよう その2
2人同時に同じ箇所を修正します
まずmasterブランチにcheckoutして
pullしてください
106
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 107

![Page Image](https://bcdn.docswell.com/page/57GGDM347L.jpg)

ペアで作業してみよう その2
次に先ほどとは別の名前で
ブランチを作成し、sample.htmlの
↑部分をそれぞれ書き換えてください
最近食べた美味しかったものをそれぞれ書きます
107
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 108

![Page Image](https://bcdn.docswell.com/page/4EQX1R5R7P.jpg)

ペアで作業してみよう その2
２人同時に行います
• 先ほどとは別の名前でブランチを作成
• sample.htmlに好きな食べ物を追記
• add→commit→push
• Pull Requestを作成
ここまで出来たらサポーターがチェックします
108
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 109

![Page Image](https://bcdn.docswell.com/page/KJ46R89Q71.jpg)

ペアで作業してみよう その2
AさんはBさんのPull Requestをレビューします
• 問題なければその旨をコメント
• マージする
• Aさんのローカルリポジトリにpullして反映
• ブランチをmasterに切り替えてから
109
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 110

![Page Image](https://bcdn.docswell.com/page/LE1VQ2KL7G.jpg)

ペアで作業してみよう その2
BさんはAさんのPull Requestをレビューします
ここで一回STOP
• 問題なければその旨をコメント
• マージする
• Bさんのローカルリポジトリにpullして反映
コンフリクトが起こります
※コンフリクト：同じ箇所を修正し、修正が重複している状態
110
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 111

![Page Image](https://bcdn.docswell.com/page/GEWLMRDQ72.jpg)

コンフリクト
111
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 112

![Page Image](https://bcdn.docswell.com/page/47ZMQRG3E3.jpg)

コンフリクトの解消
後のコミット
先のコミット
112
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 113

![Page Image](https://bcdn.docswell.com/page/YJ6N6RYZJV.jpg)

コンフリクトの解消
113
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 114

![Page Image](https://bcdn.docswell.com/page/GJ5568G9J4.jpg)

コンフリクトの解消
114
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 115

![Page Image](https://bcdn.docswell.com/page/9E2NMKY57R.jpg)

マージが可能に
マージします
115
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 116

![Page Image](https://bcdn.docswell.com/page/D7YPXNG67M.jpg)

masterブランチの確認
116
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 117

![Page Image](https://bcdn.docswell.com/page/VEN51X81J8.jpg)

第3部のまとめ
•
•
•
•
•
作業前にブランチを作成する
完了したらmasterブランチへPull Request
コードレビューをしてマージする
ローカルリポジトリにはpullで反映する
同時に同じ箇所を修正しあったら
コンフリクトが起こる
• コンフリクトが起きても修正は可能
117
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 118

![Page Image](https://bcdn.docswell.com/page/Y79Y58KYE3.jpg)

おわりに
118
0 1 7 Yahoo
Yaho o Japan
Jap anCorporation.
Co rp o ratio n.AllAll
Rig hts
Reserved .
Co
p yrig ht ©
Copyright
Rights
Reserved.
© 22017


# Page. 119

![Page Image](https://bcdn.docswell.com/page/G786Y8RKJD.jpg)

ローカルリポジトリでの作業
• ファイルの変更はaddしてcommit
• commitしたときはコメントを残す
commitコメント
ステージング領域
commit
add
ローカルリポジトリ
119
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 120

![Page Image](https://bcdn.docswell.com/page/L7L94RKPER.jpg)

ローカルとリモートのやりとり
clone : リモートリポジトリをローカルリポジトリにコピー
pull : リモートリポジトリの変更をローカルリポジトリに反映
push : ローカルリポジトリの変更をリモートリポジトリに反映
clone
pull
push
ローカルリポジトリ
120
Co p yrig ht © 2 0 1 7
リモートリポジトリ
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 121

![Page Image](https://bcdn.docswell.com/page/4EMZKR227W.jpg)

ブランチについて
作業用ブランチ
Pull Request
masterブランチ
121
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 122

![Page Image](https://bcdn.docswell.com/page/PER6XRM5J9.jpg)

まとめ
GitとGitHubにはこれ以外にも便利な機能があります。
が、コマンドや機能を覚えるのはあとからでも出来ます。
まずは基本的な仕組みをしっかりおさえて
今後の開発で使っていきましょう！
122
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 123

![Page Image](https://bcdn.docswell.com/page/P7XM6RVXJX.jpg)

Appendix
123
0 1 7 Yahoo
Yaho o Japan
Jap anCorporation.
Co rp o ratio n.AllAll
Rig hts
Reserved .
Co
p yrig ht ©
Copyright
Rights
Reserved.
© 22017


# Page. 124

![Page Image](https://bcdn.docswell.com/page/37KG1RQ9ED.jpg)

Gitコマンドでの操作
• add
$ git add ファイルパス
• commit
$ git commit –m &quot;commitコメント&quot;
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 125

![Page Image](https://bcdn.docswell.com/page/LJ3NQ8P9J5.jpg)

Gitコマンドでの操作
• ブランチの作成
$ git branch ブランチ名
• 今のブランチを確認
$ git branch
• ブランチの切り替え
$ git checkout ブランチ名
• ブランチの作成＋そのブランチに切り替え
$ git checkout –b ブランチ名
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 126

![Page Image](https://bcdn.docswell.com/page/8JDW9ML8EG.jpg)

Gitコマンドでの操作
• clone
$ git clone リポジトリURL
• pull
$ git pull origin pullしたいブランチ名
• push
$ git push origin pushしたいブランチ名
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


# Page. 127

![Page Image](https://bcdn.docswell.com/page/VEP9ZR2W78.jpg)

Gitコマンドでの操作
&quot;origin&quot;ってなに？
→リモートリポジトリのURLを指している。
毎回打つのが面倒なので&quot;origin&quot;という略称で代用出来るようにデ
フォルトでなっている。
下の2つは同じことを表している。
$ git pull origin master
$ git pull git@github.com:ユーザ名/リポジトリ名.git master
127
Co p yrig ht © 2 0 1 7
Yaho o Jap an Co rp o ratio n. All Rig hts Reserved .


