GitHub簡単な流れやGitコマンドたち〜🎉

今回 投稿した目的✨

３つあります。
　1.テッキーズラボで学んだことをアウトプットする為
　2.自分自身が見直せるようにする為
　3.頭の整理

こんな人に読んでほしい〜💻👀

・駆け出しエンジニア
・これからGitHubで個人開発してGitを覚えたい！
・そもそもGitコマンドの使い方わからない
・Macを使用している

この記事で扱っていない内容〜⚠️

・GitHubアカウントの作成やリポジトリ作成手順
・Gitのダウンロード手順

アカウント作成していない方は下記からアカウント、リモートリポジトリ を作成ください🙇‍♂️
公式サイトリンクも添付しておきます。

GitHub Japan

Git

Gitがあるかないか確認するコマンド〜⚠️

Gitのバージョンの確認コマンド　例　Macのパターン

実行
git --version

結果 git version 2.20.1 (Apple Git-117) > git version XXXが表示されない方は、
上記Gi公式サイトリンクよりダウンロードしてください。

説明時に使った開発環境やツール〜📄

・PC：MacBookPro 2017
・OS：macOS Mojave バージョン 10.14.16
・エディタ：Visual Studio Code
・ターミナル：iTerm2
・GitHub（無料プラン）
・Gitバージョン　2.20.1
・言語 Ruby

注意点〜👀⚠️

・全てのパターンに該当するわけではありません
・現場によっては違うかもしれません
・あくまで一例の流れであるということ

それでは早速、はじめて行きまっしょうか😄

流れの説明するよパターン①🎉 イメージを掴む

✔️自分のPCにワークスペースを作ろう〜💻

ここで作成したフォルダの中で今から作業していくよー
例
USERnoMacBook-Pro:~ user$ cd documents
USERnoMacBook-Pro:documents user$ mkdir test

ここで使ったコマンド〜
cd（今見ている場所、位置） 移動したい場所
mkdir（空っぽのフォルダを作る） 作成したいフォルダ名

✔️Git初期設定〜 ワークスペースを初期化しようっ⚙ 最初の1回だけ
ここからは①で作成した「test」フォルダの中で作業していくよ！

例
実行
USERnoMacBook-Pro:test user$ git init

✔️ユーザー設定しよう〜　最初の1回目だけ

例　name,emailの部分はご自身の好きなように変更してください。あくまで一例です。
USERnoMacBook-Pro:test user$ 下記2つのコマンドを順番に実行
git config --local user.name  "test"
git config --local user.email "test@gmail.com"

確認コマンド
git config --list

user.name=test
user.email=test@gmail.com

設定されてる、よしよし

✔️GitHubで作ったリモートリポジトリで紐付けしよう〜✨

リモートの接続先が設定されていないことを確認しておこう！
実行
git remote -v

失敗
fatal: not a git repository (or any of the parent directories): .git

設定されていませんねっ、では紐付けましょうか

下記コマンドを実行（URLは上記画像の場所で確認できます）
git remote add origin https://github.com/hiromuaraki/test.git

確認
git remote -v

接続先
origin	https://github.com/hiromuaraki/test.git (fetch)
origin	https://github.com/hiromuaraki/test.git (push)

＼(^o^)／紐付いたああああああ！

✔️作業しよう〜💪
ここからはフォルダ内にプロジェクトを作成し、自由に作業してください。
ここでいう作業とは新規ファイルの作成|新規プロジェクトの作成 を指します。別のやり方は流れの説明するよ〜パターン②にて説明します。

✔️作業後、状態の確認をしよう〜👀

実行
git status

こんな風に出力されます

No commits yet

Untracked files:
 (use "git add <file>..." to include in what will be committed)

	myapp.rb←（変更があったら赤くなります）

nothing added to commit but untracked files present (use "git add" to track)

✔️ステージングしよう〜 add

変更のあった全てのファイルをステージング
→仮登録しておくイメージです、これやらないと次のコミットができません(T ^ T)

実行
git add -A
または
git add .
または
git add myapp.rb(ファイル名を指定)

状態の確認
git status

No commits yet

Changes to be committed:
 (use "git rm --cached <file>..." to unstage)

	new file:   myapp.rb(ここが緑になっているはず)

※複数ファイルがある時はいらないファイルはステージングしないように⚠️
gitignoreに追加すれば、ステージング対象外になります。ここでは割愛

✔️コミットしよう〜 commit

ワークスペースでの作業内容を確定させる

実行
git commit -m "first commit"

こんな風に出力されたましたか？
[master (root-commit) 00fd384] first commit
1 file changed, 219 insertions(+)
create mode 100644 myapp.rb

✔️GitHubへ変更を反映させよう〜 push⚠️

GitHubに作成済みのリモートリポジトリに変更内容を反映させる
実行
git push origin HEAD

HEAD >　現在の位置（ここでは *master を指します) > 作業ディレクトリと紐付いている

うまく反映されているか、GitHubを見てみましょうっ♪わくわく🤗

きてるやんけ〜よっしゃーーーーーー👏

✔️リモートから最新の状態を取得しよう〜 fetch⚠️

git fetch

origin/masterが更新される > リポジトリと紐付いている
origin/masterが更新されるだけで、ファイルの変更はされない

✔️マージしよう〜 merge⚠️

リモートとローカルの内容を合体させる
git merge origin/master

ここまでがgitの流れになります。
次は共同開発時の流れをみていきましょうか☆若干難易度が上がります。

流れの説明するよパターン②🎉 共同開発編〜

1.GitHubからクローンしよう〜 clone

自身の環境の作業したい場所へ既にあるプロジェクトをクローンしてこようっ🤗

例
git clone https://github.com/hiromuaraki/test.git

実行
git clone https://github.com/ユーザー名/リポジトリ名.git

2.ブランチを切ろう〜🌿 branch

パターン①では作成しませんでしたが、master(main)などは開発時は
正規データとして設定されているのでここで作業してはかなりまずい^^;
一般的に正規データに影響を与えないように作業していきますので
そのためには、分岐させます。今からやることは正規データとは分岐させた場所で作業します。

ブランチの作成 & 切り替えを行う 
実行
git checkout -b lesson-git-branch

ブランチの確認
git branch

結果　＊が現在のブランチ > masterから切り替わってることを確認
* lesson-git-branch
 master

3.ローカルで作業する〜💪

ゴリゴリコードを書いて追加、変更していきましょう🏃‍♂️💻

4.差分を確認しよう〜 diff 👀

実行
git diff

diff --git a/myapp.rb b/myapp.rb
index d873a8e..643078d 100644
--- a/myapp.rb
+++ b/myapp.rb
@@ -159,6 +159,7 @@ helpers do
    end
end

get '/movies/:movie_id/reviews/new' do
    return redirect to("/sessions/new") unless logged_in?
    movie = Movie.find(params[:movie_id])
@@ -217,3 +218,6 @@ def current_user
    #@current_user = @current_user || User.find(session[:user_id])の略
    @current_user ||= User.find(session[:user_id])
end
+
+def get_uesr
+end

見づらいですよねー、なので私はエディタ上で確認してます。下記に画像を添付しますね

Visual Studio Code画面
Git Historyインストールしています

このハイライトされてる箇所が今回の変更箇所になります。
左 before 右 afterになります。
差分はステージングする前に確認する癖をつけましょう！！

5 .OKだったらadd commit pushをしよう〜🍌

コマンドは 流れの説明するよパターン①🎉 イメージを掴む
に記述した
✔️ステージングしよう〜 add
✔️コミットしよう〜 commit
✔️GitHubへ変更を反映させよう〜 push⚠️ をご確認ください🙇‍♂️

⚠️ここまでがローカル(開発者)作業です-----------------------
実はこの時点でGitHub上では変化が起きています。
早速確認してみましょう😄

6.PR（プルリクエスト）を作成しよう〜 🍓

これは何が起きてるんだー🤔
結論　メイン(master)のブランチ以外がpushされた場合に表示される

さっきこのコマンドでリモートの変更をしましたよね？

git push origin HEAD

HEAD > 現在の位置
HEAD -> lesson-git-branch こうなっています。

リモートリポジトリ は master(branch) です。
これに対して違うbranch以外がpushされたため、このように表示されたのですねっ、納得！

早速PRを作成してみましょう！画像の右上の
Compare & pull requestボタンから作成できそうです！

よし、これで準備完了です！！master(正規データ)に合体していい？というお伺いをたてられました👏
ここからはコードレビューでアドバイスや修正になったりします😱
頼む🙏レビュースムーズに行ってください。
共同開発時は、基本的に下記画像の「Merge pull request」ボタンは押さないでください⚠️
→レビュー マージ担当者の方が確認し、OKであれば押していただけます。
これを押してしまうと正規データへ合体されてしまいます(T ^ T)
→現場によっては実装者が押す場合もあります、しかし安易に押さない
これを徹底する癖をつけましょう☆

PR（プルリクエスト）がOK👌→7.へ NG✖️→3.〜.6を繰り返す
ここまできたらあと少しです、頑張るぞい🤗

7.リモートから最新の状態を取得しよう〜 fetch🍇

コマンドは流れの説明するよパターン①🎉 イメージを掴むに記述した
✔️リモートから最新の状態を取得しよう〜 fetchを実行

8.ブランチ🌿を切り替えよう〜 checkout🍎

ブランチの切り替えのみ
実行
git checkout master

git branch
 lesson-git-branch
* master
branchが *masterへ切り替わったことを確認

9.リモートリポジトリ とローカルデータをマージしよう〜🍊 merge

コマンドは流れの説明するよパターン①🎉 イメージを掴むに記述した
✔️マージしよう〜 merge⚠️​を実行
この8.9を実行することで、ローカルのファイルが最新の状態になりま😱
→めんどいですね。。。。。

今回は使っていませんが下記コマンドも結構使います

git pull

やってること >fetch + merge origin/masterを実行している

10. 2.〜9.までの作業を繰り返そう〜🍒

ここまで本当にお疲れ様でした👏👏私も疲れました^^;
共同開発時の流れはここで終了です！！
普段Evernoteにまとめてチートシートとして使用していたのですが、
少しでも読んでいただいた方の役に立てたら嬉しいです。

補足 よく使うGitコマンド集〜🎉

状態の確認
git status

ログを見る
git log

新規トピックブランチ(一時的に使う)の作成 & ブランチの切り替え
git checkout -b topicブランチ名

ブランチ名の変更
git branch -m 変更したいブランチ名

ブランチの確認 *が付いているのが現在のブランチ
git branch

ブランチの削除
git branch -d 削除したいブランチ名

リモートリポジトリの接続先を確認
git remote -v

リモートリポジトリの接続先を削除
git remote rm origin

コミットの修正 > ファイルの修正はやり直さない > コミットメッセージの修正の時とか使う
git reset --soft HEAD^

コミットの修正 > 全部やり直し（ステージングも） > 変更内容がなかったことになる
git reset --hard HEAD^

かなりやばい魔法のコマンドのご紹介〜🙅‍♂️ 通称フォースpush

撃っていいのは、撃たれる覚悟があるやつだけだ！
アニメ「コードギアス反逆のルルーシュ」引用

リモートの内容を強制的にローカルの内容へ上書きする悪魔のコマンド
git push -f origin master(main)

最後に〜🥂

ここまでお付き合いいただきありがとうございました🙇‍♂️
今回の共同開発の流れは、下記に添付。

<Git共同開発流れ〜>
1.git clone URLにてリポジトリを取得
2.git checkout -b branch名にてbranchを切り替え & 新規ブランチを作成
3.ローカルにて作業
4.差分の確認　-git diff
5.ステージングへ追加 -git add .
6.ローカルの変更を確定 -git commit -m “メッセージ”
ここまでローカル(開発者)-----------------------------
7.pushにてリモートへ変更を反映 -git push origin HEAD
8.github上にPR（プルリクエスト）通知あり
　 新規PRリクエスト作成
ここまで開発者が行う(開発者)-------------------------
ここからレビュー担当者、マージ担当者-----------------------------
9.コードレビュー、変更内容確認
10.結果をフィードバック
  OK:マージする
  NG:再度開発者が修正　3-8の手順を行う
  必要のない場合:PRをcloseする
ここからレビュー担当者、マージ担当者-----------------------------
10までがすべてOKだったら
開発者------------------------
11.リモートの最新の状態を取得する -git fetch
12.branchの切り替え -git checkout main
13.masterと自分のローカルを合体させる -git merge origin/main
14.2-13までの作業を繰り返す

ここまで本当にお疲れ様でした〜🍻
これから個人開発に取り組まれる方、GitHubを使いたい方は
参考に取り組まれてみてくださいっ
※今後、修正する可能性もあります
最初はハードルが高いかもしれませんが、毎日触る習慣と「開発」を経験
することにより、慣れると思います。

若干の宣伝をさせてください🙇‍♂️

standfm 「ひろむの日常チャンネル」　紹介✨

stand.fm

自身のGitHub〜🌿これからも頑張ります！！

hiromuaraki - Overview

今後もプログラミング関連の投稿していきますので また寄ってくださいね✨
では また〜🖐