About Git/Github

This slide is description of Git and Github for our development team.

Transcript

1. NUTMEG Git Yushiro Dodo
2. はじめに 1 技大祭実行委員 情報局 0
3. 「Git」とは ファイルのバージョン管理ツール で す はじめに
4. バージョン管 理ツール データを保存するだけでなく、 誰が、いつ、どこを 編集したか。 その履歴も保存管理するツール
5. バージョン管 理ツール
6. バージョン管 理ツール
7. バージョン管 理ツール データを保存するだけでなく、 誰が、いつ、どこを 編集したか。 その履歴も保存管理するツール
8. Git できること 02 技大祭実行委員 情報局
9. Git 特徴 1. ファイルのバージョン管理 2. 上書きされたりすることなく、 　一つのファイルを複数人で編集
10. Git できること • 個人の作業場所と共有の作業場所 がある。 • 作業内容の保存と共有ができる ざっくり説明 共有の作業場所 自分の作業場所 別の人の作業場所
11. Git できること • 個人の作業場所と共有の作業場所 がある。 • 作業内容の保存と共有ができる ざっくり説明 共有の作業場所 自分の作業場所 別の人の作業場所
12. Git 用語説明 直訳すると「貯蔵庫」 データを保管する場所のこと。 リモートリポジトリ ローカルリポジトリ の2種類がある リポジトリ
13. Git 用語説明 サーバ上に置かれるリポジトリ 1つしか存在せず、 みんなで共有できる。 一番大事で、 メインとなるリポジトリ リモートリポジトリ
14. Git 用語説明 個人個人のPC上に作られる リポジトリ 開発メンバーの数だけできる。 ローカルリポジトリ
15. Git できること • 個人の作業場所と共有の作業場所 がある。 • 作業内容の保存と共有ができる ざっくり説明 リモートリポジトリ ローカルリポジトリ ローカルリポジトリ
16. Git できること ”fuga”というファイルの 4~6行目を編集 作業内容の保存 - hoge |- fuga(update) ローカルリポジトリ リモートリポジトリ - hoge |- fuga 1 =========== 2 =========== 3 =========== 4 =========== 5 =========== 6 =========== 7 =========== 8 =========== 9 =========== 10 =========== 11 =========== 12 ===========
17. Git できること このファイルを リモートリポジトリに共有 作業内容の保存 - hoge |- fuga(update) ローカルリポジトリ リモートリポジトリ - hoge |- fuga 1 =========== 2 =========== 3 =========== 4 =========== 5 =========== 6 =========== 7 =========== 8 =========== 9 =========== 10 =========== 11 =========== 12 ===========
18. Git できること このファイルを リモートリポジトリに共有 作業内容の保存 - hoge |- fuga(update) ローカルリポジトリ リモートリポジトリ - hoge |-fuga(update) 1 =========== 2 =========== 3 =========== 4 =========== 5 =========== 6 =========== 7 =========== 8 =========== 9 =========== 10 =========== 11 =========== 12 ===========
19. Git できること 共有されたファイルは 他の人も持ってこれる 作業内容の共有 - hoge |- fuga(update) ローカルリポジトリ リモートリポジトリ - hoge |-fuga(update) 1 =========== 2 =========== 3 =========== 4 =========== 5 =========== 6 =========== 7 =========== 8 =========== 9 =========== 10 =========== 11 =========== 12 ===========
20. Git できること 共有されたファイルは 他の人も持ってこれる 作業内容の共有 - hoge |- fuga(update) ローカルリポジトリ リモートリポジトリ - hoge |-fuga(update) 1 =========== 2 =========== 3 =========== 4 =========== 5 =========== 6 =========== 7 =========== 8 =========== 9 =========== 10 =========== 11 =========== 12 =========== このおかげで チーム開発が非常にやりやすい
21. Git 基本用語 03 技大祭実行委員 情報局
22. Git 用語説明 作業の履歴を枝分かれさせて 記録するもの ブランチ
23. Git 用語説明 ブランチを結合すること マージ
24. Git 使い方 04 技大祭実行委員 情報局
25. 基本の使い方 Gitには大きく分けて 左の４つの状態がある Gitの状態 ワークツリー Work Tree インデックス ( ステージ ) Index ( Stage ) ローカルリポジトリ Local Repository リモートリポジトリ Remote Repository
26. gitコマンドを料理に例えてイメージしてみる ハンバーグを作るとしましょう
27. 基本の使い方 開発のための準備 -クローン- Work Tree Index(Stage) Local Remote リモートリポジトリからクローンし 自分のローカル環境に複製する。 開発を始めるときに最初に 実行するコマンド command: git clone <URL> ex: git clone git@github.com:NUTFes/FinanSu.git
28. 基本の使い方 開発のための準備 -クローン- 材料を買ってくる 道具を用意する
29. 基本の使い方 開発のための準備 -プル- リモートリポジトリからプルして 自分のローカル環境に反映する。 データのダウンロードのようなもの。 command: git pull origin <ブランチ名> ex: git pull origin develop Work Tree Index(Stage) Local Remote
30. 基本の使い方 開発のための準備 -プル- 材料を冷蔵庫から出す 道具を用意する
31. 基本の使い方 開発のための準備 -ブランチを切る- 開発のためにブランチを切る 開発内容に沿ったブランチ名にする command: git checkout -b <branch name> ex: git checkout -b feature/issue1 or command: git switch -c <branch name> ex: git switch -c feature/issue1
32. 基本の使い方 開発のための準備 -ブランチを切る- メインキッチンのブランチから、 玉ねぎブランチ 肉をこねるブランチ 焼くブランチ ソースブランチ に分ける メイン キッチン 玉ねぎ 肉 こねる 焼く ソース
33. 基本の使い方 編集中のファイルは Work Tree にある Work Tree Work Tree Index(Stage) Local Remote
34. 基本の使い方 玉ねぎ担当： 玉ねぎを切ったり炒めたりしてる Work Tree Work Tree Index(Stage) Local Remote
35. 基本の使い方 編集が終わって保存したいファイルを Index(Stage)に登録 ステージング Work Tree Index(Stage) Local Remote command: git add <ファイル名> ex: git add hoge.txt
36. 基本の使い方 ステージング Work Tree Index(Stage) Local Remote 玉ねぎ担当： 玉ねぎ切って炒めた。 いつでも肉と混ぜれます。
37. 基本の使い方 ステージングされたファイルを ローカルリポジトリに登録 ゲームで言うセーブにあたる コミット Work Tree Index(Stage) Local Remote command: git commit -m “<commit message>" ex: git commit -m “hoge.txtの修正” Save
38. 基本の使い方 コミット Work Tree Index(Stage) Local Remote 玉ねぎ担当： 玉ねぎを皿に置いといて、 いつでも肉と混ぜれるようにした 準備万端の状態 Save
39. 基本の使い方 ローカルリポジトリの編集を リモートリポジトリに反映する プッシュ Work Tree Index(Stage) Local Remote command: git push origin <branch name> ex: git push origin main
40. 基本の使い方 準備万端の玉ねぎをキッチンに納める プッシュ Work Tree Index(Stage) Local Remote
41. 基本の使い方 準備万端の玉ねぎをキッチンに納める プッシュ Work Tree Index(Stage) Local Remote 基本的にはこれらのコマンドを使って 開発を進めていく
42. Git 初級編 05 技大祭実行委員 情報局
43. 基本の使い方 ファイルの編集をもとに戻したいとき 編集の取り消し Work Tree Index(Stage) Local Remote # 元々あったファイル command: git restore <ファイル名> ex: git restore hoge.txt ex: git restore . # 全て元に戻す # 新しく作成したファイル command: git clean <option> ex: git clean -f # ファイル ex: git clean -df # ディレクトリ
44. 基本の使い方 git add でステージングしたファイルを もとに戻したいとき ステージングの取り消し Work Tree Index(Stage) Local Remote command: git reset HEAD <ファイル名> ex: git reset HEAD hoge.txt
45. 基本の使い方 git add でステージングしたファイルを 全部もとに戻したいとき ステージングの取り消し Work Tree Index(Stage) Local Remote command: git reset HEAD
46. 基本の使い方 直前のコミットを取り消して indexに戻す コミットの取り消し Work Tree Index(Stage) Local Remote command: git reset --soft HEAD^ Save
47. 基本の使い方 直前のコミットを取り消して 1つ前のコミットを作成した直後に戻る ※ インデックス・ワークツリーの変更も元に 戻るため注意が必要 コミットの取り消し Work Tree Index(Stage) Local Remote command: git reset --hard HEAD^ Save
48. 基本の使い方 直前のコミットを取り消す 新しいコミットを作成。 既にPush済みで削除したくない コミットがある際に用いる場合がある コミットの取り消し Work Tree Index(Stage) Local Remote command: git revert <commit id> Save
49. 基本の使い方 直前のコミットを修正するコマンド コメントを追加したときなど、 軽い変更の場合に用いる。 コミットの修正 Work Tree Index(Stage) Local Remote command: git commit --amend -m “commit msg” ex: git commit --amend -m “hoge.txtの修正” Resave
50. Git 中級編 06 技大祭実行委員 情報局
51. これまで当たり前に使ってたコマンドを ちょっと見直してみよう
52. [git checkout] 編
53. Gitコマンド 見直し git checkout 変更を元に戻すコマンド git checkout <filename> git checkout . ブランチを変更するコマンド git checkout <branchname> git checkout -b <branchname>
54. Gitコマンド 見直し git checkout 変更を元に戻すコマンド git checkout <filename> git checkout . ブランチを変更するコマンド git checkout <branchname> git checkout -b <branchname> 1つのコマンドで別々の処理ができる → わかりにくい！
55. Gitコマンド 見直し git checkout 変更を元に戻すコマンド git restore <filename> git restore . ブランチを変更するコマンド git switch <branchname> git switch -c <branchname>
56. Gitコマンド 見直し 変更を元に戻すコマンド コマンドでもrestoreを推奨 git restore <filename> git restore .
57. [git commit] 編
58. コミット どのタイミングでコミットしてる？ • issueが完全に終わった時？ • 作業が一段落ついた時？ • ファイルに変更を加えた時？ コミット Work Tree Index(Stage) Local Remote Save
59. コミット 一概にこれが正解！とは言えないが 基準として考えられることは • エラーがなく動く単位 • タスクの粒度によっては、 １issue１commit • 戻したい単位 （ゲームのセーブと同じ単位） • renameやファイル移動 • タスクに関係がない修正 Work Tree Index(Stage) Local Remote Save
60. [git pull] 編
61. Gitのリポジトリは、 - リモートリポジトリ - ローカルリポジトリ の2つに分かれている。 Gitコマンド 見直し Local repository Remote repository
62. リモートリポジトリは - リモートブランチ ローカルリポジトリは - トラッキングブランチ - ローカルブランチ の3つのブランチがある。 Gitコマンド 見直し Local repository Remote repository リモートブランチ トラッキングブランチ ローカルブランチ
63. リモートリポジトリ上の ブランチの状態を指すもの git branch -r で確認可能 Gitコマンド 見直し Local repository Remote repository リモートブランチ トラッキングブランチ ローカルブランチ リモートブランチ
64. リモートブランチの内容を 追跡（トラッキング）するブランチ git branch -a で確認可能 Gitコマンド 見直し Local repository Remote repository リモートブランチ トラッキングブランチ ローカルブランチ トラッキングブランチ
65. ローカルリポジトリにあるブランチ git branch で確認可能 Gitコマンド 見直し Local repository Remote repository リモートブランチ トラッキングブランチ ローカルブランチ ローカルブランチ
66. リモートブランチから トラッキングブランチに 最新情報を持ってくるコマンド Gitコマンド 見直し Local Remote リモートブランチ トラッキングブランチ ローカルブランチ git fetch command: git fetch origin // <origin>は省略可 // 特定のブランチのみfetch command: git fetch origin master origin/master remotes/origin/master master
67. トラッキングブランチから ローカルブランチに 最新情報を持ってくるコマンド Gitコマンド 見直し git merge // マージする先のブランチでコマンドを実行 command: git merge <マージ元のブランチ> // in master branch ex: git merge remotes/origin/master ex: git merge origin/master Local Remote リモートブランチ トラッキングブランチ ローカルブランチ master remotes/origin/master origin/master
68. リモートブランチから トラッキングブランチを介して、 ローカルブランチに 最新情報を持ってくるコマンド Gitコマンド 見直し git pull command: git pull origin <branch name> ex: git pull origin master Local Remote リモートブランチ トラッキングブランチ ローカルブランチ master remotes/origin/master origin/master
69. “git pull”の後の “origin” って何か ＝リポジトリのURLの別名 (あだ名) Gitコマンド 見直し ちょっと脱線 Local Remote リモートブランチ トラッキングブランチ ローカルブランチ master remotes/origin/master origin/master
70. “origin” はあだ名なので、 もちろんさっき確認したURLを使って プルしてくることも可能 Gitコマンド 見直し ちょっと脱線 Local Remote リモートブランチ トラッキングブランチ ローカルブランチ master remotes/origin/master origin/master
71. Gitコマンド 見直し Local repository Remote repository リモートブランチ トラッキングブランチ ローカルブランチ fetch merge pull pullは、リモートブランチから ローカルブランチに fetch + merge は、 リモートブランチから トラッキングブランチを介して、 ローカルブランチに
72. Gitコマンド 見直し Local repository Remote repository リモートブランチ トラッキングブランチ ローカルブランチ fetch merge pull pullは、リモートブランチから ローカルブランチに fetch + merge は、 リモートブランチから トラッキングブランチを介して、 ローカルブランチに やっとること一緒やんけ！ じゃあpullで良くない？？
73. Gitコマンド 見直し Local repository Remote repository リモートブランチ トラッキングブランチ ローカルブランチ fetch merge pull pullは、リモートブランチから ローカルブランチに直接マージする = コンフリクトが起こりやすい
74. Gitコマンド 見直し Local repository Remote repository リモートブランチ トラッキングブランチ ローカルブランチ fetch merge pull fetch + merge は • リモートの内容をローカルに 反映する前に差分を確認したい = コンフリクトを防ぐため • pullするブランチ先をよく間違える 場合に用いると良い
75. プルリクエスト 編
76. push後、別ブランチにマージする前に 動作確認などをしてもらうためのGithub の機能 Git 中級編 プルリクエスト(プルリク) とは プルリクエスト
77. 手順 1. 確認用のブランチを作成 git switch -c review/issue1 2. プルリクが出されているブランチ からプルしてくる git pull origin feature/issue1 3. 修正点があったら修正して、 add, commit, pushする git push origin review/issue1:feature/issue1 4. 動作確認し問題ないならマージする Git 中級編 プルリクエスト(プルリク) の確認方法 （ローカルで何も作業してない時）
78. 手順 1. プルリク確認用ディレクトリを作成 mkdir review_dir 2. git cloneする git clone <repository URL> 3. プルリクが出ているブランチに移動 git switch feature/issue1 4. 修正点があったら修正して、 add, commit, pushする git push origin feature/issue1 5. 動作確認し問題ないならマージする Git 中級編 プルリクエスト(プルリク) の確認方法 （ローカルで作業中の時）
79. コンフリクト 編
80. 複数人が同じ箇所を編集したときに、 どっちの編集を優先していいか わからない状態。 Git 中級編 リモートリポジトリ hoge.txtの3行目を編集 hoge.txtの3行目を編集 コンフリクト コンフリクト Aさん Bさん
81. これがコンフリクトが起こってる状態 Git 中級編 コンフリクト
82. - Github上で解消 (簡単なコンフリクトならGithubで 解消可能) - コードを編集して解消 (複雑なコンフリクトの場合は、 実際にコードを編集して解消する) Git 中級編 リモートリポジトリ hoge.txtの3行目を編集 hoge.txtの3行目を編集 コンフリクト コンフリクトの解消方法 Aさん Bさん
83. 1. Resolve conflictsボタンをクリック 2. ファイルを修正 3. Mark as Resolvedボタンを クリック 4. Commit mergeボタンをクリック Git 中級編 リモートリポジトリ hoge.txtの3行目を編集 hoge.txtの3行目を編集 コンフリクト Github上で解消 Aさん Bさん
84. Git 中級編 Github上で解消 [Resolve conflicts]をクリック
85. Git 中級編 Github上で解消 画面右側のテキストエリアを編集
86. Git 中級編 Github上で解消 編集後、右側のボタン [Mark as resolved]をクリック
87. Git 中級編 Github上で解消 コンフリクトが解消されたので、 [Commit merge]ボタンをクリック
88. Git 中級編 Github上で解消 コンフリクトが解消され、 マージ可能になった
89. 1. コンフリクト解消用ブランチを作成 2. マージ先のブランチからプルする 3. ファイルを編集 4. add, commit, push 5. プルリクを書いてマージする Git 中級編 リモートリポジトリ hoge.txtの3行目を編集 hoge.txtの3行目を編集 コンフリクト コードを編集して解消 Aさん Bさん
90. Git 中級編 コードを編集して解消 コンフリクト解消用のブランチを作成 command: git switch -c <branch name> ex: git switch -c fix/conflict リモートリポジトリ hoge.txtの3行目を編集 hoge.txtの3行目を編集 コンフリクト Aさん Bさん
91. Git 中級編 コードを編集して解消 マージ先のブランチからプル feature/conflict-4 ブランチから master ブランチにマージするときに コンフリクトが発生 = masterブランチからプル command: git pull origin <branch name> ex: git pull origin master 作業ブランチ (feature/conflict-4) コンフリクト解消ブランチ （fix/conflict-2） コンフリクト マージ先ブランチ （master） push pull
92. Git 中級編 コードを編集して解消 VSCodeでファイルを開くと 以下のように表示される
93. Git 中級編 コードを編集して解消 上部（HEAD(Current Change)）の 変更をマージする場合
94. Git 中級編 コードを編集して解消 上部（HEAD(Current Change)）の 変更をマージする場合
95. Git 中級編 コードを編集して解消 下部（Incoming Change）の 変更をマージする場合
96. Git 中級編 コードを編集して解消 下部（Incoming Change）の 変更をマージする場合
97. Git 中級編 コードを編集して解消 両方の変更をマージする場合
98. Git 中級編 コードを編集して解消 両方の変更をマージする場合
99. Git 中級編 コードを編集して解消 手動で不要な部分を削除してもOK
100. Git 中級編 コードを編集して解消 編集が終了したら、 add, commit, push を行う
101. Git 中級編 コードを編集して解消 編集が終了したら、 add, commit, push を行う
102. Git 中級編 コードを編集して解消 プルリクを作成。 先程のconflict解消のコミットが 反映されている
103. Git 中級編 コードを編集して解消 マージ可能になっている
104. Git まとめ 07 技大祭実行委員 情報局
105. • コミットの粒度やいつも使ってるコマンドを ちょっとだけ意識しよう！ • Gitは使えば使うほど慣れていくので 使い倒しましょう！