70
Git/GitHub 超入門 GitHubでたのしいチーム開発

Git introduction

Embed Size (px)

Citation preview

Page 1: Git introduction

Git/GitHub 超入門GitHubでたのしいチーム開発

Page 2: Git introduction

本日のゴール

Page 3: Git introduction

- Gitたのしい!

- GitHubでチーム開発気持ちい!

Page 4: Git introduction

git

Page 5: Git introduction

git

ってなんやろか…

Page 6: Git introduction

分散バージョン管理システム

…よけいわからん

Page 7: Git introduction

要すると

分散して、

バージョン を 管理する

システムのこと

Page 8: Git introduction

「バージョン管理」って…?

Page 9: Git introduction

普段やってること

Page 10: Git introduction

普段やってること

メモ.txt

メモ ID: hoge

Page 11: Git introduction

メモ.txt

メモ ID: hoge

普段やってること

メモ.txt

メモ ID: hoge2015

編集中…

Page 12: Git introduction

普段やってること

メモ.txt

メモ ID: hoge

メモ.txt

メモ ID: hoge2015

セーブ!!

Page 13: Git introduction

普段やってること

メモ.txt

メモ ID: hoge

メモ.txt

メモ ID: hoge2015

間違えてた!! 戻したいけど上書きしてんじゃん!!!

Page 14: Git introduction

バージョンを管理したいとき、どうしますか?

…よけいわからん

Page 15: Git introduction

コピーしてバックアップを とっておく

案その1

Page 16: Git introduction

コピーをとっておく

最新版index.html

index.html (前のやつ)

index-old.htmlindex20510620.html

編集用index.htmlindex.html

Page 17: Git introduction
Page 18: Git introduction

「バージョン管理」とは

Page 19: Git introduction

セーブするたびに、 バージョンを振ります

Page 20: Git introduction

「バージョン管理」とは…

メモ.txt

変更しました!

メモ.txt

セーブしました!ver. 2

ver. 1

Page 21: Git introduction

「バージョン管理」とは…

メモ.txt

メモ.txt

やばい間違えてた! しかも上書きしちゃっ

たよー!!

ver. 2

ver. 1

Page 22: Git introduction

そんなときにgitなら

メモ.txt

一個前にセーブした ところ(ver.1)に戻る!

メモ.txt

これで安心!便利!

ver. 2

ver. 1

Page 23: Git introduction

すべての変更履歴を管理できる

gitのいいところその1

Page 24: Git introduction

gitのことば

• セーブ = コミット (commit)

• リポジトリ = フォルダ

Page 25: Git introduction

gitのしくみ

ローカルリポジトリ

index.html style.cssリモートリポジトリ

index.html style.css

index.html style.css

commit merge

自分のPCの中

push fetch

Page 26: Git introduction

みんながみんなのPCで ネットなくても作業できる

gitのいいところその2

Page 27: Git introduction

これでgit使える!

Page 28: Git introduction

$ git add FILENAME

$ git commit -m “message”

$ git push

1. ステージング・エリアに追加

2. ローカルで変更をセーブ

3. ローカルのセーブをリモートにもセーブ

Page 29: Git introduction

$ git add FILENAME

$ git commit -m “message”

1. ステージング・エリアに追加

2. ローカルで変更をセーブ

Page 30: Git introduction

$ git add/commit

ローカルリポジトリ

index.html style.cssリモートリポジトリ

index.html style.css

index.html style.css

add/commit

自分のPCの中

Page 31: Git introduction

$ git add FILENAME

$ git commit -m “message”

$ git push

1. ステージング・エリアに追加

2. ローカルで変更をセーブ

3. ローカルのセーブをリモートにもセーブ

Page 32: Git introduction

$ git push 3. ローカルのセーブをリモートにもセーブ

Page 33: Git introduction

$ git push

ローカルリポジトリ

index.html style.cssリモートリポジトリ

index.html style.css

index.html style.css

自分のPCの中

push

Page 34: Git introduction

GitHubとは

Page 35: Git introduction
Page 36: Git introduction

GitHubは、 Gitのリポジトリをホスティングするサービス

Page 37: Git introduction

gitのしくみ

ローカルリポジトリ

index.html style.cssリモートリポジトリ

index.html style.css

index.html style.css

commit merge

自分のPCの中

push fetch

GitHub

Page 38: Git introduction
Page 39: Git introduction

チーム開発どうやんの

Page 40: Git introduction

チーム開発のやりかた

トツカのローカルリポジトリ

index.html style.css

リモートリポジトリ (GitHubがホスト)

index.html style.css

index.html style.css

commitmerge

fetch

push

Page 41: Git introduction

彼女と共同作業をするとき

Page 42: Git introduction

彼女と共同作業をするとき

トツカのローカルリポジトリ

index.html style.css

index.html style.css

index.html style.css

commitmerge

fetch

push

彼女のローカルリポジトリ

index.html style.css

index.html style.css

commitmerge

fetch

push

リモートリポジトリ (GitHubがホスト)

Page 43: Git introduction

リモートリポジトリ (GitHubがホスト)

彼女と共同作業をするとき

トツカのローカルリポジトリ

index.html style.css

index.html style.css

index.html style.css

commitmerge

fetch

push

彼女のローカルリポジトリ

index.html style.css

index.html style.css

commitmerge

fetch

push

これが分散!!!

Page 44: Git introduction

チーム開発フロー

Page 45: Git introduction

チーム開発フロー

• 自分のアカウントにデータを複製 (fork)

• ローカル(自分のPCの中)にデータを持ってくる (clone)

• 編集する

• 変更内容をコミット(セーブ)する (add/commit)

• コミット内容をリモート(GitHub上のソース)に反映する (push)

• Pull Requestをだす (GitHubの画面から!)

Page 46: Git introduction

1. 複製する (fork)

編集したいデータの複製を自分のGitHubのアカウントにつくれます

GitHubのページから!!

Page 47: Git introduction

1. 複製する (fork)

ローカルリポジトリ

リモートリポジトリ

自分のPCの中

GitHub (自分のアカウント) index.html

style.css

オリジナル

Page 48: Git introduction

1. 複製する (fork)

ローカルリポジトリ

index.html style.cssリモートリポジトリ

自分のPCの中

forkGitHub

(自分のアカウント) index.html style.css

オリジナル

Page 49: Git introduction

$ git clone https://github…

2. 自分のPCに持ってくる (clone)

リモート(GitHub)から ローカル(自分のCP)にデータを持ってきます

* URLはGitHubのページからコピペします

Page 50: Git introduction

2. 自分のPCに持ってくる (clone)

ローカルリポジトリ

index.html style.cssリモートリポジトリ

自分のPCの中

GitHub (自分のアカウント) index.html

style.css

オリジナル(本体)

Page 51: Git introduction

2. 自分のPCに持ってくる (clone)

ローカルリポジトリ

index.html style.cssリモートリポジトリ

index.html style.css

自分のPCの中clone

GitHub (自分のアカウント) index.html

style.css

オリジナル(本体)

index.html style.css

Page 52: Git introduction

3. 編集する

Page 53: Git introduction

3. 編集する

ローカルリポジトリ

index.html style.cssリモートリポジトリ

index.html style.css

自分のPCの中

GitHub (自分のアカウント) index.html

style.css

オリジナル(本体)

index.html style.css

Page 54: Git introduction

3. 編集する

ローカルリポジトリ

index.html style.cssリモートリポジトリ

index2.html style2.css

自分のPCの中

GitHub (自分のアカウント) index.html

style.css

オリジナル(本体)

index.html style.css

編集したった!!!!

Page 55: Git introduction

$ git commit -m “message”

4. コミット(セーブ)する

ローカル(自分のPCの中)で 変更内容をセーブ!

$ git add FILENAMEcommit(セーブ)するファイルを選ぶ

Page 56: Git introduction

4. コミット(セーブ)する

ローカルリポジトリ

index.html style.cssリモートリポジトリ

index2.html style2.css

自分のPCの中

GitHub (自分のアカウント) index.html

style.css

オリジナル(本体)

index.html style.css

Page 57: Git introduction

4. コミット(セーブ)する

ローカルリポジトリ

index.html style.cssリモートリポジトリ

index2.html style2.css

add / commit

自分のPCの中

GitHub (自分のアカウント) index.html

style.css

オリジナル(本体)

index2.html style2.css

Page 58: Git introduction

$ git push

5. リモートに反映する (push)

ローカル(自分のPC)の中の変更を リモート(GitHub上)のソースに反映します

Page 59: Git introduction

5. リモートに反映する(push)

ローカルリポジトリ

index.html style.cssリモートリポジトリ

index2.html style2.css

自分のPCの中

GitHub (自分のアカウント) index.html

style.css

オリジナル(本体)

index2.html style2.css

Page 60: Git introduction

5. リモートに反映する(push)

ローカルリポジトリ

index2.html style2.cssリモートリポジトリ

index2.html style2.css

自分のPCの中

GitHub (自分のアカウント) index.html

style.css

オリジナル(本体)

index2.html style2.css

push

Page 61: Git introduction

GitHubのページから!!

6. 変更を取り込んでもらう(pull request)

オリジナルのレポジトリに 「僕の変更を取り込んでくれ!」

とリクエストします

Page 62: Git introduction

5. 変更を取り込んでもらう(pull request)

ローカルリポジトリ

index2.html style2.cssリモートリポジトリ

index2.html style2.css

自分のPCの中

GitHub (自分のアカウント) index.html

style.css

オリジナル(本体)

index2.html style2.css

Page 63: Git introduction

5. リモートに反映する(push)

ローカルリポジトリ

index2.html style2.cssリモートリポジトリ

index2.html style2.css

自分のPCの中

GitHub (自分のアカウント) index.html

style.css

オリジナル(本体)

index2.html style2.css

PR

変更したから取り込んでよー!!

Page 64: Git introduction

5. リモートに反映する(push)

ローカルリポジトリ

index2.html style2.cssリモートリポジトリ

index2.html style2.css

自分のPCの中

GitHub (自分のアカウント) index2.html

style2.css

オリジナル(本体)

index2.html style2.css

PR

変更したから取り込んでよー!!

OK!!!

Page 65: Git introduction

0. みんなの変更を取り込む

$ git pull upstream masterオリジナルの方のリモート(GitHub上)が変更されていたら最新版を自分のソースに取り込む

$ git remote add upstream https://github.com/okadai-techlab/okayama-u-techlab.com.gitてくらぼのオリジナルの方もリモート先として登録する

* 登録は最初の一回だけでいいよ! ‘upstrem’って名前じゃなくてもいいよ!

Page 66: Git introduction

5. 変更を取り込んでもらう(pull request)

ローカルリポジトリ

index2.html style2.cssリモートリポジトリ

index2.html style2.css

自分のPCの中

GitHub (自分のアカウント) index3.html

style3.css

オリジナル(本体) upstream

index2.html style2.css

誰かが変更した (最新版)

複製 origin

Page 67: Git introduction

5. 変更を取り込んでもらう(pull request)

ローカルリポジトリ

index2.html style2.cssリモートリポジトリ

index3.html style3.css

自分のPCの中

GitHub (自分のアカウント) index3.html

style3.css

index3.html style3.css

pull オリジナル(本体)

upstream複製

origin

Page 68: Git introduction

彼女と共同作業をするとき

トツカのローカルリポジトリ

index.html style.css

index.html style.css

index.html style.css

commitmerge

push

彼女のローカルリポジトリ

index.html style.css

index.html style.css

commitmerge

pull

pushリモートリポジトリ (GitHubがホスト)

upstream

index.html style.css

index.html style.css

push pull push

PR PR

複製 origin

Page 69: Git introduction

チーム開発フロー

• 自分のアカウントにデータを複製 (fork) … 1回目だけ

• ローカル(自分のPCの中)にデータを持ってくる (clone) … 1回目だけ

• 最新版を取り込む (pull)

• 編集する

• 変更内容をコミット(セーブ)する (add/commit)

• コミット内容をリモート(GitHub上のソースorigin)に反映する (push)

• みんなの変更を取り込む (Pull Requestをだす) -> pullに戻る

Page 70: Git introduction

Demo