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

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

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


:::note warn
プログラミング学習中の身なので、
誤記等あるかもしれまんせん。
その場合はコメントいただけると幸いです。
:::
:::note 
本記事は以下の設定が完了している方向け対象になります。
* 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バージョンとスペック確認方法](https://cs.myjcom.jp/knowledgeDetail?an=000002674)
[Gitのバージョン確認方法](https://www.famlog.jp/article/1729)
[【Visual Studio Code】バージョンを確認するやり方を解説します](https://www.tairaengineer-note.com/visual_studio_code-check-version/#:~:text=Visual%20Studio%20Code%E3%82%92%E8%B5%B7%E5%8B%95,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82)


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

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

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

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/3396e6b4-f2e5-e198-fb13-84daf6a40439.png)


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

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/631a7c55-eef6-cecd-69d7-9c5417010b62.png)

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

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

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

Gitの状態を表すアルファベットは他にもあります。
詳しくはこちらの記事が参考になります。
[VSCodeで表示されるアルファベットと数字の意味は何か？A, M, U, D, C, R, S](https://prograshi.com/general/editor/alphabet-and-numbers-in-vscode/)


![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/94520c43-959a-4f49-06fa-03fce9edede1.png)

なので`index.html`をステージングに上げないといけません。
やり方は簡単で`index.html`の横にある「＋」を押すだけ。(下の画像参照)
![3-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/063d337d-88c1-f83b-b2be-7115aeb0b76c.png)
これはコンソールでgit addのコマンドを叩いたことと同じことになります。
~~~ Console
$ git add index.html
~~~

↓
するとVSCodeの画面が以下のようになります。
「index.html」が「Staged Changes」に移動しました。
横には「<font color="mediumaquamarine">**A**</font>」と書かれています。
これは「added」を意味していて「新規追加」を意味します。
ちゃんとaddされています。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/c4666a85-e508-8aed-7ccd-832550aff9d8.png)
<font color="gray">別に「＋」を押さなくてもコミットする時に</font>
<font color="gray">「なにもステージングにないけどステージングにあげてコミットしようか？」</font>
<font color="gray">ってVSCodeが聞いてくれるのでやらなくてもいいですが、丁寧に説明させていただきました。</font>


### (4)コメントつけてローカルリポジトリにコミットする
次にローカルリポジトリにコミットしていきます。
「Commit」とでかでかと書いているのでそこをクリックしてください。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/cf232fd2-e7a2-27b7-1a11-a4dc73d1f085.png)

するとコミットコメントを書くようのCOMMIT EDITMSGタブが開かれるので、
下の写真のように赤枠のところに好きなコメントをかきます。
自分は
>初コミット！

と書いています。コメントを書いたら保存してCOMMIT EDITMSGタブを閉じてください。
下の写真の黄色矢印のところです。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/82a30013-5e71-815c-210c-8dc2eca93ed5.png)
<font color="gray">COMMIT EDITMSGタブを閉じないとコミットが始まらないようで</font>
<font color="gray">自分は最初気が付かず「コミット始まらないな～」ってずっと待ってました。(´；ω；`)ｳｩｩ</font>

上記でコンソールで言うところの
~~~Console
$ git commit -m "commit message"
~~~
とコマンドを打ったことと同じことをしました。


### (5)リモートリポジトリを新規作成して、プッシュする
いよいよリモートリポジトリにプッシュします。
「Publish Branch」をクリックしてください。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/74961c15-bc7c-7621-418a-9991f5419f22.png)

するとリモートリポジトリ名を決めてねと言われるので
好きな名前にしてください。僕は`Qiita01`にしました。
リポジトリ名決めたらエンターで完成です！
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/690504e9-8c2d-3713-26c6-a238c1f2da43.png)


### (6)GitHubに行って確認をする
GitHubの自分のアカウントにログインして「Repositories」を確認すると
先ほど作った`Qiita01`リポジトリが作成されています。
権限がPrivate(自分しか閲覧できないリポジトリ)になっているので
公開したい方は閲覧権限をPublicに変更してください。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/d4408b92-acd7-d25e-8b73-390503dc9d2e.png)

権限の設定変更方法はこの記事では書きませんが、
こちらのサイトが参考になります。
[【GitHub】PrivateとPublicを変更する方法【可視性の設定】](https://yu-report.com/entry/githubprivate/)


## 作業完了

VSCodeで簡単にGitHubに公開することができました。
例えば、課題をGitHubに提出しないといけなくて、
「課題はできたけどGitHubがうまくいかない！」って人は試してください。

VSCodeを使えば他にも
プッシュ、プル、マージ、ブランチ作成も簡単にできます。
そのあたりは次回書けたらいいなと思っています。(時期は未定ですが)

ちなみに上記の操作はここをクリックしたらできます。
他にもいろんな操作ができますね。(下の写真参照)
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322871/d3f7f938-aa74-2924-dde9-7e1cdeb785f8.png)






## 参考文献
上記にも記載しましたが、以下のサイトを参考にさせていただきました。

■バージョンの確認方法
[Windows 10｜OSバージョンとスペック確認方法](https://cs.myjcom.jp/knowledgeDetail?an=000002674)
[Gitのバージョン確認方法](https://www.famlog.jp/article/1729)
[【Visual Studio Code】バージョンを確認するやり方を解説します](https://www.tairaengineer-note.com/visual_studio_code-check-version/#:~:text=Visual%20Studio%20Code%E3%82%92%E8%B5%B7%E5%8B%95,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82)

■Gitの状態を表すアルファベットについて
(https://prograshi.com/general/editor/alphabet-and-numbers-in-vscode/)

■リポジトリの公開設定を変更する方法
[【GitHub】PrivateとPublicを変更する方法【可視性の設定】](https://yu-report.com/entry/githubprivate/)


また、Qiita初投稿のためQiitaの記事の書き方について
以下の記事を参考にさせていただきました。

[良い記事を書くためのガイドライン](https://help.qiita.com/ja/articles/qiita-article-guideline)
[Qiita Markdown 書き方 まとめ](https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1#3%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E6%8C%BF%E5%85%A5%E7%94%BB%E5%83%8F%E3%81%AE%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF)
[【書き方まとめ】初めてQiitaに記事を書くときに知っておくべきこと](https://qiita.com/shizen-shin/items/a997bc228fa2850c9fce)

どのサイトもとても分かりやすく勉強になりました。

## 文書履歴
ver1.0.0 初稿　（2022/11/13 投稿）