LoginSignup
1
0
@luckygogbb

VSCodeにおけるgitGUI操作方法

Last updated at Posted at 2024-03-05
Gitに関連する概念

Gitとは

Gitとはソースコードや変更履歴を管理するために使われる、代表的な分散型バージョン管理システム --Wiki

基本概念

リポジトリとは

ソースコードと変更履歴を格納する倉庫

gitにおけるローカルとリモートリポジトリの役割の違い

gitは複数人のプロジェクトのソースコードを管理するものなので、
リモートリポジトリの役割：共有倉庫
ローカルリポジトリの役割：個人倉庫

共有倉庫の特徴：

  • 個人倉庫のすべてのソースコードと変更履歴に含むこと
  • ランチ名にorigin/がつくこと

個人倉庫の特徴：

  • ソースコードと変更履歴が共有倉庫の一部あるいは全部と必ず一致すること

ブランチとは

ブランチ≒個人倉庫

pull,push,fetch,cloneがやっていること

image.png
引用元：目指せ！脱初心者 Gitの基本を図解で解説

pull,push,fetch,merge,commitとは

fetch：リモートリポジトリの状態を取得するだけ、ローカルブランチのソースコードを更新しない
merge：ターゲットブランチからローカルブランチにソースコードと変更履歴を取り込み、一致させること

mergeの際にターゲットブランチに同名ファイルが存在し、内容が異なるとエラーが出るため、同名ファイルを回避(stash)する必要がある

回避修復(stash apply)を行う際、同名ファイルが存在し、内容が異なるとコンフリクト（衝突）が発生する、解決しないとmergが完成しない

pull：fetch+merge
commit:変更したソースコードを承認すること
push：承認したソースコードをリモートリポジトリにアップロードすること
おすすめ図解記事ーーgit pull と git pull –rebase の違いって？図を交えて説明します！

VSCode インストール方法

  1. git本体インストール
    https://github.com/git-for-windows/git/releases/download/v2.44.0.windows.1/Git-2.44.0-64-bit.exe
    インストーラ実行中のダイアログで選択肢デフォルトのままで次へを選択する。
    途中でpathを自動的に通してくれるチェックボックスがあるので、それだけチェック入れて最後まで進める。

  2. Gitの初期設定
    Gitをインストールしたら，まずは次の内容の初期設定をしておきましょう。
    Git for Windowsに同梱されているGit Bashを起動して，以下の内容でコマンドを実行します．

    • ユーザ名とメールアドレス
    • エディタ，マージツールの設定（ここではVSCodeを指定しています）
    • pushのデフォルト方式を指定（追跡ブランチに対してpush） 
      $ git config --global user.name 'username'
$ git config --global user.email 'username@example.com'
$ git config --global core.editor 'code --wait'
$ git config --global merge.tool 'code --wait "$MERGED"'
$ git config --global push.default simple
$ git config --global pull.rebase false
$ git config --global core.quotepath false

  3. VSCode Extensionsをインストール

Extensions

image.png

  • VSCode内でGitの各種操作をしやすくするための拡張機能
  • リポジトリの状態、ブランチ管理を視覚的に行える

効果

image.png

GitLensにおけるgitの利用する方法

ブランチ構成に関して

  • masterブランチ:ローカルリポジトリにてリーダークラス管理者によって管理(VSCodeのフォルダ指定先)
  • 個人ブランチ：ローカルリポジトリにて各開発者が管理する(VSCodeのフォルダ指定先)
  • origin/masterブランチ:リーダークラスからGitにより管理
  • origin/個人ブランチ：各開発者がGitにより管理
  • developブランチ：少人数でアジャイル開発に必要か要検討

1.空フォルダからリモートブランチを作成する場合

ローカル上でmainブランチを作成

image.png

ローカルブランチをリモートブランチとして（github）公開

image.png

1.リモートリポジトリからローカルブランチを作成する場合

リモートリポジトリからローカルフォルダにcloneする

image.png


image.png

cloneが完成したら下記のようになる
image.png
画面の左下にmainブランチが表示されていることが確認できます。
これでローカルブランチの作成が完了しました。
次に仕事上での操作として個人ブランチを作成します。

個人ブランチを作成する

image.png

image.png


個人ブランチ名を入力し、「Enter」を押す
image.png


画面左下のブランチ名が個人ブランチになっていることを確認する
image.png

個人ブランチをリモートリポジトリにpushする

image.png
以上までが個人ブランチの作成プロセス

2.個人ブランチからソースコードをアップロードするプロセス

リモートリポジトリの最新情報取得(fetch)

リモートリポジトリの最新情報取得(fetch)

image.png

リモートリポジトリの最新情報取得(pull(rebase) pull)

リモートリポジトリの最新情報取得(pull(rebase) pull)

pull(rebase)を行う理由は、アジャイル開発において、毎日ソースコードをコミット＆プッシュする状況になることが想定されるので、マージコミットを作成しないpull(rebase)は、コミット履歴を綺麗にすることができます.

rebaseは初心者に厳しいので、pullでいい

image.png

ローカル変更を退避する(stash)

ローカル変更を退避する(stash)

image.png

退避を戻す(stash apply)

退避を戻す(stash apply)

image.png

変更承認（stage）する

変更承認（stage）する

image.png


修正ファイルがChangesからStaged Changesに移していることが確認できる
image.png

（commit）の変更説明をMessage欄に入れる

変更説明形式に関して、
{関連案件}{修正箇所1}{修正箇所2}のフォマードで入れましょう

image.png

アップロード(commit & push)する

アップロード(commit & push)する

image.png

リモートリポジトリの同名ブランチを確認

最新のコミット履歴を確認する
image.png

3.ブランチを切り替える方法

image.png

image.png

image.png

4.masterブランチ更新（リリース）方法

ローカルリポジトリのmasterブランチにてpullを行う,マージコミット履歴を確認するため、pull --rebaseを使わずに通常のpullで良い

個人ブランチからmasterブランチの最新情報をpull

個人ブランチからmasterブランチの最新情報をpull

masterブランチに切り替える

masterブランチに切り替える

image.png

各開発者からソースコードをpullする

各開発者からソースコードをpullする(pull from)

image.png

image.png

参考文献

VSCodeでのGitの基本操作まとめ
git pull と git pull –rebase の違いって？図を交えて説明します！
目指せ！脱初心者 Gitの基本を図解で解説

1
0
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
Sign upLogin
1
0