【超初心者向けに丁寧に順を追う】ファイルをGithubにあげる方法

# 初めに
今回は、ローカル環境（＝自分のパソコン）で作ったプルジェクトを、初めてGithubにアップロードする時の手順を紹介する。

プログラミングを勉強し始めて1カ月くらい方が理解できるよう（というより、もはやその時の自分を思い出しながら）懇切丁寧に説明する。

ので、ちょっと長いのとくどいかもしれないが、安心して読んでね！！

※ちなみに筆者はWindowsのパソコンを使っているので、Macのパソコンを使っている方は少し見え方や手順が違うかもしれない。

# 今の状況
・ **test-app** という名前のプロジェクトを制作した
・今回初めてGithubにファイルをあげたい

# 流れ
[1. エクスプローラーにて作ったファイルのディレクトリに移動する](#1-エクスプローラーにて作ったファイルのディレクトリに移動する)
[2.Git Bashを起動する](#2-GitBashを起動する)
[3.Githubのリモートリポジトリをつくる](#3-Githubのリモートリポジトリをつくる)
[4.ファイルをGithubにあげる](#4-ファイルをGithubにあげる)

# 1. エクスプローラーにて作ったファイルのディレクトリに移動する

「**エクスプローラー**」 とは、このようなアイコンの **フォルダがたくさん入っているアプリ** のことだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808608/1c23eca2-d665-b7a8-4a0d-038f29fe6ed0.png)

まずこのアプリを開き、自分が作ったファイルを開く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808608/dfb1a7f8-eca4-de16-dbe2-b50c1a92b223.png)

開くべき場所は、プロジェクトを包括するファイルだ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808608/c1e64090-4115-aef4-aa19-bd1779a532d9.png)

# 2. Git Bashを起動する

ファイルに移動できたら、その場所で ***Git Bash*** （＝コマンドを使ってGitの操作をするツール）を起動する。

筆者のPCでは、ディレクトリ内の余白で右クリックすると次のようなモーダルが表示される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808608/6b629161-9b07-d4ed-842b-ea6e77b016ee.png)


※Git Bashを使うには、あらかじめ **Gitをインストールしておく必要** がある。今回、Gitのインストールの手順は割愛する。

Open Git Bash here の表示をクリックすると、Git Bashがこのように起動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808608/fefa4326-7836-68d5-acca-0dde032c0be8.png)

ここでディレクトリ名が、自分のプロジェクトのものになっていることを確認する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808608/d7d3d8b2-d558-4434-89d2-6a76438805b7.png)

:::note info
Git Bash内でプロジェクトのディレクトリに移動する手段として、Git Bashを起動させた後に次のコマンドを実行するという方法もある。
```
cd C:\test-app
```
コマンドを実行するには、コマンドを打った後にEnterを押す。
:::

# 3. Githubのリモートリポジトリをつくる
Git Bashは開いたままで一旦置いておき、Githubの ***リモートリポジトリ*** （＝自分のプロジェクトをアップロードする場所）をつくる。

１．[Githubのダッシュボード][link-1]に移動する

[link-1]: https://github.com/dashboard

２．リポジトリ名、公開範囲（publicは全体公開、privateは自分だけに公開）を入力する

３．【Create a new repository】をクリックする

※便宜上、キャプチャではリポジトリ名を test-app2 としているが test-app に置き換えて見ていただきたい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808608/b2f940eb-d5e2-3a7b-790c-cfad7004b0ad.png)

すると画面が遷移するので、遷移した先の画面で枠で囲った部分が見えるまでスクロールする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808608/d5dbeb96-11a7-8938-3ec2-2e72fcfba78a.png)

枠内の情報は後ほど使うので、ここまで進めたら先ほど立ち上げたGit Bashに戻る。

# 4. ファイルをGithubにあげる

まず、Git Bashにて実行するコマンドを挙げる。

コマンドは、入力後にEnterを押すと実行できる。
実行は1コマンドずつ行う。


#### １．ローカルのGitリポジトリをつくるコマンド

```
$ git init
```
:::note into
このコマンドでは、指定したディレクトリ内に  ***.git***  という隠しディレクトリ（＝コミット履歴、設定ファイル、ブランチ情報などGitに関するすべての管理情報が保存される場所）をつくる。
ローカルリポジトリを初期化することで、Gitによって追跡されるようになる。
:::

#### ２．作業したファイルをステージングエリア（＝次のコミットで追跡するファイルや変更内容を一時的に保存する場所）に追加するコマンド
```
$ git add .
```
::: note into
今回はすべてのファイルを追加したいのでこのように実行したが、特定のファイル（例えば、C:/test-app/test/index.html）だけ追加する場合は、次のように指定する。

※すでにC:/test-appディレクトリにいるので、test/index.htmlだけ指定すればOK
``` 
$ git add test/index.html
```
:::

#### ３．ステージングエリアに追加したファイルの状態をローカルリポジトリに保存するコマンド

```
$ git commit -m "Initial commit"
``` 

'-m' オプションを使うと、commitの操作にメッセージを添付できる。
今回は、"Initial commit"というメッセージを追加した。

::: note into
addとcommitを同時に行う方法もあり、次のように記述する
```
$ git commit -a -m "バグの修正"
```
:::

#### ４．ローカルリポジトリとリモートリポジトリを接続し、ファイルをアップロードするコマンド

ここから、先ほどブラウザで表示したこの情報を使う。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808608/d5dbeb96-11a7-8938-3ec2-2e72fcfba78a.png)

コマンドは3行あるので、1行ずつ実行する。

::: note
コマンドはコピペして実行することもできる。
コピペする範囲を選択 ➡ コピー(Ctrl+C) ➡ Git Bashの入力欄で右クリック ➡ Enter の順で実行できる。
:::

```
$ git remote add origin https://github.com/OgataMegumi/test-app2.git
```
ローカルリポジトリとリモートリポジトリを接続する。

```
$ git branch -M main
```
現在のローカルブランチの名前をmainに変更する。
'-M' オプションは、強制的にブランチを変更する。

::: note
***ブランチ名を main に変える理由***
GitHubでは、新しいリポジトリ（＝先ほど Create a new repository をクリックして作ったリポジトリ）のデフォルトブランチ名が main になっている。
ローカルでもブランチ名を main にしておくことで、リモートリポジトリとの整合性が保てる。

また、ローカルのブランチ名が main になっていれば、GitHubへのpushでブランチ名の不一致が起こらず、エラーを回避できる。
:::

```
$ git push -u origin main
```
ローカルの変更（＝commit）をリモートリポジトリに反映させる。

'-u' オプションを使うと、この main ブランチをデフォルトのリモート追跡ブランチとして設定することができ、次回からは git push と入力するだけでOKになる。

#### ５．Githubに反映されているか確認
これで ***Githubへのファイルをアップロードは完了*** だ。
ブラウザに戻り、画面をリロードして、自分が作ったプロジェクトのファイルをが一覧で表示される画面に切り替われば成功だ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808608/e9f3aabf-b0f0-18c7-48b6-1578cd6156c2.png)

ちなみに、今回実行したgitコマンドの全体の流れはこのようになっている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808608/70f17bb8-c155-5dc3-2565-69fe82b79885.png)


# 5．まとめ
今回は、ローカルのプロジェクトを初めてGithubにあげる時の方法を紹介した。
うまくいっただろうか？

もしうまくいかなくても、めげずに一緒に頑張ろう。

また、内容に間違いがあれば、ぜひ指摘していただきたい。