Githubプロジェクト作成→ローカルへclone→リモートへpush

## プロジェクト作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/742ae0b5-9e70-abd4-10e4-8ad5acdb7987.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/8af20beb-27a9-81dd-7d1e-3ff6275d24f5.png)

Create repogitoryボタンを押下してプロジェクト作成

## ローカルリポジトリ作成

↓のどちらかの画面でURLをコピーする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/630b8684-c4ba-693f-9b3e-72c9a1b96ea7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/6e15573a-1fb9-b157-2545-0a784b85327c.png)

## git clone

デスクトップで作る場合
ターミナルでディレクトリをデスクトップへ移動しましょう。

```
Windows
$ cd ~/Desktop
Mac
$ cd $HOME/Desktop
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/23c47bbd-d896-dde7-3451-ac46f18bfcf5.png)
↑ターミナルのディレクトリがデスクトップになっているか確認してから次のコマンドを叩きましょう。
※ターミナルの画面は人によって違います。
今回はデスクトップなので最後がDesktopなどになっていればOKです。

次に先ほどコピーしたgitのURLを使ってクローンします。

```
$ git clone URL
```

これでデスクトップにgithubで作ったプロジェクト名のフォルダが作られます。

## ファイルを編集

続いて、VSCodeでそのフォルダを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/b77e6464-3042-3d5a-ce59-0af5c83ec722.png)
ファイルを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/b2c25b3e-40c2-60c9-ecad-679caea15920.png)
仮に「test.py」というファイルを作ります。
するとgitアイコンの部分に①と表示されると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/037bc10c-402e-81a2-ea01-503ce5956cc1.png)
これはリモートリポジトリとローカルリポジトリの差分を表しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/0a3d63bb-d3f8-14a8-d8b5-b5b953cd8659.png)
test.pyで↓を入力しましょう。

```python
print("test1")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/a508dc01-a854-1a25-b34b-b928d0aa4431.png)
入力したら`CTRL+s`又は`command+s`で保存しましょう。
次にgitアイコンをクリックしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/8187514e-9725-8eff-97d8-04454e055070.png)
すると変更した項目（ファイル）だけ表示されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/1b3e95b4-c59c-a1a2-4f39-5341a4b170a3.png)

## git add

＋ボタンを押すか
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/ccad6d6e-ddc1-b118-08b5-cfbc41146fee.png)
VSCodeのターミナルで下記を入力

```sh
$ git add test.py

# 変更したファイル全てをインデックスに追加する場合は
$ git add .
```

＋ボタンはこのコマンドを自動でしてくれていることになります。
できるだけコマンドで入力するようにしておいた方が知識が深まります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/186b0805-d8f0-6534-6d0a-a3a085254811.png)
すると**インデックスに追加された状態**になります。
VScodeでは「ステージされている変更」と表現されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/f1871e4a-3909-161a-2a49-42f56f7f6772.png)

## git commit
次にインデックスに追加したファイルをコミットします。

```sh
git commit
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/b8bbfaa1-d95f-663d-33d8-bf3eeb558574.png)
そうするとvimでコミットメッセージを入力する画面が出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/2e4c7554-86c6-84f4-3725-23727730611d.png)
こちらは普通の入力方法とは違います。
半角でiボタンを押すと入力モードになり入力できるようになります。
今回は「create test.py」と入力します。
別に日本語とかでもいいです。
変更内容を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/aa6e7777-21f4-5438-21d6-ce6403b73c6a.png)
入力が完了したらESCボタンを押して入力モードを終わります。
`:wq`と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/52f16768-cf02-0d8b-61fe-79921eac9562.png)
コロンを押した時点で最終行に入力されます。
`:wq`は上書き保存を意味しています。
入力したらEnterでvim画面が終わり、commitされた状態になります。
ちなみに保存せずにやめたい場合は`:q`です。

## git push

commitだけではまだリモートに上がっていません。
最後にpushすることを忘れないように！

```sh
$ git push origin HEAD
```

**初めてpushする時、ポップアップが出たりすると思います。文言は忘れましたが全てYES側のボタンを押して進んでください。**
内容としてはgithubの権限がないので許可するかしないかということです。
許可してあげてpushできるようにしましょう。

これでGithubのサイトを更新すると先ほどpushしたファイルが追加されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/cc19404f-bd96-105b-e32b-3d532170f92a.png)

## 編集データの差分確認

再びtest.pyを編集します。
↓を追記してください。

```python
print("test2")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/192052c8-5ec4-2969-b5e9-e4863384e62c.png)
そして再びgitアイコンを押し、先ほど編集したファイルを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/a38cf8b8-7ac0-9006-3496-d40ec4501ac1.png)
そうするとリモートリポジトリとの差分が表示されているのが確認できます。

`git add`して`git commit`して`git push`するという繰り返しになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399745/fcf0f5b0-068d-8290-94e5-2c2834be4601.png)



## 終わり

チームで開発をしたりもっとgitの知識を深めたい方は下記より
[gitの知識を深めたい方はこちら](https://qiita.com/disk131/items/afd74824410e2e0a741c)