【GitHub】基本の使い方！初心者がPushするまで🚀


# はじめに
はじめまして！フリーランスマーケターをしながら独学でプログラミングを学んでいるTakuroと申します。

1人でプログラミングを勉強していると、知らないことばかりで
なかなかスムーズに進まないことがありますよね…

私も分からないことが多すぎて、
__もはや何から調べればいいのかすら分からない__レベルでした。

そこでこの記事では、プログラミング初心者の人に向けて
私が躓いた部分を、なるべくシンプルにまとめていこうと思います。

今回は、プログラミング学習において必須となる

__GitHubの使い方（ゼロからPushするまで）__🚀

についてお伝えしますので、ぜひご参考にしてください！

## 【目次】
[・そもそもGitHubとは？](#そもそもgithubとは)
[・GitHubに登録する](#githubに登録する)
　　[1. GitHubの公式ページを開く](#1-githubの公式ページを開く)
　　[2. GitHubにアカウント登録する](#2-githubにアカウント登録する)
[・「Add」「Commit」「Push」の3つを覚える](#addcommitpushの3つを覚える)
　　[1. ディレクトリをAddする](#1-ディレクトリをaddする)
　　[2. ディレクトリをCommitする](#2-ディレクトリをcommitする)
　　[3. ディレクトリをPushする](#3-ディレクトリをpushする)
[・GitHub上にPushする](#github上にpushする)
　　[1. リポジトリを作成する](#1-リポジトリを作成する)
　　[2. ディレクトリをAddする](#2-ディレクトリをaddする)
　　[3. ディレクトリをCommitする](#3-ディレクトリをcommitする)
　　[4. ディレクトリをPushする](#4-ディレクトリをpushする)
[・【番外編】GitHubで草を生やすとは](#番外編githubで草を生やすとは)
[・さいごに](#さいごに)

# そもそもGitHubとは
GitHubとは、ソフトウェア開発プロジェクトのために使用される
__ソースコード管理サービス__です。

といっても、どういう意味かわかりませんよね。
私も初めて聞いた時、さっぱり理解できませんでした。

もっと噛み砕いて話すと、

__自分が書いたソースコード（プログラミングで書いたもの）を、保存しておけるサービス__

ということです。

しかも保存先はパソコンの中ではなく、ネットワーク上に保存されます。
そのため、離れた開発者や異なるPC上でもソースコードが見れるのです。

これにより、複数人で開発を行う際にも、ソースコードを共有しながら作業を進められます。
また、どの人がどのコードを書いたのか記録されるため、役割分担しながら作業する時にも役立ちます。

つまりGitHubは、__共同開発において必須のアイテムなのです…！__

※ もっと詳しく知りたい方は[こちら](https://techacademy.jp/magazine/6235)から
*（参照元：modis GitHubとは？使い方や知っておきたい知識を解説！）*

# GitHubに登録する
それではいよいよ、GitHubに登録してみましょう！
以下の手順に沿って進めればすぐに終わりますので、ぜひ一緒に手を動かしながら進めてくださいね。

### 1. GitHubの公式ページを開く
まずはGitHubに登録してみましょう。
[こちら](https://github.com/)から、公式ページに移動することができます。

### 2. GitHubにアカウント登録する
次に、GitHubにアカウント登録をしてみましょう。

<img width="700" alt="グループ 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2478073/e718ec23-b3ca-43d6-4b44-6351ce66a2c8.png">

画像の赤枠にメールアドレスを打ち込んだら、右の緑色のボタン（<font color="Green">Sign up for GitHub</font>）
をクリックします。

<img width="300" alt="グループ 5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2478073/03adb8d3-4290-962a-f946-51619e6b303e.png">

すると、画像のようなアカウント作成画面に移動するので、上から順に、

1. ユーザーネーム
2. メールアドレス
3. パスワード

を打ち込んでください！
<font color="Red">※ ここに打ち込んだ情報は、忘れないようどこかにメモしておきましょう！</font>

最後に、画像認証クイズが設定されていますので、これに回答しましょう。
今回の場合は「渦巻銀河を選んでください」と書かれているので、言われた通り選択します。

決められた回数クイズに正解すると「<font color="Blue">Create account</font> 」ボタンが押せるようになるので
次に進みましょう。

<img width="500" alt="グループ 6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2478073/1155ced4-023c-1074-5952-3e40f3c5b221.png">


すると、こちらの画面が出てきます。
この表示がされたら、__アカウント登録完了まであと少しです。__

登録したメールアドレスに認証用のメールが届きますので、
そちらの内容に従って認証を完了してください。

これで、__GitHubアカウント登録が完了しました！__

# 「Add」「Commit」「Push」の3つを覚える
それではここから、少しだけ知っておくべき知識をお伝えします。
ただし、__本当に知らなきゃいけないことだけに絞っている__ので、ご安心ください。

GitHubを始める際に、__3つの言葉だけ覚えてください。__

__「Add」「Commit」「Push」__

この3つだけで大丈夫です。応用的なことは後に回しましょう。
これら3つの作業を行うだけで、インターネット上に自分のディレクトリ（プロジェクトファイル）が保存されます。

それでは、順を追って説明していきましょう。

### 1. ディレクトリをAddする

まずはディレクトリをAddします。
この時点では、まだPC上に保存されているだけです。

イメージ的にいうと、
<font color="Red">__「ディレクトリを椅子に座らせる」__</font>
というような感じです。

まずは、保存するディレクトリがどれなのか「Add」して選択しましょう。

### 2. ディレクトリをCommitする

ディレクトリをCommitするというのは
<font color="Red">__「椅子に座らせたディレクトリを、発射台へ移動させる」__</font>
ようなイメージです。

そのため、ここでもまだディレクトリはPC上に保存されている状態です。

### 3. ディレクトリをPushする

ここまでくればなんとなくわかると思いますが、Pushするというのは
<font color="Red">__「発射台に座らせたディレクトリを、インターネット上に向けて発射させる」__</font>
ようなイメージです。

つまり、ここで初めてディレクトリがインターネット上に保存されます。
最終的には、__Pushすることでディレクトリが保存される__ということなんですね。

# GitHub上にPushする

それではいよいよPushしていきたいと思います。
GitHub上にディレクトリを保存しましょう！

### 1. リポジトリを作成する
まず初めに、インターネット上にディレクトリを保存する「場所」を作成しましょう。
保存する場所を「リポジトリ」といいます。

<img width="500" alt="グループ 3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2478073/b4e1d519-8e12-8254-33eb-9ab7025c5c86.png">

画像の赤枠に、好きなリポジトリ名（保存する場所の名前）を記入しましょう。
それ以外の箇所は、いじらなくてOKです！

記入ができたら、画面下にある「<font color="Green">Create repository</font>」をクリックします。
これでリポジトリが作成されました！

### 2. ディレクトリをAddする

次に、早速Addしたいと思います。
自分の作成したプロジェクトファイルを使用してもいいのですが、
ここではわかりやすく「awesome」というディレクトリを新たに作成することにします。

:::note info
ディレクトリというのは自分のプロジェクトファイルのことを指します。
すでに作成されているディレクトリがあれば、そちらを使用していただいても構いません。
:::

Macユーザーの方は「ターミナル」を開きましょう。
開いたらその場で、

```
$ mkdir awesome
```
と打ち込み、Enterを押します。
これにより、__「awesome」という名前のディレクトリ__が、PC上に作成されました。

:::note alert
こちら最初に「$」が記載されていますが、これは打ち込まないよう注意してください。
「$」というのは「ここから書き始めてください！」という合図に過ぎないので、
ここでいうと「mkdir~」から書き始めるようにしましょう。
:::

それでは次に、ターミナル上で先ほど作った「awesome」というディレクトリに移動します。

```
$ cd awesome
```

と打ち込み、Enterを押します。
これで、__先ほど作った「awesome」というディレクトリに移動できました！__

ではここから、

```
$ git init
```

と打ち込んで、Enterを押します。
これにより、__ディレクトリを座らせる椅子が作成できました。__

この3つを打ち込んだら、いよいよAddしていきます…！
「awesome」ディレクトリに移動した状態で、以下のコマンドを入力してください。

```
$ git add .
```

__これで、Addが完了しました。__ <font color="Gray">（めちゃ簡単…！）</font>
それでは次に、AddしたものをCommitしていきましょう！

### 3. ディレクトリをCommitする

Commitとは__「椅子に座らせたディレクトリを、発射台へ移動させる」__ことでしたね。
こちらもすぐにできるので、このまま進めていきましょう！

Addが完了したら、そのまま以下のコマンドを入力してください。

```
$ git commit -m 'ここにコメントを挿入します'
```

' <font color="Red">ここにコメントを挿入します</font> 'という箇所には、
__文字通りコメントを残しておくことができます。__

これを使えば、__「〇〇の機能を追加しました」__や__「〇〇を修正しました」__など、
ほかの開発者にコメントを残すことができるのです。

今回は自由にコメントを記入していいですが、実際の開発になったら
__そのディレクトリでどのような変更を加えたか記載するようにしましょう。__

これで、Commitも完了です。

### 4. ディレクトリをPushする

__それでは、いよいよラストの作業です。__
CommitしたディレクトリをPushしていきましょう！

```
git remote add origin ここに自分の作成したリポジトリのURL
```
こちらのコマンドを打ち込んで、Enterを押します！
すると…

<img width="800" alt="グループ 1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2478073/e16600e0-85fe-3666-8d1b-1cc86b79ce58.png">

ご自身のGitHub上のリポジトリの場所を見ると、このような表示がされます。
__これでPushが完了し、インターネット上にディレクトリが保存されました！！__


# 【番外編】GitHubで草を生やすとは
ここからは番外編として、GitHubで草を生やすとはどういうことなのか、説明していきたいと思います。
これは一言で言うと__ソースコードをインターネット上で保存することで残る活動記録__のようなものです。

<img width="500" alt="グループ 4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2478073/1dbe8bf6-43c3-0c50-f339-68a958679ac1.png">

これを見ればわかるように、GitHubでディレクトリをPushした時、その記録として緑色の四角が作成されます。
つまり__「GitHub上にディレクトリを保存しました！」__という活動の記録になるのです。

裏を返してみると「私は今日、プログラミングをしました！」という活動記録になりますよね。
これにより、__毎日プログラミングに触れていたという証拠__になるのです。

### 未経験者がGitHubで草を生やすべき理由
つまり、未経験者がGitHubで草を生やすことにより、主に2つのメリットが挙げられます。

- __実際の開発でも使われているGitHubを、日常的に使っていることの証明になる__
- __プログラミングに毎日触れているという証拠になり、学習意欲をアピールできる__

まさに一石二鳥。しかも一日たった5分の作業で終わるので、__超コスパいいです。__
ぜひプログラミング学習をし始めた方には、Pushするまでを習慣化してほしいと思います。

# さいごに

ここまで読んでくださり、本当にありがとうございました。

今回紹介した「GitHubでPushするまで」は、これからプログラミング学習を進める人にとって
1番初めの重要な内容になります。

というのも、実際の開発現場では当たり前にGitHubが使われていて、
学習の段階からこのGitHubに触れていることにより、大きなアドバンテージが得られるからです。

これから学習する内容をこまめにPushしておくことで、

__「現場を意識しながらプログラミングを学習できている」__

ということにつながります。

ぜひここで学んだことを活かしながら、__脱「GitHub初心者」__を目指していきましょう！
ありがとうございました。