Github  リポジトリにPUSHする方法 [STS]

## はじめに
今回は、STSで、Githubにリポジトリを作成しそこにPUSHするまでの方法を記載します。
PUSHするプログラムファイルは、こちらの記事で作成したものになります。
ご覧ください。

https://qiita.com/ren_g/items/a57e02d7f187e8d67db2 

## 前提条件
|Windows10 64bit|
|---|

## Githubについて
[Github](https://github.co.jp/)（クリックするとリンクへ飛びます）とは、下の画像にも記載されている通り、「開発者のためのプラットフォーム」です。
ざっくりいうと、プログラムコードの管理、公開、保存などが可能なWebサービスです。
<img width="500"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/01474066-01af-1a8f-e519-6c15653f06e5.png">
本記事で使用するGithubの機能について説明していきます。
* リポジトリ
ファイル（プログラムコードなど）の状態を保存する場所のことをいいます。
ローカルリポジトリとリモートリポジトリの２種類があり、ローカルは、PC内。リモートはネットワーク上という違いがあります。
ローカルリポジトリで作業をして、その作業内容をリモートリポジトリに反映させるという流れになります。
* コミット
ファイル情報の変更をリポジトリに保存させるための操作。
* プッシュ
ローカルリポジトリに反映された作業内容（コミットされた内容）をリモートリポジトリに反映させる操作。
* プル
プルとは、margeしてリモートに反映した後に、その反映内容をローカルにも反映させることを言います。
* ブランチ
一つのリポジトリ内で、平行して別の作業を行うことができる機能。枝（branch）のように業務を分岐させることが出来るので、この機能は作業効率の上昇に繋がります。
Masterブランチ(メインのプログラムデータ)を修正するときに、Masterを直接修正してしまうと、プログラム内容が知らないうちに追加されていたり、削除されていたりして、複数人で作業を行うことが難しくなってしまいます。
そこで、ブランチとしてメインと切り離して修正を行うことによってメインのデータを直接変更せずに作業できます。
* プルリクエスト
ブランチを作成して、修正作業が終わったら、修正を同業者やプロジェクトチームのメンバーに見てもらい、承認を得たり、レビューをもらったりして修正の参考にすることが必要になってきます。
この承認を得たり、レビューをしてもらう機能をプルリクエストと言います。
* マージ
プルリクエストをして承認を得ても、メインであるMasterに修正内容を反映しないといけないです。なぜなら、あくまでブランチは、メインから切り離しているからです。
この切り離したブランチの修正内容をMasterに反映させることをマージと言います。
マージを誤って行ってしまうと、Masterが変更されてしまうので、注意が必要です。

Repository、Master、Branch、Mergeのそれぞれのイメージは、以下の画像の通りです。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/0945e392-5576-9d7d-6d88-a94efc062c44.png">


## Github登録

[Github](https://github.co.jp/)（クリックするとリンクへ飛びます）の登録方法から説明していきます。
まず、リンクへ飛びます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/2ef739ac-c77a-498c-b82f-2fb18642fd7e.png">
「Githubに登録する」を押してください。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/939e6b82-8d71-0de2-bf2d-8e020177f718.png">
名前、メールアドレス、パスワードをそれぞれ入力します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/c22c3b9c-a31f-5fbf-a504-300203ea0846.png">
「検証する」を押してください。
ここまで進んだら、承認コードを打ち込む画面になります。
登録したメールアドレスにコードが送られてくるので、そのコードを入力しましょう。
これで登録は終了です。

## リモートリポジトリの作成

リポジトリの作成方法について説明します。まず、[Github](https://github.co.jp/)（クリックするとリンクへ飛びます）でサインインしてください。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/7de944ea-b18d-57aa-3887-6e22706c0fbb.png">
画面右上に赤枠の矢印から、「New repository」を押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/43bb1b57-10ce-e46c-8e79-0d1687641176.png">
上の画面になるので、「Owner」は入力されています。それ以外を設定してください。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/38049853-403f-a1c1-e08e-c96958ca0b1f.png">
「Create repository」を押してください。
これで、リモートリポジトリを作成することができました。
## ローカルリポジトリの作成
前回の記事(上に載せてます。)で作成したものと同じプログラム内容のDemo1を使用します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/c451cd9e-5509-260d-f2a8-abb9dfa629bc.png">
画像のように、プロジェクトの上で、右クリック＞チーム＞プロジェクトの共用を押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/d0f18de9-f03a-6815-7730-218621ae0a2e.png">
赤枠にチェックを入れます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/8c68fe99-ed26-822c-b88c-2841d3796968.png">
チェックを入れるとこの画面になるので、プロジェクトを選択します。
「リポジトリーの作成」を押します。
最後に「完了」を押します。
ローカルリポジトリの作成は終了です。

## ブランチ
まず、プロジェクト「demo」で右クリックします。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/6d75a060-9e01-b55a-33eb-bb9fd5c126e3.png">
この画面になるので、赤枠の手順で進めていきます。
チーム＞切り替え＞新規ブランチを押します。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/6a5dbcdc-fb07-8dfd-d3ab-60a4ff9ef72f.png">

「ソース」は、どのブランチから、新規ブランチを作成するかという意味です。
ブランチ名は、自由に決めてください。（「Demo_hello_world」など）
最後に、「完了」を押しましょう。これで、ブランチの作成は終了です。
## コミット
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/e3024826-06b6-350a-514c-5cf3c3a723d8.png">

画像のように、プロジェクトの上で、右クリック＞チーム＞コミットを押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/3f3d70ed-a4aa-6306-0e11-0de156246339.png">
コミットを押すと、Gitステージングが表示されるので、赤枠のボタンを押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/f30ec424-c689-d71b-08ec-3bd83389973f.png">
先ほどボタンをしたことでファイルが移動していることを確認します。
コメントを書いて、コミットを押します。コミット完了です。
## プッシュ
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/a0921f06-01a6-d603-3bf1-23b995c1562a.png">

画像のように、プロジェクトの上で、右クリック＞チーム＞リモート＞プッシュを押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/75c67631-b8dd-b442-2897-5a5e17bb5fd9.png">
この画面が表示されます。
URlと記載しているところに先ぼど作成したリモートリポジトリのURlを貼りつけます。
[Github](https://github.co.jp/)に飛び、リモートリポジトリのページを開き、[https://github.com/Githubのユーザー名/リモートリポジトリの名前]をコピーします。
コピーしたものを上記の「URl」と記載されているところに貼りつけます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/437f4db4-509c-44f6-cb3e-d1f6ad32bf29.png">
貼りつけると、自動的にそれぞれ書き込まれます。
ここで、「パスワード」という欄がありますが、これはGithubのパスワードを入力するわけではありません。
わかりにくいですが、「トークン」というものをGithubで作成しなければいけません。

トークンの作成方法について説明します。
[Github](https://github.co.jp/)に飛び、自分のアイコンを押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/ebc10e64-85b3-8b5e-dd03-a43ae4ae8f8c.png">
「Settings」を押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/86aa9ef1-5841-d172-c99f-374bde6a23d9.png">
押すと、設定画面に飛ぶので、下にスクロールします。
「Developer settings」を押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/d7b451cb-3154-d24b-3ba0-1d53efe0f4a0.png">
「Personal access tokens」から、「Tokens(classic)」を選択します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/0e9d0e10-e900-64f8-76fe-101f0fb73f36.png">
「Generate new token」を押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/1d8359a0-cdb3-39bd-a031-51db3658fbe5.png">
「Generate new token（classic）」を押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/2218112d-46fd-8003-2f65-9d4eac2237f5.png">
押すとこの画面になるので、Noteの部分になんのためのトークンなのか（例：demoだったらdemoと入力。）を入力します。
次に、このトークンが有効な期間を設定します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/c06cdeec-a15b-db9a-18fc-99ed84bf0428.png">
「repo」の欄にすべてチェックを入れます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/d5673563-5556-0a19-e401-a747368df018.png">
下にスクロールして、「Generate token」を押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/8bd31c5e-943a-402e-a147-f377569cdaec.png">
赤枠がトークン（パスワード）になります。
必ずコピーしてメモ帳等に貼ってください。これ以降の画面では表示されません。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/8b8cfafa-c516-1de6-bdef-fa7edfd1636b.png">
入手したアクセストークンを貼りつけ、「次へ」を押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/f2ba449d-e8cf-7c88-8826-3c896afd4722.png">
ソース参照から、master[ブランチ]を選択します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/8435604c-6666-d968-90aa-77d53502e8c0.png">
「All Branches」「All Tags」を押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/4d2f498e-998e-fa5e-fa1c-72c744947abc.png">
「完了」を押してください。
Pushできているのか確認していきましょう。
[Github](https://github.co.jp/)に飛び、作成したリポジトリがあるので、リポジトリを選択します。
そして下の画像のように、PUSHされていることを確認してください。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/8df7daef-ac04-9f25-5027-d21bddc97c02.png">

これで、Pushは完了しました。
最後に、完了画面が出てくるのですが、こちらは、「閉じる」を押してもらえれば大丈夫です。

## プル
まず、STSのプロジェクト(本記事はdemo)で右クリックします。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/66e0c64d-fa0e-a25a-c943-89c9844df7f2.png">
そして、チーム＞プルを押します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526192/dd19c6eb-da88-efc5-d816-5e475ed6516f.png">
リモート先、参照するブランチを確認して、「完了」を押します。
次の画面は閉じるを押してください。




説明は以上になります。

お疲れさまでした。

## 参考資料
最後に、参考資料を掲載します。

https://qiita.com/t-yama-3/items/a17f5174bedb95808423#6-%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%ABpush%E3%81%99%E3%82%8B