Gitの仕組みやコマンドの意味はまだよくわからないけど、GitHubでポートフォリオの変更履歴をわかりやすく残しておきたい


はじめに

先日Qiitaに「[GitHub]Gitの仕組みやコマンドの意味はよくわからないけど、GitHubでの学習記録をとりあえず始めておきたい」という記事を投稿しまして、得意げに学習記録をGitHubにmasterブランチでプッシュしていたところ、前回記事をご覧になったUdemy人気講師であるGitの師匠的存在から、

「学習される際は記事のやり方で良いんですけど、ポートフォリオを作る際は、機能ごとにブランチを切ってプルリクしながら進めていくと、後で何の変更をしたかが振り返りやすいのでオススメです」

というお言葉をTwitterで頂戴しました。得意げにプッシュばかりしていた自分が気恥ずかしくなり、いざポートフォリオ作成する時に困らないよう、日々の学習記録でも使ってみたところ、ブランチを切り、プルリクする流れがなんとかできるようになってきました。

ポートフォリオを作る際に、機能ごとにブランチ切ってプルリクしながら進める方法を、できるだけ少ないステップでまとめてみました。

(本記事を演習用か流れの把握程度にご覧いただけますと幸いです。)

※私はバックエンド学習中の実務未経験者ですが、一ヶ月ほど前に、UdemyのGit: もう怖くないGit!チーム開発で必要なGitを完全マスターを受講したおかげで、順調に毎日のようにGitHubに草を生やしています(草が生えているおかげで10/31限定のハロウィンカラーもそこそこ楽しむことができました!)

※記事のとおりやってもできない等あれば、教えていただけると嬉しいです

前提

  • パソコンはMac
  • ターミナルでのコマンド操作(ディレクトリの移動ができる)
  • Gitの仕組みやコマンドの意味はよくわからないけど、GitHubでの学習記録の作成記録をとりあえず始めている(始めていない場合→前回記事参照)

この記事のゴール

  • ブランチを切り、プルリクして、GitHubでポートフォリオ作成の際、追加する機能ごとに変更履歴を残せるようになる(演習をする)

※ ステージやコミットなどの主要な用語の説明も思いっきり省略させていただいており、この記事を読んでもGitの仕組みについてはわかるようにはならないので、流れの把握程度にご覧いただけますと幸いです

0. 用語の説明(ブランチとプルリクだけ簡単に)

0-1. ブランチとは?

  • ブランチは、並行して複数機能を開発するためにある
  • ブランチは、木の枝のように分岐して開発していくためのもの

➡️ ポートフォリオを作る際にも、開発する機能ごとにブランチを切ると、後で何の変更をしたかが振り返りやすい

0-2. プルリク(プルリクエスト)とは?

  • プルリクエストは、自分の変更したコードをリポジトリに取り込んでもらえるよう依頼する機能
  • プルリクの目的は、誰かが変更をしたコードをリポジトリに取り込む前にレビューを挟むため

➡️ ポートフォリオを作る際は、一人でやってるので、自分のコードをチェックしてもらう本来のプルリクの機能は特に不要で、機能の追加が完了した区切りの記録としてプルリクする(実務に向けてのイメージはできる)

1. ターミナルでの手順

1-1. 学習を記録しているディレクトリに移動する

  • 演習でやってみる場合は、演習用のディレクトリを作成→git init

1-2. git branchコマンドを実行して 現在のブランチの一覧を確認する

ターミナル
$ git branch
* main
  • ブランチ切ったことなければ、デフォルトの main ブランチだけしかないはずです
  • GitHubでのデフォルトブランチ名はこれまで master ブランチという名前でしたが、最近 main ブランチがデフォルトになったので、 main ブランチという名前で話を進めていきます

1-3. 新しいブランチ作成 & 切り替え

$ git checkout -b feature
  • feature は、ブランチ名
  • 本事例の feature ブランチは機能追加などのときに名付ける
  • 1-1.のように$ git branchでブランチ一覧をみると、 main → feature ブランチに切り替わっていることがわかる

1-4. ファイルを変更

  • ポートフォリオ作成の機能の追加について作業
  • 演習の場合は、空のファイル(例:index.html)を作成

1-5. git addコマンドを実行して、ステージに追加する

$ git add .

1-6. git commitコマンドを実行して、コミットする

$ git commit -m "コミットメッセージ"
  • コミットメッセージ は、変更内容の説明を書く
  • ポートフォリオ作成の作業内容を1行で書く

1-7. git pushコマンドを実行して、GitHubへプッシュする

$ git push origin feature

2. GitHub ページでの手順

2-1. プルリクエストを送る

GitHubのページに移動 → 対象のリポジトリに移動 → ①Pull requests クリック → ②New pull request

→ base:main、compare:feature ブランチを選択 → タイトル:(機能追加内容)、本文:(例:レビューお願いします。) → Create pull request クリック

※ これが複数人での開発だった時は、ここでコードレビュー依頼して、レビュアーに承認をもらう

2-2. プルリクエストをマージする

  • ① Conversation を開く → ② Merge pull request クリック

→ Confirm merge クリック

→ これでプルリクエストがマージされた!

  • マージとは、他の人の変更内容を取り込む(自分のブランチに統合していく)作業のこと

↓今回は

  • プルリクをマージ = 自分の feature ブランチでの変更内容を、main ブランチに取り込みました

2-3.ブランチを削除

  • Delete branch クリック(GitHub上に作られていた feature ブランチを削除)

3. ターミナルに戻っての手順

3-1. GitHub上の変更を、ローカルにも反映させておく

ターミナル
# feature ブランチから、 main ブランチに切り替える
$ git checkout main

# main ブランチに、GitHubの最新の状態をプルする
$ git pull origin main

# feature ブランチを削除する
$ git branch -d feature

手順は以上です。

ポートフォリオの機能ごと(プルリク→マージ完了ごと)の確認方法

GitHubのページに移動 → リポジトリに移動 →
①Pull requests 移動 → ② Closed クリック

→ ポートフォリオの機能ごと(プルリク→マージ完了ごと)の履歴を確認できる


いかがでしたでしょうか?記事のとおりやってもできない等あれば、教えていただけると嬉しいです!
最後に…Gitの学習時間が確保できれば、UdemyのGit: もう怖くないGit!チーム開発で必要なGitを完全マスターで、Gitの仕組みまで理解して裏で何が起こっているかまで理解するのがおすすめです!
ありがとうございました!