【環境構築】GitHubアカウントを作成してVSCodeと連携できるようにする

# はじめに

実際にアプリを作るとなると、開発環境を整える必要があります。
アプリを作るためにプログラムを書くとなった場合、ソースコードの管理先が必要となってきます。個人開発であればソースコードを自己責任で管理する条件下ではソースコードを自分のローカル環境(パソコンの中)で管理することもできますが、パソコンの不具合があればソースコードが消える可能性があったり、チームで開発する場合にはソースコードを共有することができないため、管理の仕方は適していません。そこで、これらの問題を解決するために**GitHub**を用います。

GitHubとは、ソースコードやその変更履歴を共有・管理できるツールであり、現在ではかなり主流となっているソース管理ツールとなっています。そこで今回はこのGitHubアカウントを作成して、ソースコードエディタであるVSCodeと連携する作業をしていきます(下図参照)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/fcd605ec-ec98-f2e5-48bd-435c5dd1495a.png)

# VSCodeインストール

まずは、ソースコードエディタであるVSCodeをインストールします。

### VSCodeのインストール

①[VSCode公式](https://code.visualstudio.com/download )からダウンロードする(自分の環境に合う製品を選択してください)。

②ダウンロードが始まるので、zipファイルを解凍する。

③VSCodeをアプリケーションフォルダに移動する。

④VSCodeをクリックする(下記画面が出ればOKです)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/1f480084-9a67-bcea-77cf-9bdfa149c904.png)

### 英語→日本語表記へ変換する

インストールすると、基本的に英語になっていると思うので、VSCodeの拡張機能である「Japanese Lauguage Pack」を用いて日本語へ変換します。

①VSCodeの左タブから拡張機能ボタン(四角い箱)をクリックする。

![スクリーンショット 2024-01-31 5.15.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/d59ed973-15a4-804e-084d-01f04ebc6340.png)

②右下のポップアップの「Change Language and Restart」をクリックして、VSCodeを再起動する。

③VSCodeを開く。

![スクリーンショット 2024-01-31 5.20.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/62c6cb91-489a-4fb9-320a-ab9e4d88a267.png)

上記画面の通り、日本語表記になっていればひとまず完了です。

# GitHubアカウントの作成

次に、ソースコード管理ツールであるGitHubアカウントを作成していきます。

### GitHubアカウント作成

①[GitHub公式](https://github.co.jp/)から「GitHubに登録する」ボタンをクリックする。

②アカウントの必要項目を入力する。

③入力したメールアドレスに届いた番号で認証する。

④GitHubのダッシュボードが表示される。

⑤右上のアイコンを押下して「Your Profile」をクリックする。

⑥下記のようなプロフィールが表示されているか確認する。

![スクリーンショット 2024-01-31 4.10.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/9f65b4d1-60b2-5c7b-09d4-ef4682ea5c18.png)

### 認証設定(任意)

ここでは、自分のアカウントに対して、さらなるセキュリティ強化を図るために、GitHubの認証設定を行っていきます。今回行っていくのは、「2段階認証」です。2段階認証を行うことで、パスワードだけでなく認証番号が追加で必要となるので、セキュリティが非常に強固になります。

①GitHubアカウント作成⑥の画面から右上のアイコンを押下して「Setting」をクリックする。

②「Password and authentication」をクリックする(下記画面が表示される)。

![スクリーンショット 2024-01-31 4.14.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/34fc02fa-a314-5de2-c4fa-f149a24daca2.png)

③2段階認証項目の「Enable two-factor authentication」をクリックする。

④QRコードで読み取って、認証番号を入力する。
(※Google Authenticatorと呼ばれるアプリで認証するので、手持ちのスマートフォンでインストールしておいてください。)

⑤**リカバリーコードを保存するために「Download」をクリックする(※重要)**

![スクリーンショット 2024-01-31 5.42.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/a519afdd-f8eb-8b10-1a6f-9229a7d402eb.png)

ここで必ずリカバリーコードをダウンロードしておきましょう。
自分は現在実務でもGitHubを使っているのですが、その際の2段階認証で必要な認証番号が入った携帯を紛失してしまった上に、リカバリーコードもダウンロードしていなくて、アカウントを再度作り直す羽目になってしまいましたので。。。

⑥「I have saved my recovery codes」をクリックする。

⑦次の画面でDoneをクリックする。

![スクリーンショット 2024-01-31 5.48.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/9ced2f9c-5215-4acc-e7c0-9be4d545063d.png)

上記画像のようになっていれば、2段階認証が設定完了します。

# VSCodeとGitHubの連携

ここで、自分がエディタで編集したソースコードをGitHubに反映するために、VSCodeとGitHubの紐付けを行っていきます。

### リポジトリ(フォルダ)作成

まずはGitHubに連携するために、VSCode側でリポジトリを作成します。

①VSCodeを開く。

②VSCodeのターミナルを開いて、GitHubのアカウント情報をコマンドで入力する。

```
git config --global user.name {自分の名前}
git config --global user.email {メールアドレス}
```

③「フォルダを選択する」ボタンをクリックする(フォルダ作成していない場合は、ここで作成しておく。)

④適当なファイルを作成する（自分は下記のように作成しました）。
* フォルダ名：git-sample
* ファイル名：test.html（テキスト：VSCode連携テスト）

![スクリーンショット 2024-01-31 7.44.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/d0d8ceeb-555a-8a2e-8baf-3b861e2c2e6c.png)

⑤左タブのブランチボタンを押下して「リポジトリを初期化する」をクリックする。

![スクリーンショット 2024-01-31 7.47.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/854e39e3-7034-9f0b-eb47-ac9ed7cd720f.png)

ここで、左下にブランチ名(デフォルトではmain)と変更部分にファイルが追加されていることが確認できます。

⑥変更の右側にある「+」ボタンをクリックして、ステージングへファイルを上げる。

⑦メッセージに変更内容(簡単に)を入力して「コミット」をクリックする。

### 連携作業

次に、GitHubを開いて、ローカル環境のVSCodeと連携します。

①GitHubを開いて、自分のプロフィールに移動し、「Repositories」をクリックする。

②Newボタンをクリックして、リポジトリを作成する(リポジトリ名は任意でOKです)。

③登録が完了したら、下記画面が表示されるか確認する(左上にリポジトリ名が出てます)。

![スクリーンショット 2024-01-31 8.08.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/f96bc973-018a-38be-7b62-f502f91b7667.png)

④VSCodeに移動し、ターミナル上で下記コマンドを入力して、VSCodeをGitHubのリポジトリに紐付ける。

```
git remote add origin https://github.com/{ユーザー名}/{リポジトリ名}.git
git branch -M main
```

**⑤〜⑦は2段階認証を設定した方のみ行ってください。**

⑤GitHubの[トークン生成画面](https://github.com/settings/tokens)から「Generate new token」をクリックする。

⑥設定が完了したら、トークンをコピーする。

⑦viエディタに入り、urlを下記のように更新する。

```
vi .git/config
url = https://{ユーザ名}:{生成したトークン}@github.com/{ユーザ名}/{リポジトリ名}
```

⑧GitHubへソースコードを反映する。

```
git push -u origin main
```

⑨GitHubに移動して、自分の作成したリポジトリが反映されているか確認する。

![スクリーンショット 2024-01-31 23.01.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/248957b7-c674-3171-89ed-b026d18383a2.png)

これで、VSCode上で編集していたファイルが反映できていたら連携完了です。

# 最後に

今回は、VSCodeのインストール,GitHubのアカウント作成、さらには両者の紐付けを行っていきました。特に初学者の方がよく行う作業になるかと思いますので、ぜひ全体観を意識しつつ手順を踏んでいただけたらと思います。今後は自分も個人アプリを作成して、そこから学びを得たりアウトプットしていく予定なので、よろしくお願いします。