世界一よくわかるgit操作~vscode編~

# 世界一よくわかるgit操作~pushまで~
githubは変更履歴を管理、共有するためのツールです。今や、世界中でエンジニアが利用しているツールとなっています。そのため、これからエンジニアになるには超絶必須ツールです。ですが、初学者の方は苦手意識を持ちがちだと思います。そこで、gitと友達になってもらうことを目標にこの記事を書かせてもらいました。
#### Make friends with Git !
## Gitをインストール
#### 1.　Gitがインストールされているか確認
- Mac
```
git --version
```
- Windows
```
git version
```
##### 2.　下記のようにバージョンが表示されればOK
```
git version 2.32.1 (Apple Git-133)
```
#### 3.　Gitがインストールされていなかった場合、インストールする
- Macはこちらから
    - https://git-scm.com/download/mac
- windowsの方はこちらから
    - https://gitforwindows.org/
## Gitの初期設定
下記のようにユーザー名とメールアドレスを登録することで、誰がコミットしたのか分かるようになります！
```
git config --global user.name "ユーザー名"
git config --global user.email "メールアドレス"
```
さらに、github上のコントリビューション・カレンダーにコントリビューションを追加することができるようになります！コントリビューションとは、「貢献」という意味です。コミットやプッシュすることで、増やすことができます。
![コントリビューション・カレンダー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/5b24edbd-4f7f-8bff-0078-8d80d3484d27.png)
この様子が草が生えているように見えることから、コントリビューションは「草」と呼ばれたりしています。俗に言う、「草を生やす」ってやつですね！どれだけ自分がプログラミングをやっているか、視覚的に分かるため、就活の材料にはピッタリですね！
## githubアカウント作成
##### めっちゃ宇宙...素敵..！
![githubアカウント作成.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/9cd5de5d-19e7-86b7-e21c-2cb6a2ffafcd.gif)
1.　https://github.com/ にアクセスする
2.　「Sign up」をクリック
3.　必要情報を入力
4.　「create　account」をクリック
5.　メールアドレスに届いたコードを入力
6.　各項目にチェックしていく
7.　「free」を選択して作成完了！
## リポジトリ作成
#### 1.　https://github.com/ にアクセスしてログインする
#### 2.　赤丸の「New」をクリック
 ![create-new-repo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/6fd524da-6f22-c389-6c69-05ef05f819c9.png)
#### 3.　「Repository name」を記入して名前をつける
#### 4.　「Public」か「Private」を選択する（今回はPublic）
![スクリーンショット 2022-06-11 15.00.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/3093e74c-255b-2497-cb7a-d15e8a000991.png)
#### 5.　「Create repository」をクリックして作成
![スクリーンショット 2022-06-11 15.04.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/0db793ae-3470-089f-90da-6af7f5f3e96b.png)
#### 6.　こんな画面が出ればOKです！（リポジトリ名は「test」にしました！）
![スクリーンショット 2022-06-11 15.06.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/86a4d6b2-dc51-da9b-653d-50cd9a4a507f.png)
## ファイル変更からプッシュ（マスターブランチに反映）まで
### git init ローカルリポジトリの初期化
#### 1.　作業するディレクトリを作成する
![スクリーンショット 2022-06-12 0.20.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/b377f678-d078-9008-cedc-9206895d39a3.png)
#### 2.　作成したディレクトリをエディター（vscode）で開く
- お好きなシェル（Macならターミナル、windowsならコマンドプロンプトとか）を開いて、作成したディレクトリーまで移動して
```
code .
```
でvscodeを起動することができます。
#### 3.　ターミナルを開いて、作成したディレクトリに移動していることを確認
#### 4.　ターミナルで git init する
```
git init
```
#### 5.　初期化されているか確認する
- 下記のように　.gitディレクトリ（ローカルリポジトリ）が作成されていればOK
![スクリーンショット 2022-06-12 0.52.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/cf3c5f40-8cc6-9db0-2af0-2e37e19ebcbe.png)
##### これで準備は整いました！
### ファイルを作成する
- 今回は下記のようにindex.htmlファイルを作成しました
1.　赤丸に青丸で①と表示されているので、クリックします
![index.html作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/6d554e3b-db3b-1325-5c91-a5c0d67f37cc.png)
2.　「変更」欄に先ほど作成したindex.hmtlがあることが分かりますので、index.htmlをクリックします
![変更をクリック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/6c0d44a2-78fe-d587-8b40-9e82c07006a2.png)
3.　下記のように表示され、左（赤いの）が変更前、右（黄緑の）が変更後のindex.htmlです
（今回は、新規に作成したため、「コードなし」と「コードあり」になっています）
![差分確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/15b152ca-9078-da47-b289-2078c9297e28.png)
##### この変更前と変更後の差を「差分」と呼びます！
### git add [ステージングする対象ファイル]
##### githubに変更を反映するには、まず、この手順が必要です。これはステージングと呼ばれています。コミットするための準備って感じです。
1.　先ほどクリックしたindex.htmlの左横にあるアイコンたちの中の、「+」ボタンをクリックします
![git add プラスボタンクリック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/805aeee7-dae0-c9aa-814a-bcc23824a1bf.png)
2.　「ステージされている変更」にindex.htmlが追加されています
![ステージング後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/45f74fde-6f2b-2de8-739f-b42d0611d962.png)
3.　上記の「-」ボタンを押すことで、下記のように変更を無かったことにすることもできます
![git add +-.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/ce5cb9a4-b495-4da3-de9f-ed86b1d1eb16.gif)
### git commit -m [コミットメッセージ]
##### 次に、コミットが必要です。これは、ステージングされたものをプッシュするための準備って感じです。
1.　赤い囲いのところに、メッセージを入れます（今回は初回コミットのためfirst commit）
##### このメッセージをコミットメッセージと呼びます。どんな変更内容を反映するのか短く分かりやすいメッセージで書いてみましょう！
![コミット名を記入.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/d1fbd2cd-9bf6-df82-de8e-13788aab933c.png)
2.　「ソース管理」の右横のチェックをクリックします
![コミット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/1b8c2f3e-bc88-3833-a09d-1958965171eb.png)
3.　これでコミットできました！
![コミット後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/6397789b-6282-5614-aeb3-427653711b05.png)
### git branch -M main
githubが公式にデフォルトブランチ名を「master」から「main」に変更する方向性を打ち立ています。そのため、先ほど見た画面の手順の中にも
![スクリーンショット 2022-06-11 15.06.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/86a4d6b2-dc51-da9b-653d-50cd9a4a507f.png)
「git branch -M main」が確認できると思います。これは、デフォルトブランチをmasterブランチからmainブランチに変更するためのコマンドです。githubと友達になるためにこちらも実行しましょう！
1.　ターミナルを開きます（Macは「control+shift+@」、windowsは「control+@」）
2.　コマンドを入力してエンターを押します
```
git branch -M main
```
3.　画面左下に「main」と表示されればOK
![デフォルトブランチを変更後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/f86d3ce9-a74d-d33d-2971-3a3b66b179d4.png)
### git remote add origin [リモートURL]
ここまで準備してきましたが、まだ、リポジトリと連携していません。そのための手順がこちらです。
```
git remote add origin [リモートURL]
```
1.　作成したリポジトリのページにアクセスする
![git remote.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/e63dc394-a67a-90e8-ae19-6517dec558b7.png)
2.　赤丸をクリックして、リモートURLをコピーする
![git remote copy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/813417f3-2c9a-4c6e-b837-be29b86575ad.png)
3.　vscodeでターミナルを開く（Macは「control+shift+@」、windowsは「control+@」）
4.　上記コマンドにリモートURLをペーストする
```
git remote add origin https://github.com/washogo/test.git
```
5.　下記コマンドを打つ
```
git remote -v
```
6.　下記のように表示されていればOK
![git remote -v.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/676621c9-61c7-6c44-bc6d-19280bfffee4.png)
### git push (-u) origin [ブランチ名]
##### いよいよプッシュして、githubに変更内容を反映するときがきました！やっと草を生やせます！
1. 「ブランチの発行」をクリックします
![ブランチの発行.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/328f8219-e017-8a7b-af16-6a410cf15142.png)
2.　作成したリポジトリのページにアクセスするか、リロードする
3.　赤い囲いをクリックします
![コミット履歴へ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/601d3212-b613-71ce-dccb-15dbad670a3f.png)
4.　下記のようにコミットされた時間とコミットメッセージが確認できます
![コミット履歴.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/653c5db2-073b-895f-2d5f-459d34edd56a.png)
5.　赤い囲いをクリックします
![コミット履歴.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/9a5bbd51-0383-698f-8c26-a18f360f2b99.png)
6.　下記のように変更内容の差分を確認することもできます
![github 変更内容差分.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/480c0fc3-6a09-ddf9-aecd-0642373226b4.png)
7.　次のpushからは下記のように「変更の同期」と表示されると思いますので、それをクリックします
(divタグで「githubと友達になろう！」と入れてみました！)
![初回push後の挙動.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1923339/9e1d7c85-6b37-7825-bb21-8d58172bbe92.png)
## まとめ
いかがだったでしょうか？
今回はvscodeのgui操作を使用してpushまでの流れを解説していきました。git操作に関しては、「慣れる」ことが大切です。たくさん会って、遊んで、話して、そうして、いつの間にか仲良くなっていくものですよね？それと同じです！ぜひ、積極的に草を生やしましょう！
次回は、ブランチ作成からマージまでを解説したいと思います！ありがとうございました。

## 参照
- https://miya-system-works.com/blog/detail/vscode-github/
- https://qiita.com/mi-1109/items/006a534b26190424c499