GitHubの使い方 〜6章でつまずいた私の備忘録〜

6章で初めてGitHubを使った時、画面は英語ばかりで専門用語も多く、頭が混乱して全然使い方が分からず、かなり時間をかけてしまいました。

昨年のオフ会で、たまねぎさんも最初は分からなくて、面談の時間を使ってぶべさんに教えてもらったとお聞きし、難しく感じていたのは自分だけじゃなかったんやと、ほっとしたのを覚えています。

以前よりは少しずつ慣れてきましたが、時間が空くとまた忘れてしまうこともあるので、いつでも見返せるように手順書のような形でまとめてみました。
あと自分と同じように悩んだ誰かの助けになれば嬉しいです。
もし内容に誤りや改善点があれば、ご指摘いただけると幸いですm(__)m

ステップ①：GitHubでリモートリポジトリを作成

１．GitHub にログイン
２．画面右上の「＋」→「New repository」

３．以下を入力
・Repository name：chapter-8
・Description（任意）：簡単な説明（空でもOK）
・Choose visibility：Public
・その他はデフォルトのままでＯＫ

４．「Create repository」をクリック！

※chapter-8としてリポジトリが追加されました。

🌳リポジトリとは

調べてみるとリポジトリ（Repository）は日本語で「貯蔵所」や「倉庫」と訳されます。
リポジトリってなんだか響きが良くてええ感じに聞こえていましたが、正直なところ、ちゃんと意味までは理解していませんでした…(-_-;)
今の私は各章の課題のコードを保管できる場所として認識しています。
作業内容や履歴をまとめて管理できるので、めちゃめちゃ便利ですよね！

ちなみにリポジトリには、リモートリポジトリ（GitHub上）とローカルリポジトリ（自分のPC上）の2種類があります。

ステップ②：VS Code上でローカルリポジトリを作成

１．VS Code のターミナルで課題の対象フォルダに移動：cd c:\data\my-next

２．Gitの初期化：git init
　　※これにより対象フォルダがGitの管理下になるみたいです。

３．対象フォルダにあるすべてのファイルをステージングに追加： git add .

４．コミット（変更履歴を記録）：git commit -m "初回コミット"
　　※メッセージは自由に書いてOK

🌳GitとGitHubの違い

GitとGitHubとは全くの別もので最初は混乱しました・・・😓
Gitは、ローカル（自分のPC上）でファイルの変更履歴を記録・管理するためのツールで、
GitHubは、Gitで管理しているコードをインターネット上で保存・共有できる場所。
Gitは「ツール」で、GitHubは「インターネット上のサービス」として分けると理解しやすくなりました！

ステップ③：GitHubと自分のPCを紐づける

１．ステップ①で作成したリポジトリ画面下に表示されるgit remote add origin ..を確認

２．VS Code のターミナルでGitHubのリポジトリと紐づける：git remote add origin ...

ステップ④：mainブランチをGitHubにアップロード

１．VS Code のターミナルで
　　ローカルの main ブランチをGitHubにアップロード：git push -u origin main

ステップ⑤：課題用ブランチを作成し作業開始

１．VS Code のターミナルで課題用ブランチを作成：git checkout -b feature/chapter-8

２．課題用ブランチ作成後に、作業を開始する。

🌳ブランチとは

ブランチ（branch）は日本語で「枝」や「枝分かれしたもの」と訳されます。６章から、mainと課題用のブランチに分けられていて、VS CodeやGitHub上で課題開始前と課題開始後のコードを比較できるのがすごいなと思いました。自分や他の誰かが見てもちゃんと比較できる。そう考えると、ブランチって「前後を比較しやすくするための仕組み」でもあるのかなと思っています。

💀注意しないといけない点

・もし課題用ブランチ作成前にmainや別のブランチで作業を始めてしまった場合でも、コミットしていない状態であれば、git checkout -b feature/chapter-8 を実行することで、作業内容をそのまま課題用ブランチに引き継げるようです。
main ブランチのまま作業してしまって、「やってしまったー！」と思ったのですが、無事に切り替えられて安心しました…w

・作業終了後に main ブランチとしてGitHub にアップロードし、続けてfeature/chapter-8 ブランチを作成しアップロードしてしまい、レビュー依頼前にmainブランチと課題用ブランチに差分が出ない状態になってしまったことがありました。
こういった順番にも気をつけないといけないなと、改めて感じました。

ステップ⑥：課題用ブランチをGitHubにアップロード

１．作業が完了したらVS Code のターミナルで変更内容をステージングに追加：git add .

２．コミットする：git commit -m "8章の実装"
　　※コミットメッセージは作業内容に応じて適宜変更

３．GitHubに課題ブランチをアップロード：git push -u origin feature/chapter-8

４．GitHubのchapter-8のリポジトリ内にfeature/chapter-8がアップロードされたことを確認

🌳ステージングに追加とは

git add . を使って、現時点での作業内容をcommitの対象として追加することを「ステージングに追加する」と言うそうです。
最初に知った時は、「git add stageとかとちゃうんかい！！」って心の中で突っ込んでしまいました…w

ステップ⑦：プルリクエスト→レビュー依頼

１．GitHubのchapter-8のリポジトリ内の 「Pull requests」→「New pull request」をクリック

２．左のbase（マージ先）はmainのまま、右のcompare（マージ元）は今回課題ブランチでアップロードしたfeature/chapter-8を選択。
３．下に表示される差分内容に問題がなければ、「Create pull request」をクリック

４．titleとdescriptionを記入し、「Create pull request」をクリック

５．下記指定のURLをSlackの専用チャンネルに張り付けてレビューを依頼

６．修正が必要の場合、修正後にステップ⑥を再実行
　　※以下画面は８章の修正としてアップロードされています。

７．修正内容を記入しCommentをクリック

８．再度Slackでレビューを依頼

ステップ⑧：課題合格後、マージする

１．GitHubのプルリクエストページ内にある「Merge pull request」をクリック

２．「Confirm merge」をクリックして、mainブランチにマージ

３．ローカルで、mainブランチに移動する： git checkout main

４．ローカルのmainを最新に保つために、ローカルのmainブランチをリモートの最新と一致させる ：git pull origin main --rebase

おわりに

これまでは、自分のパソコンの中だけでGitHubの使い方をまとめていましたが、
今回こうしてブログという形で公開することで、誰かが見てくれるかもしれないという意識が生まれ、「どうすればもっと分かりやすく伝えられるかな？」と、表現や見やすさを意識しながら作成することができました。

アウトプットすることで、自分の頭の中も整理されていく感覚があって、
不特定多数の方に向けて発信することの良さを、あらためて実感しています。

あと、この手順書は、８章の課題を進めながら少しずつ書き進めていきました。
課題の合格後も公開までに何度も加筆・修正を重ねたのですが、途中でこんがらがってしまい、もしかしたら「このステップ、ちょっと違う」とか「この表現分かりづらいかも」という部分があるかもしれません。

もしお気づきの点があれば、お手数ですがご教示いただけると嬉しいですm(__)m
最後まで見ていただいて、ありがとうございました！！！