Gitってなに？ プログラマではないけれど、Git導入するメリットは？ いわゆるデザイナーやコーダー向けの、「Gitとは？」「Gitの構造とは？」…のやさしい説明スライドです。 デザイナーやコーダーがGitを使う際には、とっつきにくい「コマンド」をまったく覚えなくてもOK！ 便利なGUIツールが沢山出ています。 （私はWindowsなのでGit Extensions派） Gitの言葉や構造を理解するための、社内勉強会で使った資料です。

1. はじめてのGit
For コーダー＆デザイナー
（非エンジニアな人）

2. CHAPTER1
そもそも、どんなメンドクサイことがよく起こっているのか

3. のまえに・・・
Git

4. こんなことありませんか？
全体リニューアル中なのに、
いまの本番の修正が入る

5. そういえばさ
このバナーだけ
先にアップしてくれ
ない？
あと
新しい方のデザインにも
バナーいれといて

6. こんなこともありませんか？
修正したファイルを
アップしてもらうのが
超面倒

7. すいません
index.htmlと
shop1.htmlと
basic.cssと
shop_page.cssをアップして
ください
index.htmlが/www/viewの下で
shop1.htmlが/static/pagesの下で
basic.cssは/www/publicの下で
shop_page.cssは/www/hojin/shop
の下です
どこの
ディレクトリ？
ふえるほどメンドクサイ

8. あんなこともありませんか？
最新っぽい名前の
フォルダが出来まくる

9. で、どれが最新？

10. こんなことだってありませんか？
作業中のファイルが
いつの間にか
上書き保存されていた

11. 修正終わった！
えっ？それ、今
上書き保存しちゃったけど

12. たまにありますよね

13. そんなことをふせぐのが
です
Git

14. CHAPTER1のまとめ
1. バージョンがごっちゃになる
2. 作業ファイルのやりとりが面倒
3. 上書き保存のリスクが高し
よくあるｱﾁｬｰ

15. 1. バージョンがごっちゃになる
2. 作業ファイルのやりとりが面倒
3. 上書き保存のリスクが高し
Gitならこれができます

16. 1. バージョンがごっちゃになる
2. 作業ファイルのやりとりが面倒
3. 上書き保存のリスクが高し
Gitならこれができます自動でできるよ！
最新版もわかるよ！

17. 1. バージョンがごっちゃになる
2. 作業ファイルのやりとりが面倒
3. 上書き保存のリスクが高し
Gitならこれができます
コマンド
一つで
できるよ

18. 1. バージョンがごっちゃになる
2. 作業ファイルのやりとりが面倒
3. 上書き保存のリスクが高し
Gitならこれができます
上書き保存防止
＆
うまくくっつけてくれるよ！

19. CHAPTER2
で、Gitとはなんぞや？

20. では早速
ができることを
見てみましょう
Git

21. そのまえに

22. のざっくりした仕組みを
3つだけ覚えましょう
Git
覚えておくと
あとあとラクです

23. その１

24. その①
自分と、共有の作業場所がそれぞれあります
共有の環境
（本番など）
Ａさんの環境 Ｂさんの環境

25. 自分の作業場所は、
基本的に勝手に上書きされることはありません
Ａさんの環境 Ｂさんの環境

26. 他人の環境は
上書きできません
Ａさんの環境 Ｂさんの環境

27. その２

28. その②
自分と、共有の作業場所のファイルのやりとりは
Gitを使っておこないます
共有の環境
（本番など）
Ａさんの環境 Ｂさんの環境
Git Git

29. AさんからBさんに渡したいものも
基本的には共有の環境を通すことになります
共有の環境
（本番など）
Ａさんの環境 Ｂさんの環境

30. Ａさんの環境 Ｂさんの環境
共有の環境
（本番など）

31. Ａさんの環境 Ｂさんの環境
共有の環境
（本番など）

32. OK？

33. ではその３

34. その③
作業内容を、スクリーンショットのように
場所ごとまるっと保存しておけます
「いつ」「どのファイルの」「どこを」「どのように変更したか」
ごと、まるっと保存します

35. 7/20に、Aというフォルダの
Bというファイルの
5-8行目だけ変更したよ
7/20 15:58の状態

36. 7/22には、Aというフォルダの
Bというファイルの
9-12行目だけ変更したよ
7/22 9:37の状態

37. これがミソ

38. Ａさんの環境
より具体的にみてみましょう
Bさんの環境

39. Ａさんの環境
より具体的にみてみましょう
Bさんの環境
このフォルダとファイルを
新しく追加しました

40. Ａさんの環境
より具体的にみてみましょう
Bさんの環境
この状態をいったん
「保存」します。

41. Ａさんの環境
より具体的にみてみましょう
Bさんの環境
【7/20 15:58の状態】

42. Ａさんの環境
より具体的にみてみましょう
Bさんの環境
【7/20 15:58の状態】
を、共有の環境に
アップします

43. Ａさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境

44. Ａさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境

45. Ａさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境
共有の環境が、
【7/20 15:58の状態】
になりました

46. Ａさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境
つぎに、
Bさんが作業するには
共有の環境から
【7/20 15:58の状態】
を持ってきます

47. Ａさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境

48. Ａさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境

49. Ａさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境
Bさんの環境も、
【7/20 15:58の状態】
になりました

50. これらの作業は
コマンドで
サクサクできます
（demoみてね）

51. demo

52. このように、Gitを使うと
が
とっても簡単です
複数のフォルダや
ファイルのやりとり

53. さらに！

54. 同じ文章を変更していても、
変更箇所がかぶっていなかったら
自動でくっつけられちゃいます
ここはAさんが
変更したところ
ここはBさんが
変更したところ

55. Aさんのファイル Bさんのファイル

56. ＋
Aさんのファイル Bさんのファイル

57. ＋
Aさんのファイル Bさんのファイル

58. ＋
Aさんのファイル Bさんのファイル

59. ね？

60. 共同作業に
超便利！

61. CHAPTER3
Gitのキホンの動きを知る

62. では最後に
Gitの基本用語
＆
基本的な動きを覚えましょう

63. 用語①
ブランチ

65. 枝 という意味です

66. 人生においては

67. 「あのときこうしていれば…」

68. というのは妄想ですが、

69. Gitでは実現できます

71. 「A」というファイルに
「AAA」という内容追加した

72. おなじ「A」というファイルに
「BBB」という内容追加した

73. これらの、それぞれを
「ブランチ」と呼びます

74. 「A」というファイルに
「AAA」という内容追加した
おなじ「A」というファイルに
「BBB」という内容追加した
←ブランチA
←ブランチB

75. このブランチを切り替えると、
開発環境もかわります

76. 例。

77. 純情ブランチ

78. 不純ブランチ

79. ちなみにこの例は
私のGitを全面的にサポートしてくれた
N井先輩がおしえてくれた例です

80. ブランチは
好きな時点の状態から作れて
いくつでも作れます

81. ブランチA

82. ブランチB

83. ブランチB

84. ブランチA

85. ブランチC

86. ブランチC

88. ブランチC
ブランチA
ブランチB

89. そして
合体させることもできます

92. ブランチAと
ブランチBの内容を
合体！

93. この、合体することを

94. マージ

95. といいます

96. といいます
テストに出るよ！

97. そして先ほどからでている
ナゾの○

100. これは、状態を保存した！
というその状態のことで

101. コミット

102. といいます

103. といいます！
超テストに出るよ！

104. つまり、Gitで
バージョンを管理すると
いうのは

105. ブランチ

106. に、

107. コミット

108. を、
たくさん積んでいく
ことなのです

109. ブランチA

110. ブランチB

111. ブランチB

112. ブランチA

113. ブランチC

114. ブランチC

115. ゲーマーな方なら
ピンと来やすいと思いますが

116. いろいろな人生を
その都度セーブするような
そんなイメージですネ

117. 次回「Gitをはじめよう！」
では

118. この「ブランチ」と
「コミット」を
実際に練習してみましょう！

119. 今日はここまで！
お疲れ様でした
株式会社ファブリカコミュニケーションズ 企画部 山本紗依子