GitHub初歩の初歩

多少言葉が間違っていても分かりやすそう、聞きなじみがありそうな言葉を優先することがあります。
そういった部分については、分かる範囲で脚注等に示すようにします。
不足している点を見つけられましたら、ご指摘頂けると勉強になるので助かります。


# イントロ
プログラミングに限らず人間はたくさんミスをする生き物で、
野菜炒めを作る時を例に挙げると、
「塩を入れるところに砂糖を入れちゃった！」みたいな大きなやらかしから。
「端っこちょっと焦がしちゃった」「もやしが1本こぼれた」と小さなやらかしまで幅は多彩だ。

ここで、
「野菜を買ってきた」
「野菜を全部切った」
「フライパンにまとめて入れて火をつけた」
「味付けに塩を入れた」
「炒め終わった」
「お皿に盛り付けた」

みたいな状態の区切りを行うことができるのがGitHub[^2]の機能で、
世間では「バージョン管理」とも呼ばれたりする。

縁がないので知らなかったが、プログラマに限らずデザイナーや作家もGitHubを使っていることがあるらしい。



# 前提知識
## CLI
「CLI」というものをなんとなく理解しておく必要がある。
筆者はwindowsしか触ったことがないので以下windows環境のみの話になる。

windowsのCLIは、メニューバーの虫眼鏡に「cmd」と入力すると出る黒い画面「コマンドプロンプト」。

極論この画面でパソコン内のあらゆる機能を実行できるらしいが、実際にそんなことをする必要はなく、
gitを使うために理解する必要があるのは「現在地の理解」と「移動の仕方」である。


初期画面だと
```cmd:コマンドプロンプト
Microsoft Windows [Version 10.0.19043.1586]
(c) Microsoft Corporation. All rights reserved.

C:\Users\typ2>
```

みたいな感じになっている。
試しにここで「dir」と入力してエンターを押してみると、

```cmd:コマンドプロンプト
C:\Users\typ2>dir
 C:\Users\typ2 のディレクトリ

2022/04/08  09:21    <DIR>          Desktop
2022/03/31  08:35    <DIR>          Documents
2022/04/08  09:21    <DIR>          Downloads
               k 個のファイル               ---- バイト
              n 個のディレクトリ  --------- バイトの空き領域

C:\Users\typ2>
```

のような表示になる。これが何を表しているかというと、
下の画像(エクスプローラー)から、OS(C:)→ユーザー→typ2の順で開いた時のフォルダ[^1] の中身だ。
つまり「dir」というコマンドは「フォルダの中身を見せて」という意味を持っている。

<img width="300" alt="img1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2245572/7a043d3a-c66a-4af9-1af4-66178e1d8f2b.png">

全く同じではないだろうが、普通は「デスクトップ」「ダウンロード」「ドキュメント」に相当するものがあると思う。
GitHubへは、このCLIを通じて「今いるフォルダの中身をアップロードするね！」という風に指定する。


## 移動の仕方
さて、前の章で
- Gitを使うために理解する必要があるのは「現在地の理解」と「移動の仕方」
- GitHubへは「今表示しているフォルダをアップロード」する

と述べた通り、今のフォルダ(=現在地)が分かったら目的のフォルダへの移動の仕方を知らないといけない。
自分が使ったことがあるコマンドは以下の5つのみ。


| コマンド | 挙動 |
|:--|:--|
| cd フォルダ名  |  指定したフォルダへ移動 |
| cd..  |  1つ上の階層へ移動 |
| cd\  | ルートへ移動  |
| dir  | 今いるフォルダに存在するフォルダとファイルの表示  |
| cls  | 画面の表示のクリア  |

### cd フォルダ名 
フォルダ名は、先の`dir`の画面で表示しした「Desktop」「Documents」「Downloads」などを指す。
cd Desktop/foods/fruits/apple
みたいにまとめて移動することもできる

### cd..
「1つ上の階層」とは`C:\Users\typ2`から`C: \Users`へ移動すること。
ざっくりフォルダの外/中を階層の上/下と呼んでいると思えばいい

### cd\
ルートは`C:\`への移動を指す。たぶんroute:経路じゃなくてroot:根っこ
どの場所にいても一番最初の地点に行ける「あなぬけのヒモ」みたいなもの。

### cls
色々やってると画面がうるさくなるので、たまに`cls`で一旦クリアしてきれいな画面にする。

### その他
mkdirは？と言われると、実は使ったことがない。
VScodeでフォルダ作るついでに開いてターミナル

↑、↓で前後で打ったコマンドをコピペした状態にできる。便利。

# GitHub
本題。まずはアカウント作成から。

https://github.com/

右上「Sign up」からアカウントを作成する。宇宙旅行みたいでオシャレ。
無料プランを選択。




## Gitのインストール
https://gitforwindows.org/

特殊な設定はせず適当にインストールする。Next連打。
Git Bashというのが併せてインストールされていて、便利だけど使わなくても問題ないので
簡単のため以下の作業も全てコマンドプロンプトで行う。


## Gitの設定
CLIで
```git config --global user.name "typ2"```  
```git config --global user.email "typ2@example.com"```

ユーザー名とメールアドレスを設定する。


## リポジトリの作成
GitHubを使うためには
- ローカル(PC内)でのリポジトリの作成
- リモート(GitHub上)でのリポジトリの作成 
- ローカルとリモートを紐付ける

という前準備が必要。リポジトリというのは冒頭の料理の例で言えば
18:00 「食材を買ってきた」
18:30 「食材を切った」
のように、ファイルの状態に時間とかの履歴をくっつけて保存したものだと思えばいい。

### リモートリポジトリの作成
GitHubにログインして、左上[new]から作成する。

<img width="300" alt="github" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2245572/cecc57d8-d4f8-556c-5b99-2094bd92e73a.png">

Repository nameを適当に入力(testとかexampleとか)
Privateを設定して、他は特にチェックを入れず[Create repository]をクリック


### ローカルリポジトリの作成
デスクトップにフォルダ```test```を作って中身に```memo.txt```など適当なファイルをつくる。
更新時に変化を分かりやすくするため、txtファイルには「あいうえお」など適当な文字を入れておく。


CLIでcdとかなんやかんやして、```C:\Users\typ2\Desktop\test```まで移動する。
ここで3つのコマンド
```
git init
git add -A
git commit -m "test"
```
を順番に入力する。自分のざっくりしたコマンドの解釈は以下の通り
| コマンド | 意味 |
|:--|:--|
|  git init | initializeの略で、ここにローカルリポジトリを作る！という宣言|
| git add -A  | このフォルダのやつ全部リポジトリに入れます  |
| git commit -m "test" | "test"のメッセージと一緒に保存するよ  |
 
-Aでファイル名とか指定するとそのフォルダだけリポジトリに入れられる。
-mはメッセージ。ここを修正した、とかの変更内容を書くことが多い。
"コミットメッセージ 書き方" でググるといっぱい出て来るので詳しくはそちらを参照。


### リモートとローカルの紐づけ
GitHubのページでリモートリポジトリを開いて緑色の[Code]をクリックすると
```https://github.com/'ユーザーID'/'リポジトリの名前'.git```
が出て来るので、CLIで
```
git remote add "上のURL"
```
を実行して紐付ける。

### リモートへのアップロード

最後の仕上げに、
```
git push -u origin main
```
を実行する。


と、初回ではここでユーザー名と個人アクセストークンを求められる。
ユーザー名はGitHubで登録したユーザー名を入力する。

個人アクセストークンについては [この記事](https://qiita.com/kz800/items/497ec70bff3e555dacd0) をまんま見たら取得できる。
登録時のパスワードとは別物で、別のパソコンからリモートへアップロードするときなど必要になるので注意したい。

Gitでリモートリポジトリを再度開くと、```memo.txt```が入っていることが確認できるはず。


## データの更新
さて、Gitとはバージョン管理をするアプリという話をした。
先ほどのmemo.txtの中身を「かきくけこ」に書き換えてみて、

もう一度
```add　-A``` -> ```commit　-m "test2"``` -> ```push```
を実行してみる。


リモートを再読み込みすると、memo.txtの横にコミットメッセージ「test2」が反映されているはず。
これで最低限のバージョン管理はできるようになった。今回はここまで。


# さいごに

GitHubでは下画像の赤丸で囲った部分をクリックすると
コミットログ(いつどんな更新をしたか、その時のファイルの状態)を確認することができる。
必要になったらこれを利用してバージョンの巻き戻しもできる。
頭の片隅に留めておきたい。

![21f8a594f3349d483387228f1e6ba31a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2245572/acc75b33-3026-2486-183e-a3b7d9321370.png)

[^2]:実は未だにgitとgithubの違いがよくわかっていない。gitはPC内ツールでgithubはウェブ上のサービスみたいなイメージ
[^1]:正確にはフォルダではなくディレクトリ。