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
52. 振り返り回 GitHub しりとり Git/GitHub ハンズオンの振り返り、よろしくお願いします! Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 52
53. GitHub しりとりとは? 全員で 1 つのファイルに、順番に言葉を書きながら GitHub 操作を覚える 今日いちばんのねらい = リモートとローカルの感覚を養うこと(ここが一番むずかしい) 全員が 同じ 1 ファイルを編集する → 必ず pull しないと話が進まない だから「リモートとローカルの違い」が 体でわかる Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 53
54. どんな感じでやる? ファイルを用意 こちらで指定したディレクトリ shiritori/team1 team2 … を用意してあります その中に shiritori.md を作成 チーム対戦 開始の言葉は こちらが指定 そこからスタート 10 分でどれだけ繋げられるかを チームごとに対決! Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 54
55. 今回使うコマンド 取り込む・移動する git fetch origin git switch git pull 記録する・送る git add git commit git push 今は 名前だけ。 「どの場面でどれを使うか」は、このあと自分で考えます Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 55
56. git fetch origin と git pull の違い git fetch origin リモートの最新情報を 手元にダウンロードするだけ いま作業中のファイルは まだ変わらない 「向こうで何が起きたか」を覗くだけ git pull fetch して、さらに いまのブランチに取り込むまで = fetch + 取り込み (merge) 手元が 最新の状態になる 毎ターン前の人の言葉を取り込むなら git pull が便利(1 コマンドで済む) Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 56
57. 1 ターンの型 — まず「やること」で考える ① 前の人の言葉を取り込む → ② 言葉を 1 つ書き足す → ③ 記録する変更を選ぶ → ④ 変更を確定する → ⑤ みんなに見える所へ送る さて — ①〜⑤ に、さっきのコマンド一覧の どれが当てはまる? チームで考えてみて ①の「取り込む」を飛ばすと…どうなるかは後ほど Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 57
58. 答え合わせ — 変更は 4 つのエリアを進む ワーキングツリー add → ステージング commit → ローカル push → リモート やること コマンド ① 前の人の言葉を取り込む git pull ② 言葉を 1 つ書き足す (エディタで編集) ③ 記録する変更を選ぶ git add ④ 変更を確定する git commit ⑤ みんなに見える所へ送る git push 教材 02 章「Git の 4 つのエリア」の復習です Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 58
59. ルール ① 言葉 OK な言葉 8 文字以上の日本語 カタカナ語 OK いくつかつなげた言葉 OK 四字熟語 OK NG な言葉 「リンゴ」 「ゴリラ」など 短い言葉 「ん」で 終わる言葉 しりとりなので、前の言葉の 最後の文字から続ける Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 59
60. ルール ② 禁止事項 ネット検索は禁止 しりとりの言葉を調べるのも 禁止 Git の操作を調べるのも 禁止 → まず チームで相談 どうしても解決しないときだけ 最後の手段でブラウザ OK その他の約束 1 ターンにつき 1 語だけ (一人で 2 つ足さない) Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 60
61. 詰まったら? ネット検索は禁止。でも — 手元にあるものは、何を使ってもかまいません …そういえば前々回、ターミナルに AI みたいなやつ 入れた気が? 🤔 チームで思い出してみてください Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 61
62. タイムスケジュール（全 25 分） フェーズ 時間 内容 ① 説明 5 分 いまここ ② 準備 5 分 ブランチ作成 → shiritori.md → push → PR 作成 ③ しりとり本番 10 分 お題発表 → 何語つなげられるか対決 ④ 振り返り・結果発表 5 分 語数発表 ＋ git log 各チーム 同じお題でスタート。タイマー 10 分で一斉に! Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 62
63. 注意: push が弾かれたら 前の人の push 直後に、pull せず古いまま push すると… ! [rejected] shiritori/team1 -> shiritori/team1 (fetch first) これは故障じゃない 「リモートに、まだ持ってない変更があるよ」と Git が 守ってくれているサイン 直し方 git pull # 取り込む git push # もう一度 これがまさに リモートとローカルの感覚。 「なぜ毎回 pull するか」の答え Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 63
64. ② 準備 — 何をする? 5 分・代表者が中心 チーム代表 1. 最新の main を手元に用意 2. 新しいブランチを切る 3. shiritori/team1/shiritori.md を作り 見出し(例: # チーム1 のしりとり )を書く 4. 変更を 記録する 5. リモートに 送る 6. PR を作る(マージはしない) ほかのメンバー 1. リモートの 最新情報を取り込む 2. その ブランチに移動 → 移動できたら準備完了 ここでも「やること」→ どのコマンド? を考えてみて Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 64
65. ② 準備 — コマンドにすると チーム代表 git switch main git pull # 最新の main に git switch -c shiritori/team1 # 新しいブランチを切る # shiritori/team1/shiritori.md を作成・見出しを書く git add shiritori/team1/shiritori.md git commit -m "start: チーム1 のしりとり" git push -u origin shiritori/team1 → GitHub で PR 作成（マージしない） ほかのメンバー git fetch origin # 最新を取り込む git switch shiritori/team1 # ブランチへ移動 → 乗り換えたら準備完了 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 65
66. さて、気になるお題は…? Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 66
67. お題:「ハンズオン講座」 10 分 スタート! 前の言葉の最後の文字 「ざ」 から続けよう Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 67
68. 振り返り① — リモートとローカルの往復 Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 68
69. 振り返り② — 手数は記録になる git log --oneline a1b2c3d add: しんかんせん e4f5g6h add: りんごジュース i7j8k9l add: しちてんばっとう m0n1o2p start: しりとり開始 ファイルには言葉しか書いてないのに、誰がいつ何を足したかが全部残っている。 これがバージョン管理の本質 — 自分たちの手数が、そのまま消えない記録になる 語数 = git log の行数。開いたままの PR でも commit が見えます Git ハンズオン入門 神戸電子専門学校 Web コミュニティ 69