3
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[VScode] git/ GitHub を管理する方法

Last updated at Posted at 2020-10-12

概要

Visual Studio Code を利用して、git で作業ディレクトリ(ローカルディレクトリ/リモートディレクトリ)を管理する方法についてまとめる。

前提知識

ターミナルで git/github を管理する方法

環境

  • Visual studio Code 1.47.2
  • git 2.17.2 (ユーザー名、メールアドレスなどの初期設定済み)

事前準備

作業フォルダとして事前に「gitVScode」を作成し、「hogehoge.md」 を格納
スクリーンショット_2020-09-29_14_30_24.png

ローカルディレクトリの管理

git init //フォルダをバージョン管理の対象にする

[Initialize Repository] をクリック
スクリーンショット_2020-09-29_14_24_38.png

フォルダに「.git」が作成された
スクリーンショット 2020-09-29 14.39.55.png
※「.git」は隠しファイルであるため、隠しファイルを表示するように設定
 mac の場合、command + shift + . で表示/非表示の切り替えが可能

git add //記録対象の指定

変更がある場合に左側のアイコンに❶といったように表示される
対象ファイルのプラスマーク([Stage Changes])をクリック
スクリーンショット_2020-10-12_11_04_47.png

複数ファイルを一括でステージさせたい場合は [Changes] の横をホバーすると [+] が出てくる
スクリーンショット_2020-10-12_11_05_00.png

git commit // 変更点の記録

[Message] にコミットメッセージを入力する
スクリーンショット_2020-10-12_11_09_27.png

入力したら、[✔︎] をクリックすると commit 完了
スクリーンショット_2020-10-12_11_11_01.png

リモートディレクトリ(GitHub) の管理

GitHub でリポジトリを作成

[Your profile] → [Repositories] → [New] をクリック
スクリーンショット 2020-09-10 17.05.16.png

[Create a new repository] ページが表示されるので、[Repository name] を入力する。ここでは、ローカルフォルダとあわせて「gitvscode」とする。
スクリーンショット 2020-09-29 15.39.34.png

設定が完了したら、[Create Repository] をクリックする
スクリーンショット_2020-09-29_15_40_53.png

画面に表示された [HTTPS] か [SSH] をコピーする
ここでは、GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~を参照し、SSH の設定を行っている

git remote add //ローカルディレクトリを github のリモートディレクトリに紐づける

[・・・] → [Remote] → [Add Remote] をクリック
スクリーンショット_2020-09-29_15_48_12.png

GitHub でコピーした https/SSH を貼り付けてエンターキー
スクリーンショット_2020-09-29_15_48_32.png

[Remote name] に「origin」と入力し、エンター
スクリーンショット 2020-09-29 21.22.03.png

ターミナルでgit remote -vを入力し、正しく登録できたか確認スクリーンショット_2020-09-29_21_24_35.png

git push //commit 済みのディレクトリを github に更新

[・・・] → [Push] をクリック
スクリーンショット 2020-09-29 21.35.00.png

初回は以下のようなメッセージがでる。このメッセージは、新規ブランチなので、リモートに紐づけるブランチ(追跡ブランチ/アップストリームブランチ)がない、というメッセージ。
スクリーンショット 2020-09-29 21.35.09.png
参照:Git で新規ブランチを切って Push する時に何やら怒られるヤツの回避方法

[OK] をクリックした後に追跡ブランチを確認するgit branch -vvを実行

TERMINAL
gitVScode $ git branch -vv
* master 8bd914e [origin/master] add message

[Cancel] をクリックして、git push -u origin masterを実行後、追跡ブランチを確認

TERMINAL
gitVScode $ git push -u origin master 
Counting objects: 3, done.
Writing objects: 100% (3/3), 214 bytes | 214.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/xxxxx/gitvscode.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

gitVScode $ git branch -vv
* master 58b5df5 [origin/master] add message

git push -u origin masterを実行した時と、追跡ブランチが同様に設定されていることが確認できたので、初回に表示されるメッセージは [OK] を選択して問題ないことがわかった。

git pull // ローカルリポジトリに最新版を適用

github 上で変更した場合は pull コマンドを利用して、ローカルリポジトリも更新する

[・・・] → [Pull] をクリック
スクリーンショット 2020-09-29 21.34.40.png

VScode では利用しないコマンド

git status //ステータスの表示

[Changes] 以下にファイル名が並んでおり、ファイルの追加、編集、削除を行うと自動的に U, M, Dがファイル名の横に記載される
スクリーンショット 2020-09-29 14.54.59.png
ステータスの表示にあたる画面

git log // ログの表示

デフォルトでは git log に替わる UI がないため、ログを見やすく表示することができるアドインツール(Git History)をインストールする必要がある
スクリーンショット_2020-09-29_21_47_42.png

[Git : View History (git log)] アイコンが表示される。クリックするとログが表示される。
スクリーンショット_2020-09-29_15_28_01.png

参照

3
9
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
3
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?