自分で作ったコードをとりあえずGitHubで管理したい

<H2>はじめに</H2>

GitHubはチームで開発を進める際に利用するバージョン管理ツールとして有名だが
自身で作成したプログラム等の成果物を公開するといった利用方法もあると思う。
ここでは、後者の目的でGitHubを利用したい人向けに最低限の操作方法を紹介する。

<H2>筆者の使い方</H2>
筆者は仕事上VBAを用いることが多いので、自宅で作成したソースコードやツールを

下記のような階層構造でGitHubのリモートリポジトリにアップロードしている。

```:リポジトリ階層構造
VBA	
 ├ lib                            …どこからでもコードをコピーできるようにエクスポートしたモジュールを配置
 │  ├ class	
 │  │  ├ clsArrayList.cls	
 │  │  ├ clsIterator.cls	
 │  │  ├ …	
 │  │  …	
 │  ├ form	
 │  │  ├ …	
 │  │  …	
 │  └ module	
 │      ├ modFileUtils.bas	
 │      ├ modExclEditUtils.bas	
 │      …	
 ├ sample                         …Qiita等で記事を作成した際のサンプルプログラム等を配置
 │  ├ 【Qiita】サンプルファイル	
 │  ├ …	
 │  …	
 └ tools                           …ダウンロードすればそのまま利用できるツールを配置
     ├ VBエクスポートツール.xlam	
     ├ …	
     …	
```

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/4b7035bb-cb23-bb47-4c9d-d11267f7e393.png">

<H2>必要なもの</H2>

* msysgit（Git for Windows）
* GitHubアカウント

以降で紹介する手順には上記の用意が必要

<H2>GitHubのリモートリポジトリへの配置の手順</H2>

1\. リモートリポジトリの作成
2\. ローカルリポジトリの作成
3\. リモートリポジトリにアップロードしたいファイルをローカルリポジトリに配置
4\. リモートリポジトリを更新するためのアクセストークンを発行する
5\. ローカルリポジトリの内容をリモートリポジトリにアップロード

<H2>1. リモートリポジトリの作成</H2>

<H3>リモートリポジトリとは</H3>
ここでは「ネット上にある自分用のフォルダ」という解釈でOK

<H3>1.1. GitHubのログイン直後のページから下記のように操作</H3>

① リポジトリ名を決める（既存のリポジトリと重複しなければ何でもOK）
② Publicを選択（Privateだとログインしないと閲覧できない）
③ Create a new repository ボタンを押下してリモートリポジトリを作成

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/db31c869-9788-7724-491d-08db97eecdd8.png">

リモートリポジトリが作成された

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/f0d5d972-919d-84aa-60bc-bd7089f4bfe7.png">

:::note warn
Public 指定をすると、赤の他人でも見ることができてしまうので注意
:::

<H2>2. ローカルリポジトリの作成</H2>

<H3>ローカルポジトリとは</H3>

「ローカルリポジトリとして利用すると宣言した、自身のPC上にあるフォルダ」
自身のPC上のファイルやフォルダを、リモートリポジトリに配置するための橋渡しとしての役割を持つ

<H3>2.1. 適当なフォルダを開き、ターミナルを開く</H3>

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/d5ab6021-c37e-f1c8-e48e-2278af3ea37e.png">

下記の赤枠内には、ターミナルを開いたときのフォルダ階層が表示されている

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/e4a6f3d7-8e7a-8922-3544-2ec4597f73ef.png">

:::note warn
※※※※※コマンドを実行する場所※※※※※
以降の手順でコマンドを実行する際は、全て上記のパスから実行する必要があるため注意
（ターミナル(PowerShell)を開くとき、右クリックするフォルダは必ず今回と同じにすること）
:::

:::note info
アプリケーションについて
手順では「ターミナル(PowerShell)」を指定してるが、実際は「コマンドプロンプト」や「Git Bash」でも、
「Git」コマンドを打って反応があるアプリケーションなら何でも良い。
:::

<H3>2.2. 下記のコマンドを入力</H3>

```:コマンド
git init               #ローカルリポジトリの作成
```

下記のようなメッセージが出れば成功
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/4464d691-843e-1397-5353-cf1ad337bb93.png">

<H2>3. リモートリポジトリにアップロードしたいファイルをローカルリポジトリに配置</H2>

ローカルリポジトリは、自身のPCとリモートリポジトリを繋ぐ橋渡しの役割を持つと説明したように
今回紹介する作業では、最終的にローカルリポジトリの内容 = リモートリポジトリの内容 となる

<H3>3.1. 好きなようにファイルを配置する</H3>

先ほどの手順で「git init」を実行したフォルダ配下にファイルやフォルダを配置する
（空のフォルダだけだとアップロードされないので注意）
下記はフォルダ配下にファイルが入ってる

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/149ea11d-38f5-8a82-8eb6-f4848a212654.png">

:::note info
.gitについて
先ほどの手順「git init」のコマンドによって作成された。
隠しファイルを表示することによって可視化できるが、見えるようにしなくても問題ない。
:::

<H3>3.2. 下記のコマンドを入力</H3>

```:コマンド
git add .              #フォルダ内全てをローカルリポジトリに仮配置
```

<H3>3.3. 続けて下記のコマンドを入力</H3>

```:コマンド
git commit -m "任意のコメントを入力"    #3.2. で仮配置したファイルを本配置
```

<H2>4. リモートリポジトリを更新するためのアクセストークンを発行する</H2>

リモートリポジトリは、アクセストークンを発行した際に表示されるキーワードを知る者しか更新ができない
下記はそのアクセストークンを発行するための手順となる

<H3>4.1. アカウントのアイコンを押下し、メニューから「Settings」を押下する</H3>

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/f473bbdd-4c51-dd2b-95bf-6931bb8696c5.png">

<H3>4.2. 遷移先のページの左下のメニューに「Developer settings」があるため押下する</H3>
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/8fd86c45-0014-f525-0bee-43daa7b996ac.png">

<H3>4.3. 遷移先のページのメニューから「Tokens(classic)」を押下する</H3>
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/3532f6d8-51cd-2ee8-b7c7-92d3e89a48b2.png">

<H3>4.4. 右側に表示される「Generate new token ▼」を押下し、「Generate new token(classic)」を選択する</H3>
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/e9136511-2858-09c1-81a4-368aa109c81a.png">

<H3>4.5. 遷移先のページで下記のように操作</H3>

① トークン名を決める（何でも良い）
② トークンの有効期限を決める（セキュリティの観点では短い方が望ましいが、更新が面倒であれば長くしても良い）
③ 利用目的を決める（今回の紹介内容だけの用途であれば「repo」にのみチェックする）
④ ボタン「Generate token」を押下する
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/c5b01270-e7ad-ee9a-89dc-6b386500617c.png">
　　　　　　　　　　　↓

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/ba0ed1fc-a475-04c8-dcd8-4f5e95cb1a24.png">

トークンが発行される
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/f7ffa957-a827-263c-68a0-7dd5ae3ab26b.png">

:::note warn
発行されたアクセストークンのキーは必ず控えること
忘れると同じ手順で再発行する必要がある
:::

<H2>5. ローカルリポジトリの内容をリモートリポジトリにアップロード</H2>

前項で取得したアクセストークンを用いてリモートリポジトリの更新をする

<H3>5.1. 下記のコマンドを入力</H3>

```:コマンド
#リモートリポジトリを操作する際の更新者としての情報を指定する
git config --global user.name "任意のユーザー名"
git config --global user.email "任意のメールアドレス"
```

:::note warn
上記で指定した値はリモートリポジトリから他人も見ることができる
:::

<H3>5.2. 下記のコマンドを入力</H3>

```:コマンド
git branch -M main         #ローカルリポジトリとリモートリポジトリのブランチ名を統一する
```

<H3>5.3. 下記のコマンドを入力</H3>

```:コマンド
#指定したリモートリポジトリを現在のローカルリポジトリと紐付ける
git remote add origin https://github.com/XXXX/XXXX.git
```

:::note info
URLは下記で確認できる
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/b57ccf60-d91d-a92d-b127-aeb225cea05d.png">
:::

<H3>5.4. 下記のコマンドを入力</H3>

```:コマンド
git push -u origin main            #ローカルリポジトリの内容をリモートリポジトリへ反映する
```

下記のアクセストークン入力画面が表示されるため、先ほどの手順で取得したアクセストークンのキーを入力する
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/2e368ec4-05d4-abdd-2933-7df511aafed5.png">

下記のようなメッセージが表示されると成功
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/7559dc80-ea42-eacf-2529-db29f584e102.png">

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626788/75d8cb4e-1232-82c9-51b5-bb73edfa9e8f.png">

:::note info
新たに更新する場合
次の手順を参照

* 3.1. ~ 3.3. → 5.4.
3.1.で更新したローカルリポジトリの内容をリモートリポジトリに反映することができる。
:::

<H2>おわりに</H2>

以上の手順さえ覚えておけば、とりあえずGitHubのリモートリポジトリを私的に利用できると思う。
ただ、紹介した用語やコマンドの意味付けはやや説明不足な面もあるため、さらに深い用途でGitHubを利用する際には調べなおすことをおすすめする。