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

はじめに

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

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

VSCodeインストール

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

VSCodeのインストール

①VSCode公式からダウンロードする(自分の環境に合う製品を選択してください)。

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

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

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

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

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

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

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

③VSCodeを開く。

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

GitHubアカウントの作成

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

GitHubアカウント作成

①GitHub公式から「GitHubに登録する」ボタンをクリックする。

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

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

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

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

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

認証設定(任意)

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

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

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

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

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

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

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

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

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

上記画像のようになっていれば、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連携テスト）

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

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

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

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

連携作業

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

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

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

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

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

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

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

⑤GitHubのトークン生成画面から「Generate new token」をクリックする。

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

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

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

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

git push -u origin main

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

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

最後に

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