1
1

gitとgithubのcloneからPRまでを図解で理解する

Posted at
1 / 37

gitとgithubを使った開発環境の流れ

チームで開発する時,個人で開発をしてみようと思っている時,

gitとgithubを使うと言われても何がなんなのかわからない人が多いと思ったので,図で理解しやすいようにまとめてみました.


まずは

  1. clone(pull)
  2. ブランチを作る
  3. commit
  4. push
  5. PRの作成
  6. マージ
    の流れを説明します

初めに

githubは簡単にいうとコード用のクラウドサービスです
なので,ローカル(自分のPC)とgithubは別物です

また,今回は図解が目的なので,コマンドの説明はしません

コマンドの説明は他の記事に多くあるので,そちらを参照してください


用語の説明

  • デフォルトブランチ:mainとかmasterとかdevelopという名前がついているブランチ(が多いです)

図の説明

真上に伸びている線はブランチ
丸はコミットを表しています.


初めは,github上にのみリポジトリがあり,ローカルには何もない状態です.

gitの流れ2.jpeg


もしくは,cloneという作業が済んでいる人はリポジトリのみがローカルに存在しています.

gitの流れ3.jpeg


clone(pull)

github上のコードをローカルにも反映させましょう

初めてならclone, 2回目以降はpullを使います


ローカル(自分のPC)に反映

gitの流れ4.jpeg


ブランチを作る

ここからはローカルで作業します


作業用のブランチを作りましょう

gitの流れ5.jpeg


作業用のブランチでコミット(コードの変更)をします

gitの流れ6.jpeg


push

ローカルでの変更をgithubに反映させましょう


作業用のブランチでコミットした内容をgithubに反映させます

gitの流れ7.jpeg


PRの作成

PRを出すことで,他の人にコードの変更を確認してもらうことができます

変更の確認をレビューと言います


PRを出す

gitの流れ8.jpeg


マージ

レビューが通ったらマージします

マージとは,ブランチの変更をデフォルトブランチに反映させることです


マージする

gitの流れ9.jpeg


ローカルにも反映したい

マージが完了することで,コードの変更が反映されました!

ですが,ローカルにはまだ変更が反映されていません


マージが完了したので,ローカルにも反映させましょう
この方法は,始めのpullと同じです


ローカルにも反映

gitの流れ10.jpeg


以上が,gitとgithubを使った開発環境の流れです


直接mainブランチにpush

では,直接デフォルトブランチにpushするとどうなるのでしょうか


ここは同じです

gitの流れ12.jpeg


作業用ブランチを作らずに変更

gitの流れ13.jpeg


直接push

gitの流れ14.jpeg


この時点でローカルとリモートは同じなので,pullが必要ありません

つまり直接デフォルトブランチにpushすることもできます!

しかし,問題点もあります


問題点

個人でやる分には,問題がない時もありますが,チームで開発するときは問題があります.


複数人で作業

複数人で作業する時どうなるかを見てみましょう


今回は,githubが真ん中にあり,左右に2人の開発者がいるとします

gitの流れ16.jpeg


他の人がデフォルトブランチを更新

gitの流れ17.jpeg


自分のローカルには,デフォルトブランチの変更が反映されていない

gitの流れ18.jpeg


問題点

このように,デフォルトブランチに直接pushすると,他の人の変更が反映されていないことがあります

それによって,コンフリクト(競合)が発生することがあります


理想


各自が作業用ブランチを作る

gitの流れ20.jpeg


まとめ

これ以外にもgitの機能はたくさんありますが,この流れを理解しておけば,gitを使った開発ができるようになると思います

とりあえずやってみると実感もわくでしょう

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1