Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

はじめてのGit forデザイナー&コーダー

52,398 views

Published on

Gitってなに?
プログラマではないけれど、Git導入するメリットは?

いわゆるデザイナーやコーダー向けの、「Gitとは?」「Gitの構造とは?」…のやさしい説明スライドです。

デザイナーやコーダーがGitを使う際には、とっつきにくい「コマンド」をまったく覚えなくてもOK!
便利なGUIツールが沢山出ています。
(私はWindowsなのでGit Extensions派)

Gitの言葉や構造を理解するための、社内勉強会で使った資料です。

Published in: Technology
  • Be the first to comment

はじめてのGit forデザイナー&コーダー

  1. 1. はじめてのGit For コーダー&デザイナー (非エンジニアな人)
  2. 2. CHAPTER1 そもそも、どんなメンドクサイことがよく起こっているのか
  3. 3. のまえに・・・ Git
  4. 4. こんなことありませんか? 全体リニューアル中なのに、 いまの本番の修正が入る
  5. 5. そういえばさ このバナーだけ 先にアップしてくれ ない? あと 新しい方のデザインにも バナーいれといて
  6. 6. こんなこともありませんか? 修正したファイルを アップしてもらうのが 超面倒
  7. 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. 8. あんなこともありませんか? 最新っぽい名前の フォルダが出来まくる
  9. 9. で、どれが最新?
  10. 10. こんなことだってありませんか? 作業中のファイルが いつの間にか 上書き保存されていた
  11. 11. 修正終わった! えっ?それ、今 上書き保存しちゃったけど
  12. 12. たまにありますよね
  13. 13. そんなことをふせぐのが です Git
  14. 14. CHAPTER1のまとめ 1. バージョンがごっちゃになる 2. 作業ファイルのやりとりが面倒 3. 上書き保存のリスクが高し よくあるアチャー
  15. 15. 1. バージョンがごっちゃになる 2. 作業ファイルのやりとりが面倒 3. 上書き保存のリスクが高し Gitならこれができます
  16. 16. 1. バージョンがごっちゃになる 2. 作業ファイルのやりとりが面倒 3. 上書き保存のリスクが高し Gitならこれができます自動でできるよ! 最新版もわかるよ!
  17. 17. 1. バージョンがごっちゃになる 2. 作業ファイルのやりとりが面倒 3. 上書き保存のリスクが高し Gitならこれができます コマンド 一つで できるよ
  18. 18. 1. バージョンがごっちゃになる 2. 作業ファイルのやりとりが面倒 3. 上書き保存のリスクが高し Gitならこれができます 上書き保存防止 & うまくくっつけてくれるよ!
  19. 19. CHAPTER2 で、Gitとはなんぞや?
  20. 20. では早速 ができることを 見てみましょう Git
  21. 21. そのまえに
  22. 22. のざっくりした仕組みを 3つだけ覚えましょう Git 覚えておくと あとあとラクです
  23. 23. その1
  24. 24. その① 自分と、共有の作業場所がそれぞれあります 共有の環境 (本番など) Aさんの環境 Bさんの環境
  25. 25. 自分の作業場所は、 基本的に勝手に上書きされることはありません Aさんの環境 Bさんの環境
  26. 26. 他人の環境は 上書きできません Aさんの環境 Bさんの環境
  27. 27. その2
  28. 28. その② 自分と、共有の作業場所のファイルのやりとりは Gitを使っておこないます 共有の環境 (本番など) Aさんの環境 Bさんの環境 Git Git
  29. 29. AさんからBさんに渡したいものも 基本的には共有の環境を通すことになります 共有の環境 (本番など) Aさんの環境 Bさんの環境
  30. 30. Aさんの環境 Bさんの環境 共有の環境 (本番など)
  31. 31. Aさんの環境 Bさんの環境 共有の環境 (本番など)
  32. 32. OK?
  33. 33. ではその3
  34. 34. その③ 作業内容を、スクリーンショットのように 場所ごとまるっと保存しておけます 「いつ」「どのファイルの」「どこを」「どのように変更したか」 ごと、まるっと保存します
  35. 35. 7/20に、Aというフォルダの Bというファイルの 5-8行目だけ変更したよ 7/20 15:58の状態
  36. 36. 7/22には、Aというフォルダの Bというファイルの 9-12行目だけ変更したよ 7/22 9:37の状態
  37. 37. これがミソ
  38. 38. Aさんの環境 より具体的にみてみましょう Bさんの環境
  39. 39. Aさんの環境 より具体的にみてみましょう Bさんの環境 このフォルダとファイルを 新しく追加しました
  40. 40. Aさんの環境 より具体的にみてみましょう Bさんの環境 この状態をいったん 「保存」します。
  41. 41. Aさんの環境 より具体的にみてみましょう Bさんの環境 【7/20 15:58の状態】
  42. 42. Aさんの環境 より具体的にみてみましょう Bさんの環境 【7/20 15:58の状態】 を、共有の環境に アップします
  43. 43. Aさんの環境 より具体的にみてみましょう Bさんの環境 共有の環境
  44. 44. Aさんの環境 より具体的にみてみましょう Bさんの環境 共有の環境
  45. 45. Aさんの環境 より具体的にみてみましょう Bさんの環境 共有の環境 共有の環境が、 【7/20 15:58の状態】 になりました
  46. 46. Aさんの環境 より具体的にみてみましょう Bさんの環境 共有の環境 つぎに、 Bさんが作業するには 共有の環境から 【7/20 15:58の状態】 を持ってきます
  47. 47. Aさんの環境 より具体的にみてみましょう Bさんの環境 共有の環境
  48. 48. Aさんの環境 より具体的にみてみましょう Bさんの環境 共有の環境
  49. 49. Aさんの環境 より具体的にみてみましょう Bさんの環境 共有の環境 Bさんの環境も、 【7/20 15:58の状態】 になりました
  50. 50. これらの作業は コマンドで サクサクできます (demoみてね)
  51. 51. demo
  52. 52. このように、Gitを使うと が とっても簡単です 複数のフォルダや ファイルのやりとり
  53. 53. さらに!
  54. 54. 同じ文章を変更していても、 変更箇所がかぶっていなかったら 自動でくっつけられちゃいます ここはAさんが 変更したところ ここはBさんが 変更したところ
  55. 55. Aさんのファイル Bさんのファイル
  56. 56. + Aさんのファイル Bさんのファイル
  57. 57. + Aさんのファイル Bさんのファイル
  58. 58. + Aさんのファイル Bさんのファイル
  59. 59. ね?
  60. 60. 共同作業に 超便利!
  61. 61. CHAPTER3 Gitのキホンの動きを知る
  62. 62. では最後に Gitの基本用語 & 基本的な動きを覚えましょう
  63. 63. 用語① ブランチ
  64. 64. 枝 という意味です
  65. 65. 人生においては
  66. 66. 「あのときこうしていれば…」
  67. 67. というのは妄想ですが、
  68. 68. Gitでは実現できます
  69. 69. 「A」というファイルに 「AAA」という内容追加した
  70. 70. おなじ「A」というファイルに 「BBB」という内容追加した
  71. 71. これらの、それぞれを 「ブランチ」と呼びます
  72. 72. 「A」というファイルに 「AAA」という内容追加した おなじ「A」というファイルに 「BBB」という内容追加した ←ブランチA ←ブランチB
  73. 73. このブランチを切り替えると、 開発環境もかわります
  74. 74. 例。
  75. 75. 純情ブランチ
  76. 76. 不純ブランチ
  77. 77. ちなみにこの例は 私のGitを全面的にサポートしてくれた N井先輩がおしえてくれた例です
  78. 78. ブランチは 好きな時点の状態から作れて いくつでも作れます
  79. 79. ブランチA
  80. 80. ブランチB
  81. 81. ブランチB
  82. 82. ブランチA
  83. 83. ブランチC
  84. 84. ブランチC
  85. 85. ブランチC ブランチA ブランチB
  86. 86. そして 合体させることもできます
  87. 87. ブランチAと ブランチBの内容を 合体!
  88. 88. この、合体することを
  89. 89. マージ
  90. 90. といいます
  91. 91. といいます テストに出るよ!
  92. 92. そして先ほどからでている ナゾの○
  93. 93. これは、状態を保存した! というその状態のことで
  94. 94. コミット
  95. 95. といいます
  96. 96. といいます! 超テストに出るよ!
  97. 97. つまり、Gitで バージョンを管理すると いうのは
  98. 98. ブランチ
  99. 99. に、
  100. 100. コミット
  101. 101. を、 たくさん積んでいく ことなのです
  102. 102. ブランチA
  103. 103. ブランチB
  104. 104. ブランチB
  105. 105. ブランチA
  106. 106. ブランチC
  107. 107. ブランチC
  108. 108. ゲーマーな方なら ピンと来やすいと思いますが
  109. 109. いろいろな人生を その都度セーブするような そんなイメージですネ
  110. 110. 次回「Gitをはじめよう!」 では
  111. 111. この「ブランチ」と 「コミット」を 実際に練習してみましょう!
  112. 112. 今日はここまで! お疲れ様でした 株式会社ファブリカコミュニケーションズ 企画部 山本紗依子

×