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/sourcetree

にアクセスして、ダウンロード

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

pullclone



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 [email protected]:ユーザ名/リポジトリ名.git master

127

yahoo! japan meetup #21~gitを使ったチーム開発体験@名古屋~

Technology