【備忘録】GUIでリポジトリ作成からGitでPushするまでのフロー

Reactのミニアプリ開発を行った過程で、作成したコードをGitHubにアップする作業を行いました。

https://github.com/7gi-renew/sample-todo01

これまではコードのGitHubへの反映はSourceTreeを使っていましたが、今回初めてCUI上でリポジトリ作成からプッシュまでを行いました。

この記事では、備忘録としてGitHubにアップするまでの一連のフローを記事化してみます。

※記載の情報は2025年3月現在のものです

## 目次
- [ローカルリポジトリを作成する](#ローカルリポジトリを作成する)
    - [ローカルリポジトリについて](#ローカルリポジトリについて)
    - [①ユーザー名とメールアドレスをGit上で登録する](#①ユーザー名とメールアドレスをGit上で登録する)
    - [②フォルダを作成する](#②フォルダを作成する)
    - [③リポジトリを初期化する](#③リポジトリを初期化する)
    - [④Git管理対象へファイルを追加する](#④Git管理対象へファイルを追加する)
    - [⑤コミットしたいファイルをステージングに登録する](#⑤コミットしたいファイルをステージングに登録する)
    - [⑥ステージングしたファイルをローカルリポジトリに追加する](#⑥ステージングしたファイルをローカルリポジトリに追加する)
- [リモートリポジトリ(GitHub)とローカルリポジトリを連携する](#リモートリポジトリ(GitHub)とローカルリポジトリを連携する)
    - [①GitHub上で新規リモートリポジトリを作成する](#①GitHub上で新規リモートリポジトリを作成する)
    - [②リモートリポジトリURLをGitコマンドで登録する](#②リモートリポジトリURLをGitコマンドで登録する)
    - [③初回プッシュのためのアクセストークンを登録する](#③初回プッシュのためのアクセストークンを登録する)
    - [④ローカルリポジトリの内容をリモートリポジトリにプッシュする](#ローカルリポジトリの内容をリモートリポジトリにプッシュする)
- [最後に](#最後に)



## ローカルリポジトリを作成する
### ローカルリポジトリについて
https://backlog.com/ja/git-tutorial/intro/02/


**ユーザー自身が利用するために作成する、自分自身の環境に設置するリポジトリ**のこと。
自身の変更履歴などはこのリポジトリ上で管理されるイメージ。

### ①ユーザー名とメールアドレスをGit上で登録する
```
# ユーザーネーム
git config --global user.name <username>
# メールアドレス
git config --global user.email <emailaddress>
```

### ②フォルダを作成する
**(1)コマンドラインで作成する場合**
```
mkdir <filename>
cd <filename>
```
**(2)GUIでフォルダ作成する場合**
デスクトップを右クリックしてフォルダを新規作成する

### ③リポジトリを初期化する
下記コマンドを入力することで、リポジトリが初期化されて`.git`サブディレクトリが作成される。
```
git init
```

### ④Git管理対象へファイルを追加する
①で作成したフォルダにGit管理させたいファイルを移動させる。
    ファイルがない場合は`vi`コマンドや`touch`コマンドで新規作成する
現在の状態は`git status`コマンドで確認できる

### ⑤コミットしたいファイルをステージングに登録する
ステージングへ登録することでファイルやフォルダをコミットの対象にできる。
* 登録するファイルは個別に選択するが、スペースを空けて繋げて書くことで複数ファイルを登録可能
* ワイルドカードを使うことで特定のファイルをまとめて登録可能
```
# 基本形
git add <filename>
# 複数ファイルを登録したい場合
git add <filename1> <filename2>
# ワイルドカードを使う例
git add '*.jsx'
```
どのファイルがステージングに登録されているか確認したい場合は`git status`コマンドを使うと良い

### ⑥ステージングしたファイルをローカルリポジトリに追加(コミット)する
```
git commit -m "(コメント名)"
```
※`git commit`のみでもコミットはできるが、コミットメッセージを編集するエディタに飛ばされるので慣れないうちは`-m`をつけることを推奨。
<br>
ここまでの一連の作業を行うことで、**ローカルリポジトリに作業のログを登録**することができます。
ここからはローカルリポジトリの内容をGitHubのリポジトリに反映させる作業です。

## リモートリポジトリ(GitHub)とローカルリポジトリを連携する
### ①GitHub上で新規リモートリポジトリを作成する
* GitHubのアカウントを登録する
* GitHub上で新規リポジトリを作成する

リポジトリ作成方法については公式ドキュメントをご参照ください。

https://docs.github.com/ja/repositories/creating-and-managing-repositories/creating-a-new-repository


### ②リモートリポジトリURLをGitコマンドで登録する

https://docs.github.com/ja/get-started/getting-started-with-git/managing-remote-repositories
```
git remote add <RemoteRipositoryName> <RemoteRipositoryURL>
```
* リポジトリ名(RemoteRipositoryName)：初期状態は`origin`
* リポジトリURL(RemoteRipositoryURL)：リポジトリ内のCodeボタンを押下した際に出てくるもの

### ③初回プッシュのためのアクセストークンを登録する
現在のGitHubでは、初回プッシュの際の認証でアクセストークンが必要になる。そのため新規作成する必要がある。
* (1)GitHubアイコンを押下し`Settings`を選択
* (2)設定画面の一番下にある`Developer Settings`を押下
* (3)`Personal access tokens`のアコーディオンを押下し、`tokens (classic)`を選択
* (4)`Generate new token (classic)`から新しいトークンを作成する

#### 注意事項
* `Expiration`(有効期限)は無制限にしたいのでNo expirationを選択
* `Select scopes`のチェックボックスは`repo`の欄は全てチェックを入れる。他は入れなくて可
* <font color="Red">**一度作成したアクセストークンの値は再参照できない**</font>ので、**トークン作成後は必ず値を保管しておくこと**。

ここで登録したアクセストークンを④の初回プッシュ時のパスワードに登録することで、初回コミットが実行されるようになる。

### ④ローカルリポジトリの内容をリモートリポジトリにプッシュする
ローカルでコミットした内容(ファイル)はリモートリポジトリにプッシュすることでリモート環境(GitHub)に反映される。
```
git push <RemoteRepositoryName> <LocalRepositoryName>
```
* リモートリポジトリ名：初期状態は`origin`
* ローカルリポジトリ名：初期状態は`main`

初回プッシュ時には**ユーザーネームとパスワード**を求められる。
* ユーザーネーム：自身のGitHubアカウントのユーザー名
* パスワード：前項で作成した**アクセストークン**を入力



プッシュしたファイルがGitHubのリポジトリ上に反映されていたら完了。

## 最後に
ここまで読んでくださりありがとうございます。

自分含めCUIでのGit作業はとっつきにくい点が多いと思います。この記事が同じような初学者の助けになれば嬉しいです！


## 参考文献
Gitのフローについて
https://backlog.com/ja/git-tutorial/
https://zenn.dev/gachigachi/articles/288685d70677b7
https://qiita.com/Futo_Horio/items/4d669f695680bc13d5fa
https://codezine.jp/article/detail/16559

Gitリポジトリの作成について
https://docs.github.com/ja/repositories/creating-and-managing-repositories/creating-a-new-repository

アクセストークンについて
https://qiita.com/mokio/items/f6c67c8f9af050383fc0