Git ハンズオン入門 ~~自己紹介ファイルを作って学ぶ Git / Github~~

実務やチーム開発で必要になるgit githubの手法、概念、知識についてまとめました。
https://zenn.dev/junhat6/books/5d6670ed49edd1
こちらのzenn bookも合わせてお使いください

Transcript

1. Git ハンズオン入門 自己紹介ファイルを作って学ぶ Git / GitHub 90分で「ブランチ切って PR 出して」と言われて困らない自分になる 神戸電子専門学校 Web コミュニティ 研修 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 1
2. 90分後、こうなります 実務のチーム開発に もう、参加できる。 タスクがこなせるようになる！ただし、コードが書けるようになるわけではない Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 2
3. 教材は手元の Zenn Book で スライド (Speaker Deck) 全体像・フロー・なぜそうするか 私が説明する用 Zenn Book (クリックでリンクに飛ぶ) 教科書的立ち位置 具体的なコマンド エラーが出たとき辞典 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 3
4. 今日の流れ 概念編 (15分) Git / GitHub の世界観 ハンズオン編 (70分) 開発フローを 1 周体験 まとめ (5分) 到達点と次の一歩 スライドは 概念とフロー だけ。コマンドは 教材(Zenn 本) を見て手を動かそう。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 4
5. そもそも Git って何? ファイルの履歴を 記録・管理するツール 世界中で GitHub だけでも 1 億人超 のエンジニアが利用 規模を問わず 個人開発から Google / Microsoft まで 必須スキル 現代の開発で 使わない現場の方が珍しい …でも、初めて触る人にとっては謎の呪文。今日でその謎を解きほぐします。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 5
6. グランドルール 今日のハンズオンを最大限楽しむための 5つの約束 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 6
7. 4つの約束 CUI で実行 脳死コピペ禁止 チームメンバーで助け合う！ 困ったらTA（運営陣）を呼ぶ コマンドの意味を理解しながら、みんなで進めよう Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 7
8. なぜ CUI ? なぜコピペ厳禁? GUI (Graphical User Interface) 裏で何が起きているか 見えない ツールが変わると詰む CUI (Character User Interface) 打ったことが全て 透けて見える どの環境でも同じ 意味が分かれば 応用が利き、エラーも自分で読める。今日の一番の近道。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 8
9. なんでGitが必要なの？ まずは、ハンバーグで例えてみよう Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 9
10. ① ある日、最高のハンバーグができた 肉汁あふれる、自信作。これを保存しておきたい Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 10
11. ② やってしまった… うっかり 謎のソース をかけてしまった…😱 もう食べられない。 Ctrl + Z でも戻せない Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 11
12. ③ Git なら、時を戻せる 履歴に残してあれば、ソースをかける前の状態に一発で戻せる これがバージョン管理 = Git Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 12
13. ④ しかも、チームで共有できる ハンバーグを クラウド にアップロード → みんなで 味比べ・改良 できる このクラウド側が GitHub Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 13
14. 開発の文脈では 開発の現実 バグった → 昨日に戻したい 1週間前 はどうだった? チームで触ったら 誰がいじったか不明 Ctrl + Z じゃ無理 閉じたら 消える 数日前まで 遡れない 他人の Ctrl+Z は届かない 「いつ・誰が・何を・なぜ」を全部覚えてくれる仕組み = Git Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 14
15. 素朴にやると、こうなる Git なし model_v1.py model_v1_alice.py model_v2_bob.py model_final.py model_final_2.py model_submit.py どれが最新? 判別不能… Git あり model.py ファイルは 1つだけ 履歴は 全部 Git の中 Git = ファイル + すべての変更履歴 をまとめて管理する仕組み Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 15
16. 実際の１つのファイルの内容 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 16
17. ハンズオン編 今からこの「1周」を体験します Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 17
18. 今日やる 1 周 ① リポジトリclone ▶ ② Issue 確認 ▶ ③ ブランチを切る ▶ ④ 編集 ▶ ⑤ add ▶ ⑥ commit ⑦ push ▶ ⑧ Pull Request ▶ ⑨ レビュー ▶ ⑩ merge ▶ ⑪ pull 🔁 現場で 毎日繰り返される サイクル。今日でひと通り触れます。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 18
19. ① clone — リモートから手元へ丸ごとコピー ① clone GitHub のリポジトリを 履歴ごと PC にダウンロード Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 19
20. 手元のPCのvscodeで開けるように！ Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 20
21. ② Issue 確認 — 今日のあなたの依頼書 ② Issue 一覧 自分宛てに絞り込み 詳細 ゴールと進め方を確認 詳細の ゴール / 進め方 が今日のタスク。まず よく読む。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 21
22. ③ ブランチを切る — 自分専用の作業場所 ③ branch main をコピーして別の作業場所を作る。リモートはまだ知らない。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 22
23. ④⑤⑥ 編集 → add → commit ④ edit → ⑤ add → ⑥ commit 編集だけでは履歴に残らない。add → commit で初めて積まれる。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 23
24. ⑦ push — ローカルの履歴をリモートへアップロード ⑦ push 更新されるのは あなたの feature だけ。main はまだ動かない。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 24
25. ⑧ Pull Request — 「取り込んで！」の依頼書 ⑧ PR 依頼書であり、レビューと会話の場。 「main に入れていい?」を仲間に確認。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 25
26. PR を作る画面はこう タイトル+本文で作成 Closes #<番号> で Issue リンク Closes #5 を書くと、マージ時に Issue が自動で閉じる。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 26
27. ⑨ レビュー — 仲間の変更に意見を残す ⑨ review Files changed → 行番号横の 青い + をクリック Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 27
28. ⑩ merge — リモートの main がついに動く ⑩ merge 動いたのは リモート main だけ。ローカル main は古いまま。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 28
29. マージボタンはこの画面の下にある ⑩ merge 緑の Merge pull request → Confirm merge で完了 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 29
30. main が更新されました ⑩ merge リポジトリのトップを見ると main の最新コミット が自分のものに更新されている Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 30
31. ⑪ pull — ローカルも最新に揃える ⑪ pull なぜ pull が必要? Git は 分散システム。 リモートの変更は 自動で降ってこない。 → 明示的に「最新くれ」 毎朝のルーティン git switch main git pull 新しいブランチを切る前にも。 これで 1周完了 🎉 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 31
32. git pull ⑪ pull Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 32
33. デモ Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 33
34. 概念編 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 34
35. Git と GitHub は別物 Git バージョン管理の 道具 → あなたの PC にある GitHub Git を預けて共有する 場所 → インターネット にある Git は道具、GitHub は使う場所。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 35
36. リポジトリ = プロジェクトの保管庫 中に入っているもの 実際の ファイル 過去の すべての変更履歴 フォルダのように見えて、 歴史を丸ごと抱えている のがリポジトリ。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 36
37. 実物のリポジトリはこう見える これは VS Code (microsoft/vscode) のリポジトリ。 ファイル群 + 2441人の人たちによる15万件超の Commits(変更) + 3900 Branches(変更スペース) がここ に全部入ってる Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 37
38. 全体像②: Git の 4 つのエリア add → commit → push で右へ右へ持ち上がる。何度も戻ってくる図。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 38
39. コミット = 変更のまとまりorスナップショット • ─ • ─ • ─ • ─ • ↑ 最新 ある時点のファイル全体の 写真。 「バグ出たからあのコミットに戻そう！」 ID / 作者 / 日時 / メッセージ / 直前へのリンク を持つ。 並べたものが 履歴。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 39
40. 実物のコミットはこんな感じ ID (5054a6c) / 作者 (junhat6) / 日時 (3 days ago) / メッセージ / 1 parent (直前への矢印) / 差分 (+27 / -5) が情報として入っている Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 40
41. ブランチ = コミット列につけた名前 main ─────────────────────•──── (他の人の変更) │ └── feature/5 ─•─•─ (あなたの作業) ブランチがあると main を汚さず 作業できる 並行作業 ができる 失敗したら 捨てるだけ 今日のブランチ名 feature/<Issue 番号> 例: #5 → feature/5 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 41
42. 実物のブランチはこう見える 読み方 ラベル がブランチ名 ( origin/develop / feature/175 ) • が コミット 線の 分岐 / 合流 が ブランチを切る/マージした跡 ブランチは特別な何かではなく、ただの 「コミット列に付いた名前」 だと実感できる Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 42
43. (参考) コンフリクト 今日は起きないけど、概念だけ知っておこう Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 43
44. コンフリクトはなぜ起きる? ローカルは 独立したコピー。お互いを知らずに同じ行を書き換える。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 44
45. Git が困る「その瞬間」 同じ行に違う変更 → Git は判断できず、人間に聞く。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 45
46. 解決とは「人間が文脈で決める」 <<<<<<< HEAD - 読書 ======= - ゲーム >>>>>>> feature/6 マーカー <<<<<<< HEAD 自分 ======= 区切り >>>>>>> ブランチ 相手 解決後 - 読書 - ゲーム 最終形を自分で決める 今日は 物理的にコンフリクトしない 設計。実務で出会ったら教材 09 章。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 46
47. まとめ 今日できるようになったこと / 次の一歩 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 47
48. 今日体験した 1 周 ✅ clone ✅ Issue ✅ branch ✅ edit ✅ add ✅ commit ✅ push ✅ PR ✅ review ✅ merge ✅ pull これが 現場で毎日繰り返されるサイクル。もう困りません。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 48
49. 次に出会う言葉たち git stash 作業を一時退避 git rebase 履歴を整える git revert 変更を打ち消す .gitignore 追跡しないファイル gh pr create CLI で PR を作る CI / CD 自動テスト・デプロイ 教材 11 章 に一行説明あり。気になったものから調べてみて。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 49
50. 困ったときの戻り先 エラー 教材 10 章 「よく出るエラー」 コンフリクト 教材 09 章 詰まった TA に声かけ 詰まることも体験 教材は いつでも見返せる。戻ってきて読み直して OK。 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 50
51. お疲れさまでした 楽しい Git ライフを! 質問・感想は TA・運営メンバーまで Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 51