More than 3 years have passed since last update.

VSCodeからGitHubにコードをPushする方法

Posted at 2022-11-13

VSCodeからGitHubにPushする

GitBashでコマンドを叩いてGitを操作していたが、
VSCodeを使えば簡単にGitを操作するができることを知ったため、
自己理解を深めるために記事を書くことにしました。Qiita初投稿になります。

本記事はVSCodeを使って、新規ファイルを新リポジトリにPushする方法を書いています。

プログラミング学習中の身なので、
誤記等あるかもしれまんせん。
その場合はコメントいただけると幸いです。

本記事は以下の設定が完了している方向け対象になります。

Gitのインストール
GitHubのアカウント作成
SSHの設定

環境について

本記事に添付されているキャプチャは以下の環境で2022年11月13日に取得しました。

OS ：Windows 11 Pro (バージョン21H2)
Visual Studio Code ：1.73.1
Git：version 2.38.1

バージョンの確認方法は以下サイトを参考にさせていただきました。
Windows 10｜OSバージョンとスペック確認方法
 Gitのバージョン確認方法
 【Visual Studio Code】バージョンを確認するやり方を解説します

VSCodeを使って新規ファイルをGitHubにPushする

ここから本題に入ります。

(1)新規フォルダを作成

まずは、GitHubに上げる予定のフォルダを作ります。
例としてドキュメント配下にQiitaというフォルダと作って、中にindex.htmlをつくりました。

(2)VSCodeでフォルダを開く

作ったフォルダをVSCodeで開いてください。
一番左に枝が分岐した様なアイコンがあるので、それをクリックすると
「Initialize Repository」というボタンがあるのでそれをクリックしてください。
(このフォルダはGitリポジトリがないからGitリポジトリを作りましょうって意味のよう)
この時点で作成されるリポジトリはローカルリポジトリです。

(3)VSCodeを使って変更ファイルをステージングに上げる

「Initialize Repository」というボタンをクリックすると下の画像のように変化します。
「∨ Canges」の下にindex.htmlがあるのが確認できます。
(Cangesの横の①は変更があったファイルの数です。)

その横に「U」と書いています。これは「untracked」を意味していて
新規作成ファイルやadd前のファイルを示しています。
index.htmlはさっき作成したファイルなので合っていますね。

Gitの状態を表すアルファベットは他にもあります。
詳しくはこちらの記事が参考になります。
VSCodeで表示されるアルファベットと数字の意味は何か？A, M, U, D, C, R, S

なのでindex.htmlをステージングに上げないといけません。
やり方は簡単でindex.htmlの横にある「＋」を押すだけ。(下の画像参照)

これはコンソールでgit addのコマンドを叩いたことと同じことになります。

$ git add index.html

↓
するとVSCodeの画面が以下のようになります。
「index.html」が「Staged Changes」に移動しました。
横には「A」と書かれています。
これは「added」を意味していて「新規追加」を意味します。
ちゃんとaddされています。

別に「＋」を押さなくてもコミットする時に
「なにもステージングにないけどステージングにあげてコミットしようか？」
ってVSCodeが聞いてくれるのでやらなくてもいいですが、丁寧に説明させていただきました。