Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@ub0t0

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

概要

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

参照

6
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ub0t0
Javascript, Git, GAS など勉強中の初心者です

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?