Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
Submit search
EN
Uploaded by
pupupopo88
19,586 views
新人Git/Github研修公開用スライド(その1)
新人「GitとGithub」研修のスライドを公開用に調整したもの
Technology
◦
Read more
64
Save
Share
Embed
Embed presentation
Download
Downloaded 144 times
1
/ 330
2
/ 330
3
/ 330
4
/ 330
5
/ 330
6
/ 330
7
/ 330
8
/ 330
9
/ 330
10
/ 330
11
/ 330
12
/ 330
13
/ 330
14
/ 330
15
/ 330
16
/ 330
17
/ 330
18
/ 330
Most read
19
/ 330
20
/ 330
21
/ 330
22
/ 330
23
/ 330
24
/ 330
25
/ 330
26
/ 330
27
/ 330
28
/ 330
29
/ 330
30
/ 330
31
/ 330
32
/ 330
33
/ 330
34
/ 330
35
/ 330
Most read
36
/ 330
37
/ 330
38
/ 330
39
/ 330
40
/ 330
41
/ 330
42
/ 330
43
/ 330
44
/ 330
45
/ 330
46
/ 330
47
/ 330
48
/ 330
49
/ 330
50
/ 330
51
/ 330
52
/ 330
53
/ 330
54
/ 330
55
/ 330
56
/ 330
57
/ 330
58
/ 330
59
/ 330
60
/ 330
61
/ 330
62
/ 330
63
/ 330
64
/ 330
65
/ 330
66
/ 330
67
/ 330
68
/ 330
69
/ 330
70
/ 330
71
/ 330
72
/ 330
73
/ 330
74
/ 330
75
/ 330
76
/ 330
77
/ 330
78
/ 330
79
/ 330
80
/ 330
81
/ 330
82
/ 330
83
/ 330
Most read
84
/ 330
85
/ 330
86
/ 330
87
/ 330
88
/ 330
89
/ 330
90
/ 330
91
/ 330
92
/ 330
93
/ 330
94
/ 330
95
/ 330
96
/ 330
97
/ 330
98
/ 330
99
/ 330
100
/ 330
101
/ 330
102
/ 330
103
/ 330
104
/ 330
105
/ 330
106
/ 330
107
/ 330
108
/ 330
109
/ 330
110
/ 330
111
/ 330
112
/ 330
113
/ 330
114
/ 330
115
/ 330
116
/ 330
117
/ 330
118
/ 330
119
/ 330
120
/ 330
121
/ 330
122
/ 330
123
/ 330
124
/ 330
125
/ 330
126
/ 330
127
/ 330
128
/ 330
129
/ 330
130
/ 330
131
/ 330
132
/ 330
133
/ 330
134
/ 330
135
/ 330
136
/ 330
137
/ 330
138
/ 330
139
/ 330
140
/ 330
141
/ 330
142
/ 330
143
/ 330
144
/ 330
145
/ 330
146
/ 330
147
/ 330
148
/ 330
149
/ 330
150
/ 330
151
/ 330
152
/ 330
153
/ 330
154
/ 330
155
/ 330
156
/ 330
157
/ 330
158
/ 330
159
/ 330
160
/ 330
161
/ 330
162
/ 330
163
/ 330
164
/ 330
165
/ 330
166
/ 330
167
/ 330
168
/ 330
169
/ 330
170
/ 330
171
/ 330
172
/ 330
173
/ 330
174
/ 330
175
/ 330
176
/ 330
177
/ 330
178
/ 330
179
/ 330
180
/ 330
181
/ 330
182
/ 330
183
/ 330
184
/ 330
185
/ 330
186
/ 330
187
/ 330
188
/ 330
189
/ 330
190
/ 330
191
/ 330
192
/ 330
193
/ 330
194
/ 330
195
/ 330
196
/ 330
197
/ 330
198
/ 330
199
/ 330
200
/ 330
201
/ 330
202
/ 330
203
/ 330
204
/ 330
205
/ 330
206
/ 330
207
/ 330
208
/ 330
209
/ 330
210
/ 330
211
/ 330
212
/ 330
213
/ 330
214
/ 330
215
/ 330
216
/ 330
217
/ 330
218
/ 330
219
/ 330
220
/ 330
221
/ 330
222
/ 330
223
/ 330
224
/ 330
225
/ 330
226
/ 330
227
/ 330
228
/ 330
229
/ 330
230
/ 330
231
/ 330
232
/ 330
233
/ 330
234
/ 330
235
/ 330
236
/ 330
237
/ 330
238
/ 330
239
/ 330
240
/ 330
241
/ 330
242
/ 330
243
/ 330
244
/ 330
245
/ 330
246
/ 330
247
/ 330
248
/ 330
249
/ 330
250
/ 330
251
/ 330
252
/ 330
253
/ 330
254
/ 330
255
/ 330
256
/ 330
257
/ 330
258
/ 330
259
/ 330
260
/ 330
261
/ 330
262
/ 330
263
/ 330
264
/ 330
265
/ 330
266
/ 330
267
/ 330
268
/ 330
269
/ 330
270
/ 330
271
/ 330
272
/ 330
273
/ 330
274
/ 330
275
/ 330
276
/ 330
277
/ 330
278
/ 330
279
/ 330
280
/ 330
281
/ 330
282
/ 330
283
/ 330
284
/ 330
285
/ 330
286
/ 330
287
/ 330
288
/ 330
289
/ 330
290
/ 330
291
/ 330
292
/ 330
293
/ 330
294
/ 330
295
/ 330
296
/ 330
297
/ 330
298
/ 330
299
/ 330
300
/ 330
301
/ 330
302
/ 330
303
/ 330
304
/ 330
305
/ 330
306
/ 330
307
/ 330
308
/ 330
309
/ 330
310
/ 330
311
/ 330
312
/ 330
313
/ 330
314
/ 330
315
/ 330
316
/ 330
317
/ 330
318
/ 330
319
/ 330
320
/ 330
321
/ 330
322
/ 330
323
/ 330
324
/ 330
325
/ 330
326
/ 330
327
/ 330
328
/ 330
329
/ 330
330
/ 330
More Related Content
PDF
いつやるの?Git入門
by
Masakazu Matsushita
PDF
新人Git/Github研修公開用スライド(その2)
by
pupupopo88
PDF
Gitはじめの一歩
by
Ayana Yokota
PDF
デザイナのためのGit入門
by
dsuke Takaoka
PDF
はじめてのGit forデザイナー&コーダー
by
Saeko Yamamoto
ODP
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
by
pospome
PPTX
テストコードの DRY と DAMP
by
Yusuke Kagata
PDF
「Redmineの運用パターン集~私に聞くな、チケットシステムに聞け」
by
akipii Oga
いつやるの?Git入門
by
Masakazu Matsushita
新人Git/Github研修公開用スライド(その2)
by
pupupopo88
Gitはじめの一歩
by
Ayana Yokota
デザイナのためのGit入門
by
dsuke Takaoka
はじめてのGit forデザイナー&コーダー
by
Saeko Yamamoto
Goのサーバサイド実装におけるレイヤ設計とレイヤ内実装について考える
by
pospome
テストコードの DRY と DAMP
by
Yusuke Kagata
「Redmineの運用パターン集~私に聞くな、チケットシステムに聞け」
by
akipii Oga
What's hot
PDF
Redmineを使ったヘルプデスクシステムでサポート業務を効率化
by
Go Maeda
KEY
一人でもはじめるGitでバージョン管理
by
Takafumi Yoshida
PDF
ノンプログラマでも今日から使える「Git」でバージョン管理
by
H2O Space. Co., Ltd.
PDF
Git_GitHub 入門者向けスライド.pdf
by
Yoshiki Tanaka
PDF
Git flowの活用事例
by
Hirohito Kato
PPTX
DockerコンテナでGitを使う
by
Kazuhiro Suga
PDF
目grep入門 +解説
by
murachue
PDF
Redmineとgitの 連携利用事例
by
Tomohisa Kusukawa
PDF
Redmineの開発状況のこれまでと現在
by
Go Maeda
PDF
今話題のいろいろなコンテナランタイムを比較してみた
by
Kohei Tokunaga
PDF
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
by
Takuto Wada
PDF
Redmine 4.2で作るヘルプデスク向け問い合わせ受付・管理システム
by
Go Maeda
PDF
40歳過ぎてもエンジニアでいるためにやっていること
by
onozaty
PDF
SourceTreeで始めよう! Gitへの乗り換え指南
by
Kouji Matsui
PDF
Stargz Snapshotter: イメージのpullを省略しcontainerdでコンテナを高速に起動する
by
Kohei Tokunaga
PPTX
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
by
Shota Shinogi
PDF
ネットワークの自動化・監視の取り組みについて #netopscoding #npstudy
by
Yahoo!デベロッパーネットワーク
PDF
運用業務でのRedmine
by
Tomohisa Kusukawa
PPTX
研修成果プレゼン資料
by
Wataru Yamaura
PPTX
Teamsを真に活用するための秘訣を教えます
by
mokudai masayuki
Redmineを使ったヘルプデスクシステムでサポート業務を効率化
by
Go Maeda
一人でもはじめるGitでバージョン管理
by
Takafumi Yoshida
ノンプログラマでも今日から使える「Git」でバージョン管理
by
H2O Space. Co., Ltd.
Git_GitHub 入門者向けスライド.pdf
by
Yoshiki Tanaka
Git flowの活用事例
by
Hirohito Kato
DockerコンテナでGitを使う
by
Kazuhiro Suga
目grep入門 +解説
by
murachue
Redmineとgitの 連携利用事例
by
Tomohisa Kusukawa
Redmineの開発状況のこれまでと現在
by
Go Maeda
今話題のいろいろなコンテナランタイムを比較してみた
by
Kohei Tokunaga
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
by
Takuto Wada
Redmine 4.2で作るヘルプデスク向け問い合わせ受付・管理システム
by
Go Maeda
40歳過ぎてもエンジニアでいるためにやっていること
by
onozaty
SourceTreeで始めよう! Gitへの乗り換え指南
by
Kouji Matsui
Stargz Snapshotter: イメージのpullを省略しcontainerdでコンテナを高速に起動する
by
Kohei Tokunaga
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
by
Shota Shinogi
ネットワークの自動化・監視の取り組みについて #netopscoding #npstudy
by
Yahoo!デベロッパーネットワーク
運用業務でのRedmine
by
Tomohisa Kusukawa
研修成果プレゼン資料
by
Wataru Yamaura
Teamsを真に活用するための秘訣を教えます
by
mokudai masayuki
Viewers also liked
PDF
pythonでオフィス快適化計画
by
Kazufumi Ohkawa
PDF
教育心理学概論を読んで新人研修やってみた-教育心理学との付き合い方-
by
pupupopo88
PDF
Middlemanを使用した静的サイトの運用事例
by
pupupopo88
PDF
"総務も!!"アジャイルプラクティス!
by
pupupopo88
PDF
新人シェア研修について
by
ITmedia_HR(人事・採用)
PDF
新入社員研修資料のサンプル
by
creiajp
PPTX
研修企画書11 12term team名-tn名
by
aiesecsfc_icx2011
PDF
2016 新人研修 基本技術講座 (1)
by
エンジニア勉強会 エスキュービズム
PDF
【新人研修】ITの基礎と最新の常識
by
Masanori Saito
PDF
JavaScript 研修
by
Yuki Ishikawa
PDF
とある中堅ベンチャーの新人研修戦略 #efsta42
by
Mamiko Tsuda
PDF
新入社員の技術研修に関してありがちな問題を解決するためにやったことやるべきこと
by
pupupopo88
PPTX
インターンシップ成果報告会 発表資料
by
T2C_
PDF
伝わるプレゼンをする方法
by
Hideaki Miyake
PPTX
プレゼンの基本
by
Hiroyuki Nagataki
PDF
プレゼンテーションの考え方20140628
by
Professional University of Information and Management for Innovation (情報経営イノベーション専門職大学)
PDF
綺麗なプレゼン資料の作り方、10のテクニック
by
Manabu Uekusa
PDF
魅せるPowerPointビジネスプレゼン【実践編】
by
schoowebcampus
PDF
良いプレゼン 良いスライド
by
京大 マイコンクラブ
PPT
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
by
Shoe-g Ueyama
pythonでオフィス快適化計画
by
Kazufumi Ohkawa
教育心理学概論を読んで新人研修やってみた-教育心理学との付き合い方-
by
pupupopo88
Middlemanを使用した静的サイトの運用事例
by
pupupopo88
"総務も!!"アジャイルプラクティス!
by
pupupopo88
新人シェア研修について
by
ITmedia_HR(人事・採用)
新入社員研修資料のサンプル
by
creiajp
研修企画書11 12term team名-tn名
by
aiesecsfc_icx2011
2016 新人研修 基本技術講座 (1)
by
エンジニア勉強会 エスキュービズム
【新人研修】ITの基礎と最新の常識
by
Masanori Saito
JavaScript 研修
by
Yuki Ishikawa
とある中堅ベンチャーの新人研修戦略 #efsta42
by
Mamiko Tsuda
新入社員の技術研修に関してありがちな問題を解決するためにやったことやるべきこと
by
pupupopo88
インターンシップ成果報告会 発表資料
by
T2C_
伝わるプレゼンをする方法
by
Hideaki Miyake
プレゼンの基本
by
Hiroyuki Nagataki
プレゼンテーションの考え方20140628
by
Professional University of Information and Management for Innovation (情報経営イノベーション専門職大学)
綺麗なプレゼン資料の作り方、10のテクニック
by
Manabu Uekusa
魅せるPowerPointビジネスプレゼン【実践編】
by
schoowebcampus
良いプレゼン 良いスライド
by
京大 マイコンクラブ
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
by
Shoe-g Ueyama
Similar to 新人Git/Github研修公開用スライド(その1)
PDF
バージョン管理
by
Misa Kondo
PDF
今日から始めるGithub
by
lion-man
PPTX
私が複数人開発で感じている Git・GitHubのうまみ
by
Shihomi Katayama
PDF
Git 初心者講座 by forkwell
by
sinsoku listy
PPT
Githubことはじめ
by
tikitikipoo
PPTX
Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会
by
Katz Ueno
PDF
広島Git勉強会
by
森下 智裕
PDF
Git道場を開催してきた
by
Hiromu Shioya
KEY
Git tutorial
by
Hiroki Kouchi
KEY
20120324 git training
by
Takeshi AKIMA
PDF
GitHubの入門を読む前に読む入門書
by
相皓 卞
PDF
はじめてのGit #gitkyoto
by
Hisateru Tanaka
PDF
gitを使う準備をしよう - 初級編
by
Sanae Yamashita
PDF
会社に Github導入した話
by
Yutaka Kinjyo
PPTX
Introduction to GitHub - Codespacesハンズオン.pptx
by
Takao Tetsuro
ODP
Next-L Enju 開発ワークショップ #02
by
Kosuke Tanabe
PDF
ノンプログラマのGit入門
by
Muyuu Fujita
PPTX
Git講習会
by
galluda
PDF
バージョン管理Git
by
松本 雄貴
PDF
Python for Data Analysis第1回勉強会(+git入門)
by
Makoto Kawano
バージョン管理
by
Misa Kondo
今日から始めるGithub
by
lion-man
私が複数人開発で感じている Git・GitHubのうまみ
by
Shihomi Katayama
Git 初心者講座 by forkwell
by
sinsoku listy
Githubことはじめ
by
tikitikipoo
Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会
by
Katz Ueno
広島Git勉強会
by
森下 智裕
Git道場を開催してきた
by
Hiromu Shioya
Git tutorial
by
Hiroki Kouchi
20120324 git training
by
Takeshi AKIMA
GitHubの入門を読む前に読む入門書
by
相皓 卞
はじめてのGit #gitkyoto
by
Hisateru Tanaka
gitを使う準備をしよう - 初級編
by
Sanae Yamashita
会社に Github導入した話
by
Yutaka Kinjyo
Introduction to GitHub - Codespacesハンズオン.pptx
by
Takao Tetsuro
Next-L Enju 開発ワークショップ #02
by
Kosuke Tanabe
ノンプログラマのGit入門
by
Muyuu Fujita
Git講習会
by
galluda
バージョン管理Git
by
松本 雄貴
Python for Data Analysis第1回勉強会(+git入門)
by
Makoto Kawano
新人Git/Github研修公開用スライド(その1)
1.
Git / Github
研修 2015/6/4,5 株式会社ヴァル研究所 ぷぽ(@pupupopo88) 前半戦! 1 公開用
2.
このスライドについて 新人研修でやった内容を一部公開用に修正したもの 研修の対象(想定) 開発未経験者(数名程度) 配属も開発とは限らない HTML5とCSS3の基本はレクチャー済み イメージを持ってもらうことを優先しているため、 多少表現に無理(まちがい)があります 2
3.
ざっくりなもくじ 複数人でのファイル変更 バージョン管理システム Git・基本操作 歴史を分岐させる(ブランチ) 歴史を統合させる(マージ) 歴史をなかったことにする(リセット) 総合れんしゅう おまけ 3 p. 7 p. 46 p.
52 p.123 p.150 p.199 p.267 p.282
4.
自己紹介 「ぷぽさん」「ぷぽ氏」と呼ばれてたり します 総務です 新卒文系未経験で入社後、2年間エンジ ニア(エンジニアとはいっていない)を やってました。今年で入社4年目です。 Gitを触り始めたのは丁度2年前くらい まだまだぺーぺーです みなさんと一緒に学んでいきたいです 4
5.
本研修の目標 (なんとなく)「バージョン管理システム」がなん なのかイメージできる (なんとなく)「Git」がなんなのかイメージできる (なんとなく)「Github」がなんなのかイメージで きる GitやGithubを使うことを怖がらない 5
6.
なんとなく イメージできればおk 6
7.
はじまりはじまり 7
8.
突然ですが 8
9.
複数人で ひとつのファイルを 扱ったことはありますか 9
10.
たとえば 10
11.
たとえば2 11
12.
チームで開発(お仕事)することが増えてきます 12 これからは
13.
まずはイメージを つかんでいただくために 13
14.
実際のPJを想定して 作業をしてみましょう 14
15.
_人人人人人人人_ > 突然の課題 <  ̄Y^Y^Y^Y^Y^Y ̄ 15
16.
ひとりで作業する 16
17.
- うちわネタ多数により省略 - 17
18.
やったことは 社内用共有サーバにファイル(HTML)を配置 各自、そのファイルに手を入れてもらう ファイルを修正する さらにファイルを修正する (退社という体で)エディタを閉じる (翌日という体で)元に戻してという →うそやん!!! 18
19.
もう一度やります ※ファイルリセット 19
20.
- 再びの省略 - 20
21.
やったことは 先ほどと同様のファイルに手を入れる Aさんから修正依頼 Bさんから修正依頼 (翌日)Aさんから追加修正依頼 Cさんから「Bさんの修正」を元に戻す依頼 (更に翌日)Bさんから再度修正依頼 → …。 21
22.
_人人人人人人人人_ > 理不尽なっ! <  ̄Y^Y^Y^Y^Y^Y ̄ 22
23.
どうでした? ひとりひとり感想をどうぞ 23
24.
どうでした? ひとりひとり感想をどうぞ 「変更を自前で管理する」ってつらいですよね 23
25.
Next 24
26.
複数人で同時作業する 25
27.
やること 社内用共有サーバに置いてあるファイル (HTML)に対して、複数人で変更を加える 作業は個別にメールで指示 26
28.
どんな方法があるかな 自分がやる作業しか見えていないですよね 同じファイルを変更しなければならないですよね 方法はお任せします が、作業に入る前に考えを聞かせてください 3分程度で案出してね! 27
29.
ヒント たとえば 各自変更点を共有、変更すべき点をまとめて誰 かが全部やるとか? たとえば 各自共有サーバにあるファイルをコピー、それ ぞれ作業した後に変更点を合わせるとか? 28
30.
どうでした? ひとりひとり感想をどうぞ 29
31.
どうでした? ひとりひとり感想をどうぞ 「チームで1つのことをする」って大変ですよね 29
32.
困ることってなんだろう いつ変更したか 誰が変更したか どこを変更したか 何のために変更したか やった本人にしかわからない (本人も数日後、数か月後、数年後わからなくなる) ネットが切れると終わる(しかも社内ネットワーク) 30
33.
大変なのは わかったけど 31
34.
これらの問題 どうやったら解決できる? 32
35.
ご意見ください! 33
36.
解決……? コードに全部コメントで書く? コードが肥大化する!見にくい! 別にファイルを用意して記録しておく? プログラムはよく変更されるもの 管理が大変 すぐにわからなくなる 34
37.
これらの問題を 解決するために 35
38.
バージョン管理システム というものが存在します 36
39.
バージョン管理システムとは 安心してファイルの変更ができる 前のバージョンに戻せる、差分が見られる 自前でファイル変更に関する情報を残さなくていい いつ誰が変更したのかわかる 複数人で作業するときラク 各々の作業をマージできる 37
40.
かんたんにいうと 38
41.
こんなかんじ 39
42.
Git 40
43.
バージョン管理システム 41
44.
バージョン管理システム 41
45.
Gitの特徴 手軽にバージョンの切り替えができる 処理が高速 安心度が高い 分散型の管理 複数人で作業するのに適している 賢いマージ 42
46.
Gitを使ってみよう 43
47.
CUI vs GUI 黒い(文字ばっかりの)画面 後々がっつりやるなら絶対こっちがいい 最初は難易度高め 私も普段はこっち ソフトウェア イメージをつかむにはもってこい 今回はこっちを使います 44
48.
45
49.
まずは準備から 作業スペースを確保しましょう Finderからどうぞ documents/git_study/git_practice このディレクトリ以下で作業していきます 46
50.
Gitで管理はじめる 47
51.
Gitで管理はじめる 48
52.
• ん…何か出来ている…! Finderで確認 49
53.
そのディレクトリ以下で行われたファイルを管理 したりします .git ディレクトリ 50
54.
51
55.
リポジトリ 51
56.
管理して欲しくない ファイルがある場合 52
57.
.gitignoreさん .gitignoreというファイルに記述してあるディレ クトリやファイルは、いくらリポジトリ内にあっ ても、バージョン管理の対象になりません .DS_Storeとか、*.xlsとか、/logとか そんなの管理しなくてもいい 53
58.
リポジトリ 54
59.
かき方(例) 55 全部ハブられる
60.
もどります 56
61.
リポジトリにファイル置いてみる index.htmlをつくってください ひとまず中身はカラで大丈夫 57
62.
58
63.
歴史を刻んでいく… gitさんがこんなファイル知らんぞと言ってます ファイルを追加したことを歴史に刻みましょう 59
64.
チェックを入れると 60
65.
上のエリアに移動します 61
66.
インデックスに追加 先ほどの操作をインデックスに追加(add また は ステージング)するといいます この状態では、まだ完全に歴史として刻まれてい ません 62
67.
実際に記録する 63
68.
64
69.
65
70.
コミットメッセージ 66
71.
思い出してください ファイル変更の際、必要とされる情報ってなんで したっけ? 「いつ」「だれが」「どこを」「なぜ」変更した か 「なぜ」を残すことを心がけましょう 「なぜ」は機械には判断できない 67
72.
68
73.
記録できた!(変更点なし) 69
74.
もうちょっとわかりやすく 70
75.
71
76.
思い出してください(再) ファイル変更の際、必要とされる情報 「いつ」 「だれが」 「どこを」 「なぜ」変更したか 72
77.
73
78.
いつ 73
79.
だれが いつ 73
80.
だれが いつ どこを 73
81.
だれが いつなぜ どこを 73
82.
_人人人人人人_ > あら便利 <  ̄Y^Y^Y^Y^Y ̄ 74
83.
コミットメッセージ 「なぜ」を残すことを心がけましょう 「なぜ」は機械には判断できない 長くなる場合 1行目に概要 1行空ける 3行目に詳細を書く 75
84.
もう一度 やってみましょう 76
85.
index.htmlの変更 index.htmlにHTML5のテンプレタグを追加 77
86.
SourceTreeをみてみる 78
87.
にょきっと生えた コミット(記録)していない 変更点があるよ 79
88.
直前の記録からの変更 変更されたファイル 80
89.
直前の記録からの変更 追加された箇所 (+で背景が緑色) 81
90.
add, commitしてください 82
91.
記録できた! 83
92.
もう一度 やってみましょう 84
93.
CSSファイルの追加 デザインも変更したいのでCSSファイルを追加 「サイト全体の文字をセンター寄せにしたい」 css/common.css body {text-align: center;} 85
94.
index.htmlの変更 index.htmlでスタイルシートを読み込む 86
95.
SourceTreeをみてみる 87
96.
直前の記録からの変更 変更されたファイル 追加されたファイル 88
97.
直前の記録からの変更 追加された箇所 (+で背景が緑色) 追加されたファイル 89
98.
add, commitしてください 90
99.
記録できたー! 91
100.
ちょっとまって 92
101.
add 93
102.
add 93
103.
add commit 93
104.
この操作必要? addしてcommitってめんどくないですか? なんで一回前置きが必要なの? 94
105.
結論:あると便利 95
106.
別のシーンで やってみましょう 96
107.
index.htmlを変更する センタリングしたのにタグしか書いてなかった (body以下に何も書いていなかった) <header>タグを追加しよう <h1>タグで見出しも追加しよう あれ、cssのパス指定が間違ってた ×:common.css ○:css/common.css 97
108.
index.htmlの変更 あ、<title>タグに何も書いていなかった そういえばメニューも追加したい リスト形式でメニューを作ろう それならそれぞれページも追加しなきゃ 98
109.
common.cssの変更 メニュー リストだけど先頭の「・」をなくしたい 左側の余白が余計なのでなくしたい 99
110.
100
111.
その結果 101
112.
その結果 102
113.
103
114.
_人人人人人_ > カオス <  ̄Y^Y^Y^Y ̄ 104
115.
一気にファイル変更 しちゃったけど これ一気にコミットするとダメ…だよね? コミットメッセージどうするの? 「いろいろ変更」じゃ伝わらない まずはcssのパスが間違ってたやつをコミットし たい そこだけadd(ステージング)すればいい! 105
116.
選択してステージング ※選択行が連続していないと 一度にaddできないため、 一行ずつaddする 106
117.
指定したところだけaddされている 107
118.
それ以外は残ったまま 108
119.
コミットできた! 109
120.
もしステージングエリアがなかっ たら 記録したくないところまで記録するはめになる 記録したい部分だけ残し、他の変更点を一度破棄 する。それをコミットしてから、さっき破棄した 変更を復元するはめになる わかりにくいしめんどくさい 110
121.
好き勝手できるところ 次の歴史に刻むものを選出 歴史として記録! (ワーキングツリー、ワーキングコピー) (ステージングエリア) 111
122.
add 好き勝手できるところ 次の歴史に刻むものを選出 歴史として記録! (ワーキングツリー、ワーキングコピー) (ステージングエリア) 111
123.
add commit 好き勝手できるところ 次の歴史に刻むものを選出 歴史として記録! (ワーキングツリー、ワーキングコピー) (ステージングエリア) 111
124.
気をつけたい コミットの粒度 一度にコミットしても分からない いろいろ修正 → 何を?なんで? こまめにコミットしすぎても分かりづらい 見出しを追加 → それをセンタリング
→ → それの色を変更 → それの余白を調整 → → それの… ひとつの機能ごとにコミットしましょう 112
125.
練習問題 先ほど変更したものを全部コミットしましょう ポイント どんな単位でコミットすればいい? コミットメッセージはどう書くのがいい? 113
126.
歴史を分岐させる 114
127.
思い出してください バージョン管理システムの特徴 安心してファイルの変更ができる 前のバージョンに戻せる 特にGitは 手軽にバージョンの切り替えができる →どういうこと? 115
128.
枝(ブランチ)分かれ 116
129.
えいっ 枝(ブランチ)分かれ 116
130.
えいっ やぁっ 枝(ブランチ)分かれ 116
131.
えいっ やぁっ _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 枝(ブランチ)分かれ 116
132.
とぉっ えいっ やぁっ _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 枝(ブランチ)分かれ 116
133.
ブランチの種類 今まで操作していたのはmasterブランチ(本流) 基本masterブランチは直接いじらない 何か作業をする時は、その作業ベースでブランチをつ くる バグの修正、新規ページの作成 etc… ブランチの名前は自分で命名する 作業終了後、問題なければmasterに合流させる 117
134.
master(本流) 118
135.
master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 118
136.
ブランチ master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 118
137.
ブランチ master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 118
138.
ブランチ master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ _人人人人_ > 合流 <  ̄Y^Y^Y ̄ 118
139.
たとえば サイトをリニューアルしたい A案とB案があります だいたいどんな感じになるかな 実物見てどっちが良いか決めたいな 119
140.
master(本流) それぞれのブランチで ファイルを変更していく 120
141.
master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ それぞれのブランチで ファイルを変更していく 120
142.
master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ それぞれのブランチで ファイルを変更していく 120
143.
A案用のブランチ master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ それぞれのブランチで ファイルを変更していく 120
144.
A案用のブランチ master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ それぞれのブランチで ファイルを変更していく _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 120
145.
A案用のブランチ master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ それぞれのブランチで ファイルを変更していく _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 120
146.
A案用のブランチ master(本流) B案用のブランチ _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ それぞれのブランチで ファイルを変更していく _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 120
147.
実際にやってみよう ブランチを生やす 121
148.
今回編集するところ バージョン管理システムとは(index.html) 安心してファイルの変更ができる 前のバージョンに戻せる 差分が見られる 自前でファイル変更に関する情報を残さなくていい いつ誰がどこを変更したのかわかる 複数人で作業する時ラク 各々の作業をマージできる 122
149.
ブランチを生やす 枝分かれさせるには名前が必要 それは何の作業をするために分岐させるのか 沢山切ってたら何がどれか分からなくなる 必ず意味のある名前を! 命名規則はプロジェクトなどによって違うので 注意! 123
150.
こちらから 124
151.
125
152.
ブランチつくれた 作成したブランチ 126
153.
127
154.
チェックアウト#とは 指定のコミット(時点)へ移動する操作 あの頃に戻りたい…。 リポジトリをその頃の状態に戻せる 新規ブランチをチェックアウト ブランチを作成して、そのブランチの最新のコミッ トに移動する コミットをすると、チェックアウトしている(今 いる)ブランチで枝がニョキニョキ増えていく 128
155.
ブランチを作成してチェックアウトした後、 コミットしていくの図 master(本流) 129
156.
_人人人人_ > 分岐 <  ̄Y^Y^Y ̄ ブランチを作成してチェックアウトした後、 コミットしていくの図 master(本流) 129
157.
_人人人人_ > 分岐 <  ̄Y^Y^Y ̄ _人人人人人人人人人人人人人人人_ > ブランチAにチェックアウト <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄ ブランチを作成してチェックアウトした後、 コミットしていくの図 master(本流) 129
158.
_人人人人人人_ > コミット <  ̄Y^Y^Y^Y^Y ̄ _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ _人人人人人人人人人人人人人人人_ > ブランチAにチェックアウト <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄ ブランチを作成してチェックアウトした後、 コミットしていくの図 master(本流) 129
159.
ブランチA _人人人人人人_ > コミット <  ̄Y^Y^Y^Y^Y ̄ _人人人人人人_ > コミット <  ̄Y^Y^Y^Y^Y ̄ _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ _人人人人人人人人人人人人人人人_ > ブランチAにチェックアウト <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄ ブランチを作成してチェックアウトした後、 コミットしていくの図 master(本流) 129
160.
チェックアウト 忘れてたの図 130
161.
チェックアウト 忘れてたの図 _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 130
162.
ブランチA チェックアウト 忘れてたの図 _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 130
163.
ブランチA チェックアウト忘れてた チェックアウト 忘れてたの図 _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 130
164.
ブランチA チェックアウト忘れてた チェックアウト 忘れてたの図 _人人人人人人_ > コミット <  ̄Y^Y^Y^Y^Y ̄ _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 130
165.
ブランチA チェックアウト忘れてた チェックアウト 忘れてたの図 _人人人人人人_ > コミット <  ̄Y^Y^Y^Y^Y ̄ master(本流) _人人人人人人_ > コミット <  ̄Y^Y^Y^Y^Y ̄ _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 130
166.
131
167.
master(本流) 現状 132
168.
master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 現状 132
169.
master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ _人人人人人人人人人_ > チェックアウト <  ̄Y^Y^Y^Y^Y^Y^Y ̄ 現状 132
170.
add-about-vcs 次コミットしたらこうなる master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ _人人人人人人人人人_ > チェックアウト <  ̄Y^Y^Y^Y^Y^Y^Y ̄ 現状 132
171.
ファイルを変更する バージョン管理システムとは(index.html) 安心してファイルの変更ができる 前のバージョンに戻せる 差分が見られる 自前でファイル変更に関する情報を残さなくていい いつ誰がどこを変更したのかわかる 複数人で作業する時ラク 各々の作業をマージできる 133
172.
134
173.
コミットできた! 135
174.
その結果 136
175.
なんかイケてない… 137
176.
ページレイアウト どうするか 試行錯誤したい 138
177.
A案用のブランチ master(本流) B案用のブランチ _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ それぞれのブランチで ファイルを変更していく _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 139
178.
_人人人人人_ > これだ <  ̄Y^Y^Y^Y ̄ 140
179.
その前に 一旦変更を本流に取り込みましょう これ 141
180.
!注意! 親(master)ブランチから 子ブランチ(add-about-vcs)を統合させる まず親ブランチにチェックアウトしてから統合 142
181.
143
182.
masterをチェックアウト ダブルクリック or 右クリックから 144
183.
145
184.
146
185.
147
186.
マージできた 148
187.
なんかブランチ 一本になってるけど 149
188.
master(本流) 150
189.
master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 150
190.
ブランチ master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 150
191.
ブランチ master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ 150
192.
ブランチ master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ _人人人人_ > 合流 <  ̄Y^Y^Y ̄ 150
193.
ブランチ master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ _人人人人_ > 合流 <  ̄Y^Y^Y ̄ココと 150
194.
ブランチ master(本流) _人人人人_ > 分岐 <  ̄Y^Y^Y ̄ _人人人人_ > 合流 <  ̄Y^Y^Y ̄ココと ココが同じ内容 になるなら 150
195.
ブランチ 151
196.
ブランチ こうしちゃえ! master(本流) 151
197.
はやおくり! Fast-Forward 152
198.
ちなみに マージと同時に新しくコミットを作りたい場合 こういう 表示にしたい 153
199.
154
200.
マージできた 155
201.
Next 156
202.
実際にやってみよう ページレイアウト変える 157
203.
プランAとプランB プランA このまま全体がセンター寄りのレイアウト プランB 文字は左寄せで中のコンテンツが真ん中寄り どっちがいいかな 158
204.
ブランチを生やす centering-style このまま全体がセンター寄りのレイアウト left-justify-style 文字は左寄せで中のコンテンツが真ん中寄り 159
205.
160
206.
ブランチを切りかえて ファイルを変更していく 161
207.
centering-style 162
208.
body { text-align: center; margin:
10px auto; display: table; } nav { background: #e0e0e0; } nav ul { padding: 0; } nav ul a li { list-style: none; } article { margin-top: 1em; padding: 0 1em; border: 1px solid #e0e0e0; } section ul { text-align: left; } コピペ用 163
209.
164
210.
165
211.
166
212.
167
213.
centering-style 168
214.
left-justify-style プランB 文字は左寄せで中のコンテンツが真ん中寄 り チェックアウトを忘れずに! ブランチ切った時点の 状態に戻った! 169
215.
left-justify-style 170
216.
nav { background: #e0e0e0; } nav
ul { padding: 10px 20px; } nav ul a li { list-style: none; } article { margin-top: 10px; padding: 10px; border: 1px solid #e0e0e0; } コピペ用 171
217.
172
218.
173
219.
174
220.
left-justify-style 175
221.
left-justify-style 176
222.
枝っぽくなった 177
223.
centering-style ブランチにきりかえて index.htmlをみてみる 178
224.
centering-styleだ! 179
225.
_人人人人人_ > すごい <  ̄Y^Y^Y^Y ̄ 180
226.
こんなに簡単に出来たら 安心してファイルの変更ができる ファイル変更によって何か問題が起こっても、 その問題が起きる前の状態にすぐ戻れる 試行錯誤しやすい 181
227.
NEXT 182
228.
masterにマージしよう よし!これでOKとなったら本流に取り込みたい 全部センター寄りの方が統一性あるのでは? 今回はプランAを採用したい centering-styleをマージする! 183
229.
master 184
230.
master 184
231.
centering-style master 184
232.
centering-style _人人人人人_ > マージ <  ̄Y^Y^Y^Y ̄ master 184
233.
やってみよう 185
234.
masterに チェックアウト 186
235.
centering-styleを選択 選択 187
236.
マージできた 188
237.
NEXT 189
238.
ファイルの変更を なかったことにしたい (reset/リセット) 190
239.
世の中には 理不尽なこともあります 191
240.
いや、B案にするのだ 192
241.
_人人人人人人人_ > ファッ!? <  ̄Y^Y^Y^Y^Y^Y ̄ 193
242.
思い出してください 元に戻してって言われても戻せなかった 「元」がなんだったか覚えてない エディタ閉じちゃったらバックも使えない index_yyyymmdd.html index_old.html ファイルが多くてどれが本当か分からない 194
243.
Gitなら簡単に 戻せるんですよ! 195
244.
戻したい時点のコミットを選択 右クリック 選択 196
245.
モードをHardにする 197
246.
198
247.
199
248.
無視して進めましょう 200
249.
元に戻った! 201
250.
で、 202
251.
さっきのモードって何? 203
252.
ひとつひとつ やってみましょう (だってすぐ戻せるんだもん) 204
253.
もう一度マージ 205
254.
もう一度リセット 206
255.
モードをMixedにする 207
256.
あれっ 208
257.
ファイルを変更した状態に 209
258.
確認その1 210
259.
centering-styleブランチで 変更した内容は保持されるが 211
260.
確認その2 212
261.
インデックスをリセットする (addする前の状態にする) 213
262.
もうひとつやってみましょう (だってすぐ戻せるんだもん) 214
263.
その前に 215
264.
変更をなかったことにする 216
265.
変更が破棄された reset(hard)した時と 同じ状態に! 217
266.
centering-styleを 再びマージ 218
267.
モードをsoftにしてリセット 219
268.
ファイルを変更した状態に 220
269.
確認 221
270.
centering-styleブランチで 変更した内容も保持されて 222
271.
ステージングした状態にする (addした後の状態にする) 223
272.
224
273.
つまり 225
274.
リセットのモード Soft ファイルを変更してaddした状態まで戻す mixed ファイルを変更してaddする前の状態まで戻す Hard ファイルを変更する前に戻す 226
275.
リセットのモード Soft ゆる〜いリセット Mixed そこそこゆる〜いリセット Hard つよいリセット 迷ったらSoftに しておけば安全 227
276.
228
277.
229
278.
改めて left-justify-style ブランチをマージ 230
279.
tips 231
280.
マージ時は常に新しい コミットを作る いちいち毎回チェック入れるの面倒 SourceTree > 環境設定から設定 これ 232
281.
マージ時は常に新しい コミットを作る 233
282.
left-justify-styleを選択 最初から 選択されている 234
283.
マージできた 235
284.
思い出してください 元に戻してって言われても戻せなかった 「元」がなんだったか覚えてない エディタ閉じちゃったらバックも使えない index_yyyymmdd.html index_old.html ファイルが多くてどれが本当か分からない 236
285.
思い出してください2 バージョン管理システムの特徴 安心してファイルの変更ができる 前のバージョンに戻せる 特にGitは 手軽にバージョンの切り替えができる 237
286.
_人人人人人人人人人_ > 気軽にやり直せる <  ̄Y^Y^Y^YY^Y^Y^Y ̄ 238
287.
直前のコミットを やり直したい (上書きしたい) 239
288.
headerのスタイル変更 目立たせたい 濃いめの背景(#000000) テキストの色を白にしたい(#FFFFFF) トップページへのリンクも付けたい ブランチ名:change-header-style 240
289.
241
290.
242
291.
243
292.
やっぱり真っ黒って イケてない 243
293.
やっぱり真っ黒って イケてない それだけのために新し いコミット作るのも 243
294.
244
295.
245
296.
246
297.
上書きできた 247
298.
こんな時につかおう コミットした後にtypo(タイピングミス)を 見つけてしまった コミットした後に変換ミスを見つけてしまった わざわざ新しいコミットを作るまでもない時に → 直前のコミットしか上書きできないので注意! (この方法では) 248
299.
ヘッダ変更の続き 249
300.
この辺の 余白いらない 250
301.
251
302.
252
303.
253
304.
変更できたので マージする 254
305.
右クリックからでも マージできる 255
306.
右クリックからでも マージできる 256
307.
右クリックからでも マージできた! 257
308.
総合れんしゅう ※あくまで操作に慣れるためで 課題については特に意味ないです 258
309.
1. リポジトリを作成 「my_profile」というリポジトリを作成 「yourname.md」(自分の名前)というファイルを 作成 一行目に「# 自己紹介」と記述 add、コミットしてください 259
310.
2. 基礎情報を追記 「yourname.md」を編集 ## 基礎情報 +
名前:あなたの名前 + 誕生日:YYYY年M月D日 + 出身: + 血液型: 作業は「add-basic-info」ブランチを作成してから 260
311.
3. add-basic-infoをマージ 「add-basic-info」ブランチをmasterにマージ マージ時には新しいコミットを作成するように 261
312.
4. 自分の好きなものを追記する ブランチは「add-favorite-things」 ## 好きな食べ物 +
寿司 + カニ ## 好きなお酒 + ビール + 日本酒 262
313.
5. add-favorite-thingsを masterにマージ マージ時には新しいコミットを作成するように 263
314.
6. 自分の嫌いなものを追記する ブランチは「add-unfavorite-things」 嫌いな食べ物 嫌いな生き物 嫌いな季節 264
315.
7. 自分の嫌いなものを編集する 「嫌いな食べ物」「嫌いな生き物」「嫌いな季節」 とコミットしたけれど、動物愛護団体に怒られる のは嫌なので「嫌いな生き物」の記述を削除 (だけど「嫌いな季節」はのこしたい) ヒント 「嫌いな食べ物」をコミットした時点までの歴史 を取り消して、「嫌いな季節」の部分だけコミッ トしなおす 265
316.
8. add-unfavorite-thingsを masterにマージ マージ時には新しいコミットを作成するように 266
317.
9.自分の経歴を追加 「yourname.md」を編集 ## 経歴 + 幼稚園:なんちゃら幼稚園 +
小学校:なんちゃら小学校 + 中学校:なんちゃら中学校 作業は「add-my-career」ブランチを作成してか ら 267
318.
10.自分の経歴の詳細を追加 あっ、せっかくなので一言二言追加したい! 新たに「add-detail-my-career」ブランチを作成 してから作業する ## 経歴 + 幼稚園:なんちゃら幼稚園 +
結構活発だった気がする 268
319.
11. add-detail-my-career ブランチをマージ 「add-detail-my-career」ブランチを 「add-my-career」ブランチにマージ 269
320.
add-my-career master add-detail- my-career こんなイメージ 270
321.
12. 再び自分の経歴を追加 高校と大学の項目をそれぞれ追加 今度は詳細も同時に追加していくスタイルで 追加できたらmasterにマージする 新たにこみt(ry 271
322.
こわくないGit 神スライド 本当は怖くない!デザイナーがGitを大好きになっ た5つの理由 絵がかわいい、例がわかりやすい LearnGitBranching 触りながら学べるけど日本語訳わかりづらい 学習のすすめ 272
323.
おまけ 用語集的なもの 273
324.
リポジトリ ファイルを管理するプロジェクトの単位 .gitがあるディレクトリ=gitのリポジトリ 参考スライド 274
325.
add(ステージング) コミットする前に必要な動作 ファイルの変更をした後、コミットしたい部分を 選ぶこと 参考スライド 基礎 行単位でadd commitとの関係 275
326.
commit(コミット) 実際にファイルの変更を記録する動作 commitする前にaddしないと何も記録できない 参考スライド 基礎 addとの関係 276
327.
branch(ブランチ) ある一連のコミットの連なりを、ほかと区別する ために設定するもの リポジトリを新規作成してコミットすると、 masterというブランチが作られる 一般的に、作業ベースでブランチを作ってmaster に統合させる作業フローが多い 参考スライド 277
328.
checkout(チェックアウト) あるコミット(時点)へ移動する操作 リポジトリ内はその時点の状態に変化する 参考スライド 278
329.
merge(マージ) branchどうしを統合させる動作 新たにコミットを作るマージと、 早送りマージがある 参考スライド 基礎 早送りマージ 279
330.
reset(リセット) 変更(コミット)を取り消す操作 Soft, Mixed, Hard
の3つのモードがある 参考スライド 基礎 リセットのモード 280
Download