Git GitHub の始め方（超入門）

# はじめに
### Gitとは？GitHubとは？
Gitとはファイルのバージョン管理ツールです。わかりやすく言うと、ゲームのセーブ機能みたいなもんだと思ってください！
そして、GitHubとはそのGitの情報をインターネット上にアップロードし、共有、編集がしやすいようにするサービスです。
どちらも今後コードを書いていく上で、とても便利ですのでぜひ活用してください。

GitHubはすべて英語ですがこの記事では、写真も豊富に付けているので問題なく進めていけると思います。

### 注意点
個人開発、初心者レベルの使い方を説明してます。
チーム開発や中級者以上で使うコマンド（branchやmargeなど）はこの記事では取り扱いませんのでご了承ください。
とにかく動かせることに重点を置いています。Gitの概念などの説明は省いております。
最下部の参考に細かい説明のリンクを張っていますので詳しく理解したい方はご覧ください。

# Gitのダウンロード
さっそく使っていきましょう！
MacとWindowsでGitのダウンロード方法が異なります！

### Macの場合

```
$ cd
$ brew update
$ brew install git
```

上記の手順が終わったら、以下のコマンドでインストールできているかどうかを確認します。

```
$ git --version
```

これで以下のような何かしらのバージョンが表示されたら大丈夫です！

```
git version 2.24.3 (Apple Git-128)
```

以上でgitのインストールは終わりです！

### Windowsの場合
こちらの記事を参考に進めてください！
https://eng-entrance.com/git-install

# GitHubの使い方
アカウントの作成
https://github.com/
![スクリーンショット 2020-12-07 015440.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/91381d37-bf52-b8bb-512c-c03506165438.png)


いくつか質問されますが、適当で構いません！
![スクリーンショット 2020-12-07 015928.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/5398f135-066d-2670-0193-afff94cd6924.png)

この画面まで来たら
![スクリーンショット 2020-12-07 020029.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/954bebe6-3a93-a13d-fae8-a01fbecf5860.png)

メールが来てるはずなので認証しましょう。
![スクリーンショット 2020-12-07 020208.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/38a4a33a-4c66-1be0-9be8-1ac4001fe1b5.png)

#リポジトリの作成
create a repositoryをクリック！
![スクリーンショット 2020-12-07 020328.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/6bd626c1-9ff1-d5b4-83be-0513c48dbbdf.png)

もし、上記の画面が出てこない場合は右上の＋ボタンからNew repositoryを選択してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/809e55ab-06ed-f175-97a1-11158665f908.png)


リポジトリの名前は好きなように！
ただし、公開されます。
そのほかの設定は触らずにCreate repository
![スクリーンショット 2020-12-07 020609.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/7633d207-61f2-4af4-44d8-b3b9f9545a6d.png)


とりあえずここまで来たらオッケーです！
![スクリーンショット 2020-12-07 020936.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/159e7af4-1b55-a183-801d-9bfa8ab494c4.png)

# `.gitignore`の設定
`.env`など、公開してはいけないファイルを`.gitignore`に記述してください。これで公開されないようになります。

```.gitignore
# 省略
/.env
```
# 初回設定
そしたら、自分のアプリケーションフォルダにターミナルorコマンドプロンプトで入りましょう！
間違ってもdesktopなどでコマンドを実行しないようにしましょう。
自分のPCのフォルダが全世界に公開されてしまいます。。。

```
$ cd your_app_name
```


push時にはGitHubへのログインを求められますので、ユーザー名とパスワードを入力してください！
（ちなみにパスワードは画面上に表示されませんが裏では入力されています）

GitHubの仕様が変更になり、SSHか、トークンを使った認証に変更になりました。詳しくは以下をご覧ください。

https://docs.github.com/ja/authentication/connecting-to-github-with-ssh

https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens

上記の認証情報の設定後以下を実行してください
```
$ git init
$ git add -A
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin YOUR REPOSITORY URL
$ git push -u origin main
```
YOUR REPOSITORY URLには自分自身のGitHubのURLが入ります。
![スクリーンショット 2020-12-07 0209361.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/23f40316-b733-c598-3386-cf5fa92b5c37.png)
ここからコピーできます。

以上で、GitHubへのコードアップロードが完了しました。
改めてリポジトリのページをリロードすると以下のように自分のコードが表示されているはずです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/6a075a0a-44c2-806a-1a6e-6f5c740f2f66.png)


# 2回目以降の公開方法
最初の設定は大変でしたが
今後、GitHabへアップロードしたい時は以下の三つのコマンド（add, commit, push）を実行すればオッケーです！

```
$ git add -A
$ git commit -m "自由にわかりやすいメッセージ"
$ git push origin main
```
こまめにキリのいいところでpushしておくと、あとあと自分を救うことになりますよ！

# 新しいアプリケーションを公開したい
リポジトリの作成から始めてもらえればOKです！


# 活用法
### 他の人にコードを見てもらいたい！
いちいちファイルのスクショ何枚も送るなんて面倒ですよね！
そのままURLを送りつけちゃってください！他の人も同様にコードを見ることができます。


### いろいろ機能付けたけど、上手く動かなくなってしまった。。。元に戻したい
addする前

```
$ git checkout .
```

add した後

```
$ git checkout HEAD 
```

commitしたあと

```
$ git revert HEAD
```

pushした後

```
$ git revert HEAD
$ git push origin main
```

# まとめ
以上お疲れ様でした！
コードのバージョンをGitで管理し、GitHubでアップロード、共有する流れがなんとなく理解できていればオッケーです。
よきGitライフを！！！



# 参考
[Gitを触り始めてからGitHubにpushするまでの流れを誰よりも丁寧に説明する](https://qiita.com/gakisan8273/items/6ebaf9217d140ff1f031)
[【Git入門】サルでも分かるGit入門の前に！Git使い方高速入門編【入門は5分で十分だと思います】](https://www.youtube.com/watch?v=i1L3A0SLDyg)
[Git で変更を取り消して、元に戻す方法 (事例別まとめ)](https://www-creators.com/archives/1290#i)