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

hiromu

2020年10月29日 19:59

今回投稿した目的✨

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

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

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

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

・GitHubアカウントの作成やリポジトリ作成手順
・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

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

スクリーンショット 2020-10-27 10.29.25

下記コマンドを実行（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を見てみましょうっ♪わくわく🤗

スクリーンショット 2020-10-27 12.00.58

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

✔️リモートから最新の状態を取得しよう〜 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

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

スクリーンショット 2020-10-27 13.09.21

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

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

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

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

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

スクリーンショット 2020-10-27 13.23.26

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

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

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

git push origin HEAD

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

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

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

スクリーンショット 2020-10-28 11.41.42

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

スクリーンショット 2020-10-27 14.00.43

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 「ひろむの日常チャンネル」　紹介✨

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

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

いいなと思ったら応援しよう！

この記事が参加している募集

#スキしてみて

585,227件

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

今回 投稿した目的✨

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

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

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

注意点〜👀⚠️

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

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

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

最後に〜🥂

いいなと思ったら応援しよう！

この記事が参加している募集

今回投稿した目的✨

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