Cloud9で作成したソースコードをGitHubに保存する手順

<img width="877" alt="cloud9-git-01.png" src="https://qiita-image-store.s3.amazonaws.com/0/141934/6a118555-376b-e1dc-f28f-1669536a2552.png">

# はじめに

Cloud9を利用しているGit初心者向けに、Cloud9で作成したソースコードをGitHubに保存する手順を解説します。

# 前提条件

- Cloud9のアカウント、ワークスペースは作成済み
- GitHubアカウントは作成済み

# もくじ

　1. Cloud9で作成したソースコードをGitHubに保存

　　1-1. 【Cloud9】ローカルリポジトリを作成
　　1-2. 【Cloud9】ソースコードをコミット
　　1-3. 【GitHub】リポジトリを作成
　　1-4. 【Cloud9】リモートリポジトリを登録
　　1-5. 【Cloud9】ソースコードをプッシュ

　2. Cloud9で修正したソースコードをGitHubに反映

　　2-1. 【Cloud9】ソースコードの修正
　　2-2. 【Cloud9】ソースコードをコミット
　　2-3. 【Cloud9】ソースコードをプッシュ

　3. GitHubで修正したソースコードをCloud9に反映

　　3-1. 【GitHub】ソースコードの修正
　　3-2. 【GitHub】ソースコードをコミット
　　3-3. 【Cloud9】ソースコードをマージ

# 準備

操作は画面下部のターミナルで実施します。

![cloud9-git-02.png](https://qiita-image-store.s3.amazonaws.com/0/141934/41b60039-a828-58f8-aa39-f4c233d92f1d.png)

操作できるターミナルがない場合は`＋ > New Terminal`で新しいターミナルタブを用意できます。

![cloud9-git-03.png](https://qiita-image-store.s3.amazonaws.com/0/141934/40100d22-2483-2e70-1333-c5b6f27f4d8c.png)

# 1. Cloud9で作成したソースコードをGitHubに保存

## 1-1. 【Cloud9】ローカルリポジトリを作成

gitでのバージョン管理をはじめるために`git init`コマンドでローカルリポジトリ(保管場所)の作成＆初期化を実施します。

```shell-session
$ git init

Initialized empty Git repository in /home/ubuntu/workspace/.git/
```

ローカルリポジトを作成するとプロンプトに`master`と表示されます。
これは現在の作業ブランチを表しています。

![cloud9-git-04.png](https://qiita-image-store.s3.amazonaws.com/0/141934/799ca906-1a62-98c4-8e57-2a929fea2dfe.png)

## 1-2. 【Cloud9】ソースコードをコミット

`git status`でコマンドでリポジトリの状態を確認できます。

以下の例では

- 現在のブランチは`master`です
- まだコミットされてません
- 追跡対象になってないファイル(`README.md`,`hello-world.html`)があります
- `git add`コマンドでファイルをコミット対象に含めることができます

と表示されてます。

```shell-session
$ git status

On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        README.md
        hello-world.html

nothing added to commit but untracked files present (use "git add" to track)
```

ソースコードをコミット対象にするために`git add <filename>`コマンドを実行します。

```shell-session
$ git add README.md
$ git add hello-world.html
```

> **補足**
> - `filename`にワイルドカードを指定して、`git add *`とすることも可能です

ステータス確認を行うと、`git add`コマンドで指定したファイルがコミット対象になったことがわかります。

```shell-session
$ git status

On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   README.md
        new file:   hello-world.html
```

`git commit -m <message>`コマンドでコミットを実行します。

`[message]`部分にはどのような変更を行ったかを記述しますが、最初のコミットでは**first commit**、**initial commit**、**初回コミット**などとしても問題ありません。

```shell-session
$ git commit -m "first commit"

[master (root-commit) 8c9db4c] first commit
 2 files changed, 88 insertions(+)
 create mode 100644 README.md
 create mode 100644 hello-world.html
```

ステータス確認を行うと、（コミットが実行された後に）変更されたファイルがない状態であることがわかります。

```shell-session
$ git status

On branch master
nothing to commit, working tree clean
```

## 1-3. 【GitHub】リポジトリを作成

Cloud9でバージョン管理の準備が整ったので、今度はGitHubでソースコードを保存する準備を行います。

GitHubでソースコードの保管場所(リポジトリ)を用意するために`＋ > New repository`を選択します。

![cloud9-git-05.png](https://qiita-image-store.s3.amazonaws.com/0/141934/6b5ba5cc-e6c3-1f86-261e-2cf1d58512d2.png)

Create a new repositoryページで`Repository name(リポジトリ名)`を入力して`Create repository(リポジトリを作成)`ボタンをクリックするとGitHub上にソースコードの保管場所(リポジトリ)が作成されます。

![cloud9-git-06.png](https://qiita-image-store.s3.amazonaws.com/0/141934/2fa48c27-43d3-264f-d1f4-99d084f1f1c3.png)

> **補足：**
> Githubの無償アカウントで作成できるのは**Publicリポジトリ**のみです。
> **Publicリポジトリ**の内容は誰でも閲覧することができるため、秘密の情報（パスワードなど）をソースコードに直接記述しないように注意が必要です

リポジトリ作成直後はページ上にソースコードの保存に利用するURLが表示されてます。
このURLを利用してCloud9からGitHubにソースコードを送ります。

![cloud9-git-07.png](https://qiita-image-store.s3.amazonaws.com/0/141934/cbbd9f99-648d-04e9-9d64-667180fd5c9a.png)

## 1-4. 【Cloud9】リモートリポジトリを登録

Cloud9からGitHubにソースコードを送るために、Cloud9のターミナル上で`git remote add <name> <url>`コマンドを実行します。

> **補足：**
> `name`はローカルリポジトリ上でのリモートリポジトリの名称(呼び名)になります。
> 慣例的に`origin`と名付けることが多いです。
> 
> `url`にはGitHubで作成したリポジトリのURLを指定します。

以下のコマンドを実行すると「Cloud9上のローカルリポジトリでは リモートリポジトリ(https://github.com/xxx/xxx.git) をoriginという名前で登録するよ」という意味になります。

```shell-session
$ git remote add origin https://github.com/xxx/xxx.git
```

登録したリモートリポジトリの情報は`git remote`や`git remote -v`コマンドで確認できます。

```shell-session
$ git remote
origin
```

```shell-session
$ git remote -v

origin  https://github.com/xxx/xxx.git (fetch)
origin  https://github.com/xxx/xxx.git (push)
```

## 1-5. 【Cloud9】ソースコードをプッシュ

`git push <repository> <branch>`コマンドを実行して、Cloud9上のソースコードをGitHubに送信します。

> 補足：
> `repository`にはリモートリポジトリの名称(本投稿内では`origin`)を指定します。
>  `branch`にはローカルのブランチ名(本投稿内では`master`)を指定します。

コマンドを実行するとGitHubの`UserName`,`Password`を聞かれるので入力します。

```shell-session
$ git push origin master
Username for 'https://github.com': xxx
Password for 'https://xxx@github.com': xxx

Counting objects: 4, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 1.34 KiB | 1.34 MiB/s, done.
Total 4 (delta 0), reused 0 (delta 0)
To https://github.com/xxx/xxx.git
 * [new branch]      master -> master
 ```

GitHubでリポジトリページを確認すると、Cloud9上で作成したソースコードが閲覧できるようになってます。

![cloud9-git-08.png](https://qiita-image-store.s3.amazonaws.com/0/141934/f2dffef9-d08c-7bc8-dbf5-aecafe386dcc.png)

# 2. Cloud9で修正したソースコードをGitHubに反映

## 2-1. 【Cloud9】ソースコードの修正

Cloud9上でソースコードを修正します。

![cloud9-git-10.png](https://qiita-image-store.s3.amazonaws.com/0/141934/2abb679a-eb6c-5865-389c-f46daf47452a.png)


前回コミット時との差分は`git diff`コマンドで確認することができます。

```shell-session
$ git diff

diff --git a/hello-world.html b/hello-world.html
index 3ace1d0..272d7bf 100644
--- a/hello-world.html
+++ b/hello-world.html
@@ -54,7 +54,7 @@ var myText = document.getElementById("helloText");
 myButton.addEventListener('click', doSomething, false)
 
 function doSomething() {
-       myText.textContent = "hello, world!!";
+       myText.textContent = "hello, GitHub!!";
 }
 </script>
 ```

## 2-2. 【Cloud9】ソースコードをコミット

新しいファイルを追加した場合は、`git add <filename>`コマンドを実行します。

```shell-session
$ git add <filename>
```

新しいファイルを追加してない場合は`git commit`に`-a`オプションをつけることで、変更されたファイルを対象にしてコミットを実行することが出来ます。

```shell-session
$ git commit -am "表示テキストを修正"

[master 9e5fb52] 表示テキストを修正
 1 file changed, 1 insertion(+), 1 deletion(-)
```

## 2-3. 【Cloud9】ソースコードをプッシュ

ソースコードのプッシュは初回と同様です。

```
$ git push origin master
Username for 'https://github.com': xxx
Password for 'https://xxx@github.com': xxx

Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 369 bytes | 369.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/xxx/xxx.git
   8c9db4c..9e5fb52  master -> master
```

GitHubのリポジトリページを見ると修正内容が反映されています。

![cloud9-git-11.png](https://qiita-image-store.s3.amazonaws.com/0/141934/df368fb4-329a-16af-87ff-508f88e7236a.png)


branchページでは過去の変更を閲覧することができます。

![cloud9-git-12.png](https://qiita-image-store.s3.amazonaws.com/0/141934/b15124c5-4003-a937-66fb-c95956c44dec.png)


# 3. GitHubで修正したソースコードをCloud9に反映

## 3-1. 【GitHub】ソースコードの修正

簡易な修正であれば、GitHub上でソースコードを修正することも可能です。
README.mdの修正だけであればGitHub上で修正を済ませてしまうケースが多いです。

GitHub上で対象のファイルを開いて`Edit this file(鉛筆マーク)`ボタンをクリックすると編集モードになります。

![cloud9-git-20.png](https://qiita-image-store.s3.amazonaws.com/0/141934/53f93a29-b1e2-79b2-4b1d-fe89572411ed.png)

## 3-2. 【GitHub】ソースコードをコミット

ファイルの修正が完了したら、画面下部のフォームで`Commit Changes`ボタンをクリックすることで修正内容が保存されます。

![cloud9-git-21.png](https://qiita-image-store.s3.amazonaws.com/0/141934/b86ad03e-d56b-2292-3345-758f48902dbb.png)

![cloud9-git-22.png](https://qiita-image-store.s3.amazonaws.com/0/141934/fe9bc846-3e2f-9c05-ba6e-d4d04e872c2b.png)

## 3-3. 【Cloud9】ソースコードをマージ

Cloud9(ローカルリポジトリ)にGitHub(リモートリポジトリ)の修正内容を反映するためには`git pull <name> <branch>`コマンドを実行します。

> 補足：
> `repository`にはリモートリポジトリの名称(本投稿内では`origin`)を指定します。
>  `branch`にはローカルのブランチ名(本投稿内では`master`)を指定します。

```shell-session
$ git pull origin master

remote: Counting objects: 3, done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.
From https://github.com/xxx/xxx
 * branch            master     -> FETCH_HEAD
   9e5fb52..f8b32ff  master     -> origin/master
Updating 9e5fb52..f8b32ff
Fast-forward
 hello-world.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 ```

Cloud9上の操作を行わずにソースコードの変更が行われたため、変更を反映してよいかを確認するダイアログが表示されます。今回はGitHubからpullしたソースコードが最新のため`Use Remote`ボタンをクリックします。

![cloud9-git-23.png](https://qiita-image-store.s3.amazonaws.com/0/141934/2a2ce181-5c43-51c5-ade2-1fb55d8d3aae.png)

Cloud9上でソースコードを確認するとGitHub上の変更が反映されてることがわかります。

![cloud9-git-24.png](https://qiita-image-store.s3.amazonaws.com/0/141934/f98f563a-93e2-0cc8-10ae-281936a6fd5a.png)