新人Git/Github研修公開用スライド（その２）

Git / Github 研修
後半戦！
2015/6/4,５株式会社ヴァル研究所
ぷぽ（@pupupopo88）
公開用

このスライドについて
新人研修でやった内容を一部公開用に修正したもの
研修の対象（想定）
開発未経験者（数名程度）
配属も開発とは限らない
HTML5とCSS3の基本はレクチャー済み
イメージを持ってもらうことを優先しているため、
多少表現に無理（まちがい）があります
2

ざっくりなもくじ
Githubとは
Githubにリポジトリをつくる
分散型のバージョン管理システム
リポジトリをクローンする
Githubをつかった作業フロー
コンフリクトの解消
リモートブランチをローカルに持ってくる
チーム開発・プロジェクト管理（issueなど）
3
p. 7
p. 12
p. 43
p. 69
p. 83
p.149
p.172
p.185

バージョン管理システムとは
安心してファイルの変更ができる
前のバージョンに戻せる、差分が見られる
自前でファイル変更に関する情報を残さなくていい
いつ誰が変更したのかわかる
複数人で作業するときラク
各々の作業をマージできる
5

特にGitは
ブランチ切ったりバージョンの切り替えがラク
安心度が高い
複数人で作業しやすい
6

特にGitは
安心度が高い
 
→まだイメージできないですよね
6

Githubとは
リポジトリ（コード）のホスティングサービス
ソーシャルコーディングの場
8

＿人人人人人人人＿
＞　ファッ！？　＜
￣Y^Y^Y^Y^Y^Y￣
9

Githubとは
10

どういうこと？
社内の共有サーバをつかってたら外の環境からア
クセスできなかった 
 
→　社内ネットワークから（有線LAN） 
　　じゃないとアクセスできない
Githubはネットさえ繋がっていれば使える！
11

どういうこと？
社内の共有サーバをつかってたら外の環境からア
クセスできなかった 
 
→　社内ネットワークから（有線LAN） 
　　じゃないとアクセスできない
Githubはネットさえ繋がっていれば使える！
 
→　障害さえ起きていなかったら…
11

Githubさんにコード
（リポジトリ）を
預けてみよう
13

リポジトリを預ける場所を作る
16

Public
何個つくっても無料！
全世界に公開される 
→Github上の検索だけではなく、ググってもヒッ
トする 
→Githubアカウント持ってない人も見られる
扱いに注意
個人情報やパスワードなど、重要な情報をコミッ
トしない
19

Private
有料
リポジトリの上限数でプランが異なる
会社アカウントで有料プラン登録してあります 
→作りたい場合は管理者に連絡（おまかせあれ）
非公開
ググってもGithubの検索でも出てこない
権限与えた人しか見られない
だけどパスワードとかはコミットしない！
20

預ける場所用意できた！
22

預ける場所用意できた！
22
カラのリポジトリ

リモートを指定する
23

リモートリポジトリを指定する
Github上にあるのが親玉（リモートリポジトリ）
それを直接いじるのではなく、個々人のPCに置い
てある分身（ローカルリポジトリ）を変更してい
くスタイル 
→おや、なんか似たようなことやりましたね
個々人が「分身」で作業したものを、「親玉」に
送る（同期）することで作業を進めていく
24

イメージ
25
俺の親玉はココ！

リポジトリ>リモートを追加
27

httpsの方のパスをコピペ
28
httpsに切り替えてコピペ

設定ファイルを変更
29
表記違うけど 
気にしないで！

リモートの設定が
できました
30

リモートリポジトリに送る
31

リモートリポジトリに送る
32
送りたいブランチを選択

こんな画面出るかも
33

git_practice/master
34
なんか増えた

さっきは場所を用意しただけ
35

プッシュ = リモートに送る
37

これぞリポジトリの
ホスティングサービス
38

Githubを利用した開発
くスタイル
39

思い出してください
みんなで一つの共有フォルダを使ってたら大変
私編集したのに勝手に変更が上書きされてる！
他の人が作業しているとき手持ち無沙汰
誰がどんな意図でファイルを変更しているかわ
からん！
ネットが切断されたらファイルがいじれなく
なった！
43

分散型だと
ネットに繋がってなくても手元の環境（自分の
PC）でファイルの変更ができる
他の人の変更をむやみに壊さない
親玉（リモートリポジトリ）をむやみに壊さない
自分の環境が死んでも親玉や他の人のローカル環
境で生きている！
44

ネットが死んでも
46
こっちはいじれる

リモートに問題起きても
47

リモートに問題起きても
47
こっちはいきてる
（またpushできる）

ローカルに問題起きても
48

ローカルに問題起きても
48
こっちはいきてる
（複製できる）

ローカルAに問題起きても
49

49
こっちも

49
こっちもいきてる
こっちも

Gitは
安心度が高い
50

これぞリポジトリの
ホスティングサービス
51

コード（リポジトリ）が
いろんなとこにあるって
53

しっちゃか 
めっちゃかじゃん
54

Githubを利用した開発
くスタイル
55

ブランチを活用する
基本は直接masterブランチをいじらない
基本は直接masterブランチをpushしない
各々の手元（ローカル）でブランチを作って編集、
pushする
リモートにそれぞれブランチを送りつける 
→問題がなければとりこんでもらう（マージ）
問題がないかどうかは、一緒に作業している人
などに確認してもらおう！
56

手持ちぶさたに
ならない！
58

これぞ
ソーシャルコーディング
59

こんな風に
61
指摘してみたり

コードを指定してコメントも
62

議論する場にしたり
63

いろんなコードが見られたりと
64

いろんな人と関われる
ユーザーをフォローしたり、リポジトリをウォッ
チする（ブックマーク的な）
自動で活動状況を受け取れる 
→Twitterみたいですね
いろんな人、いろんなサービスのコードを読むこ
とができる
バグ修正などで貢献（コントリビュート）できる
65

ワイワイやろうぜ！
66

これぞ
67

詳しくは
Web制作者のためのGitHubの教科書 
http://www.amazon.co.jp/dp/4844337009/
68

とにかく
特に大事なところは
さわって覚えよう
69

リモートリポジトリを
ローカルにクローンする
70

さっきは
自分の手元にあったものをGithubに送った
Github上にリポジトリを作る
ローカルリポジトリをプッシュ
71

さっきは
自分の手元にあったものをGithubに送った
Github上にリポジトリを作る
ローカルリポジトリをプッシュ
→次は既にGithubに置いてあるものを手元へ複製
71

さっきはGithubにのっけた
72

つぎはGithubからもってくる
73

SourceTreeで
クローンする
74

こちらから
ファイル > 新規 / クローンを作成する
75

クローンする
URLからクローン
76

リモートの住所をコピー
HTTPSの方を選択し、コピーしてください
77

ソースURLにコピペ
保存場所を指定してクローンを押してください
78

originって何よ
origin = https://github.com/pupupopo88/
github_practice/
リモートを指す言葉で別名みたいなもの
origin/master
リモートの master
origin/HEAD
リモートの HEAD（最新のコミット）
81

origin/masterとmaster
82
リモートのmasterと
ローカルのmasterが同じ
（同期できてる）

Githubさんを
使ってみよう
84

＿人人人人人人人人人人人人＿
＞　突然のあいうえお作文　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y￣
85

ローカルリポジトリを編集
試しに、誰かローカルリポジトリを編集してみま
しょう
backronym.md
ブランチを作る
「あ」の文字を編集する
「あいうえお作文と」と書いてね
コミットしてプッシュ
87

ブランチをプッシュ
88

他の人のリポジトリは…
何も変わってない
origin/add-a-lineは増える
自分の所には影響していない
完全に独立（分散）している！
89

リモート（Github）の様子
90

Network（ツリー）を見てみる
91

この変更どうするの？
さっき少しお話ししました
「これを取り込んでください」とお願いする！
add-a-lineってブランチ投げたから、 
よかったらmasterにマージしてよね！ 
→プルリクエスト（プルリク）を出す
92

プルリクエストの画面
95

取り込む（食べる）方
95

取り込まれる
（食べられる）方
95

96
タイトルは変更点の
概要をわかりやすく

96
タイトルは変更点の
概要をわかりやすく
コメントも！

差分も見られる
97
Viewをクリックすると

mdも見やすくなる！
98
マークダウンでなければ
ソースがそのまま表示

プルリクエストが出せた！
100

この後どうするんだっけ
add-a-lineってブランチ投げたから、 
よかったらmasterにマージしてよね！ 
→プルリクエスト（プルリク）を出す
問題無かったらmasterにマージする
基本的にプルリクを出した人以外が確認し、 
masterにマージしてもらう
101

だーくぷぷぽぽさん
103

変更されたファイルを確認
104

行選択でもコメントできる
106

コミット単位でも確認できる
107

コミットごとの変更
108

実際にコメントしてみる
109

いよいよ
マージします
111

マージ先問題ないよね
112

112

取り込まれる
（食べられる）方
112

ワンクリックマージ
113

念押しされるけどそのままマージ
114

116

116
マージされてる！

ブランチも消しちゃおう
117

プルリク形式の良いところ
誰が何の作業をしているかわかりやすい
情報が残る
属人化しにくい
人から指摘をもらえる
自分の勉強にもなる
個人の責任にしない
チームに責任を持たせる
118

チーム開発にとって
この上ない仕組み！！
119

ところで
リモートでマージが行われたけれど、実はローカ
ル環境は古いまま…
120

ところで
120
手元のmaster

ところで
120
手元のmaster
リモートのmaster

リモートの変更を 
ローカルに反映する
121

fetch（フェッチ）
リモートの状態をローカルに持ってくる（だけ）
自動で取り込んではくれない
SourceTreeさんは（設定で）定期的に情報をもっ
てきたりしてくれるので不要だったりする
何もしていないのに、コミットグラフに
「origin/master」とか書いてありますよね
覚えるためにも念のため毎回やりましょう
125

さっそくマージする
127

マージできた！
同期できた状態！
129

129
ローカルのmaster

129
ローカルのmasterリモートのmaster

なんでチェックはずすの？
130

コミットつくっちゃったら
ローカルのmasterがリモートのmasterよりひと
つコミットが増えてしまう
origin/master と master が同じではなくな
る
131

コミットつくっちゃったら
ローカルのmasterがリモートのmasterよりひと
つコミットが増えてしまう
origin/master と master が同じではなくな
る
131
リモートと比べると 
１つ先に進んでるよ

設定をもどしておこう
もう慣れたと思うので、Fast-Foward可能でもコ
ミット作るオプションを解除しておく
132
解除！

みんな同時に
作業してみよう！
134

変更する
い：言われましても
う：うまいこと返せないし
え：え…え…。ほら、何も思いつかないじゃん！
お：おこだよ！
135

コミット後、そのままプッシュ
136

「い」のプルリクをマージ
141

「う」のプルリクを作…成…?
142

Can't automatically merge.
→ 自動でマージできんよ
143

とりあえず作っちゃう
144

本当にマージできない（戦慄）
145

＿人人人人人人人人人人人＿
＞　どっちが正しいねん　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y￣
148

複数人で作業していると
同じ部分を修正していると 
競合（コンフリクト）がおきます
コンピューターはどっちが正しいかまでは判断で
きません
どっちが正しいのか教えてあげましょう
149

コンフリクトの解消
150

masterの変更を
取り込む
151

コンフリクト！（競合）
154

正しいところだけ残して
保存しましょう
157

add（ステージング）する
159

コンフリクトがなくなった！
160

マージ＆プッシュできた！
162

プルリク確認してみる
163

＿人人人人人人人人人＿
＞　マージできる！　＜
￣Y^Y^Y^Y^Y^Y^Y￣
164

masterの同期もしておきましょう
167

masterの同期もしておきましょう
168

気をつけたいこと
コンフリクト自体は悪いことではない 
チーム開発が活発であれば自然と起こるもの
不用意にコンフリクトしないように気をつける
ブランチを作成する際は、 
正しい箇所（最新のmaster等）から作る
同期を忘れない
作業の順番に気をつける
169

Gitは
安心度が高い
170

残りの「え」と「お」
もやってみましょう
171

他の人が作業していた
ブランチをいじりたい
173

こんなこともあります
ぷぽさんがブランチAをつくって作業する
ぷぽさんがブランチAをpushする
ぷぽさんがプルリクを出す
ぷぽさんが突然の風邪でおやすみしてしまう
だーくぷぷぽぽさんがバグに気づく 
→今すぐ修正したい！
174

じぶんのリポジトリにもってくる
フェッチしてチェックアウト
177

もってこれる！
179
origin/add-e-line の状態を利用して 
add-e-lineブランチをつくったイメージ

commit、pushもできるよ
180

プルリクにも反映されてる！
181

ちゅうい
他の人が同時作業していないか確認する
他の人の変更を上書きしてしまう恐れ
手がかかりそうな場合はおうちゃくしない
元ブランチからさらに別のブランチをつくり、
別途マージさせると安全
183

add-e-line
master
fix-e-line
こんなやつ
184

Githubさんは
チーム開発をするのに
大変べんり
186

プロジェクト管理
開発作業で出てくる問題
今誰がどんな作業をしているのか
今何が問題になっているのか
次に行うべき作業はなんなのか
期限はいつなのか
アジャイル研修思い出して
タスク出し、優先順位付け
187

issueをつかってみる
188

ラベルもつけられる
192

自分で設定したいなら
193

Milestone
issueの親要素となるもの
期間も設定できる
Milestone：この期間中にページAを作ります
issue：ページAをマークアップ
issue：ページAの見出しを青色に
issue：ページAの構成を変更 etc…
本研修ではほぼ使いません
195

Assignee
担当者を設定できる
「これ、私がやります！」の意思表示
検索機能により、自分や人が抱えているタスク
がわかりやすい
196

これってどうやるの？
200

絵文字(emoticon)をつかう
Githubで実装されている機能
:（コロン）区切りで絵文字が表示される
途中まで入力すると候補が表示される
チートシート
http://www.emoji-cheat-sheet.com/
201

画像とかもつかえる
Chrome拡張のLTTMがおすすめ
!s でかわいい「寿司ゆき」の画像が！
203

表現に気をつけよう
文字だけの表現では（意図せず）攻撃的になりがち
エラーが出てるから修正して
こんな書き方はダメでしょ、修正して
こんなクソコード書くとかどんな神経してるの
うまく表現を言い換えたり、相手を尊重した発言を
心がける
絵文字や画像で空気をやわらげる
204

たのしく開発するために
205

Githubとは
207

諸刃の剣
Githubはチーム開発を円滑に進めるこの上ない
サービス
使い方次第で、良いものにも悪いものにもなる
しあわせになれるかどうかはあなた次第
208

実際にみんなで
やってみる
209

これの続きをやりましょう
210
https://github.com/pupupopo88/git_practice
このリモートつかって

手順
こちらから要望（完成図）を出します
機能ごとに作業を分け、issueを作成する
各自役割分担して完成させる
　→アジャイル研修思い出してね！
211

とにかくさわるのみ
213

本研修の目標はこれだった
（なんとなく）「バージョン管理システム」がなん
なのかイメージできる
（なんとなく）「Git」がなんなのかイメージできる
（なんとなく）「Github」がなんなのかイメージで
きる
GitやGithubを使うことを怖がらない
215

なんとなく
イメージできれば
おkだった
216

イメージできましたか？
217

２日間のまとめ
自前で変更管理する大変さ
複数人で作業することのむずかしさ
Gitの特徴
Githubとは
218

安心してファイルの変更ができる
前のバージョンに戻せる、差分が見られる
自前でファイル変更に関する情報を残さなくていい
いつ誰が変更したのかわかる
複数人で作業するときラク
各々の作業をマージできる
219

Gitの特徴
処理が高速
安心度が高い
分散型の管理
賢いマージ
220

Githubとは
221

おわりに
Gitはたくさん失敗して覚えていくもの
やらかした数だけ成長します
私もたくさん失敗して、たくさんの人に助けてもら
いました
Gitは怖くない
いくらでも戻せる、やり直せる
この研修で伝えたことはほんの一部
開発に配属されたら、ぜひコマンド操作も覚えてね
222

参考
Web制作者のためのGitHubの教科書 
http://www.amazon.co.jp/dp/4844337009/
超初心者向け。SourceTreeの使い方多し
Github実践入門 
http://www.amazon.co.jp/dp/477416366X/
コマンド使う人向け。Gitそのものについても
入門Git 
http://www.amazon.co.jp/dp/4798023809
入門と思いきや、初心者が買ったら死ぬ
223

おまけ
用語集的なもの
224

リモートリポジトリ
共有ディレクトリみたいなもの
≒Githubに上がっているもの
Githubからクローンすると origin という名称が
設定される
参考スライド
基礎
リモートの別称（origin）
225

ローカルリポジトリ
リモートリポジトリから複製してきたもの
≒自分のPC上に置いてあるリポジトリ
リポジトリを新規作成して、後でGithubなどにアッ
プしたい場合、リモートの指定をする必要がある
参考スライド
基礎
リモートの設定方法
226

Publicリポジトリ
公開リポジトリ
いくつ作っても無料だが、Googleなどの検索エン
ジンでも検索できてしまう
参考スライド
227

Privateリポジトリ
非公開リポジトリ
有料だが、指定したアカウント以外は閲覧も出来
ない
仕事で必要になった場合は、会社アカウントでつ
くる（管理者に連絡）
参考スライド
228

clone（クローン）
リモートリポジトリからローカルに複製すること
Githubからクローンすると、自動でリモートリポ
ジトリと紐付けされる（origin）
参考スライド
基礎
SourceTreeでのクローン
229

プルリクエスト（プルリク）
主にローカルリポジトリで作業したものをリモー
トリポジトリに取り込んで欲しいときに出すもの
取り込み（マージ）先との差分を確認したり、コ
メントすることもできる
行単位、コミット単位でも差分を確認できる
参考スライド
230

fetch（フェッチ）
リモートの状態をローカルに持ってくる
SourceTreeは（設定で）定期的にfetchしてくれる
自動で取り込んではくれない
その情報を取り込みたい場合はマージする必要がある
リモートブランチにチェックアウトすると、ローカルリポジ
トリにそれと同じブランチを作成することができる
参考スライド
基礎
リモートに存在するブランチをローカルに持ってくる
231

コンフリクト（競合）
マージなどをする際、自動で統合できず衝突が起
きてしまった状態のこと
同じファイル、同じ箇所を編集していた場合な
どに起きる
コンピューターはどちらが正しいか判断できない
ため、手動で正しい状態を示す必要がある
参考スライド
232

issue（イシュー）
メンバー内で共有したいことなどを記述するもの
Redmineでいうチケットみたいなもの
マークダウン形式で見やすく記述できる
実はプルリクも１つのissue
issueやプルリクに #1 と（issue番号）を記述する
と、そのissue（プルリク）へのリンクがつけられる
参考スライド
233

WIP（Work In Progress）
まだ作業途中だよという意味
まだマージして欲しくない！というプルリクのタ
イトルの頭に[WIP]と記述する
作業途中で意見が欲しくなったときや、変更が
多くなりそうなときなどに 
= 生煮えプルリク
234

LGTM（Looks Good To Me）
「良いと思う」の意味
OK！のようなもの
プルリクを確認して問題ないとき、コメントとし
て残すことが多い
235

新人Git/Github研修公開用スライド（その２）

More Related Content

新人Git/Github研修公開用スライド（その２）