【初心者向け】VSCodeとGithubの連携 for Windows ～連携操作からプッシュまで～

寒さが厳しくなり朝晩は着る毛布から抜け出すことができないピピよです。
学習した内容のアウトプットも兼ねて、VSCodeとGithubを連携させる方法を解説したいと思います。

HTML/CSS学習をはじめてWEBポートフォリオの公開をするぞ！という時、初心者でも導入しやすいです。手順は長いですがぜひチャレンジしてみてください！

今回紹介するのはVSCodeとGithubの連携ですが、社内研修で最初に使用したのはSourcetreeとGitHubでした…。

Sourcetreeは導入してしまえばとても使い勝手が良い便利ツールです！しかし、入力するアカウント情報を間違えてGithubにログインできなくなってしまうなどのトラブルに見舞われることもあります…。

VSCodeとGithubの連携はSourcetreeよりも比較的簡単なので、設定に挫折してしまった人でも混乱しないはずです！

VSCodeとGithubを連携してできること

まずは、VSCodeとGithubを連携するとどんなことができるのかお話します。

①連携したらどんなことができるのか

1. VSCodeだけでコーディングからソースコード管理までできる
2. WEBポートフォリオの作成を楽に進められる
3. Githubで公開しているソースコードを複数のユーザーで編集できる

1、VSCodeだけでコーディングからソースコード管理までできる

　VSCodeで編集が終わったらSourcetreeを起動して、変更点を確認してコミットして、やっぱり変更をさらに追加するのにまた戻って……とアプリ間を行ったり来たりする必要がありません。VSCodeの画面上で操作ができてサクサクとコーディングができます！個人的にもここが一番魅力的なポイント。ソースコード管理は、Sourcetreeの専売特許という印象です。しかし！VSCodeでも拡張機能を追加することで比較的簡単に行うことができるし、表示される画面もシンプルで見やすいです。

2、WEBポートフォリオの作成を楽に進められる

Github上で公開している情報への変更を簡単な作業ですぐに反映することができます。VSCodeでコードを書き換えて、そのままの画面でGithubのリポジトリを編集することが可能です！

3、Githubで公開しているソースコードを複数のユーザーで編集できる

リポジトリを共有することで、複数のユーザーでソースコードを編集することができます。今回は共同開発の設定方法については省略しておりますが、プロジェクトで開発をする時は必須の機能ですね。こういった機能も今回の連携でカバーすることができます。

頑張って連携することができればよいことづくしです！

本題に入る前に、初心者の方向けにソースコード管理とはなにか。使用するサービスやアプリがそもそも何なのかをちょっとだけ解説しておきましょう。

②ソースコード管理とは

ソースコード管理…ソースコードの変更履歴を管理すること

言葉の通りで、個人またはプロジェクト単位で作成しているソースコードにいつ・誰が・どのファイルに・どのように変更を加えたのかを分かりやすく管理することです。

プロジェクト単位でソースコード管理する場合は、開発に関わっている全員の履歴をチェック出来なければいけません。

③Github

　Githubは自作のソースコードを管理・公開できるSNSのことです。最大の魅力は、自分で作ったWEBポートフォリオを無料で公開できること。独自ドメインを用意して、サーバーを借りて、と大変な作業をせずともすぐに作ったページをWEBブラウザ上で見ることができます。コードのバージョン管理システムにはGitというツールを使用しています。ネコなのかタコなのかわからない謎のキャラクターが目印です。

④VSCode(VisualStudioCode)

Microsoftが開発しているテキストエディタです。拡張機能が豊富で、自分好みにカスタマイズすることができます。プログラミング学習をしている人にとっては馴染みのあるツールですね。

連携をはじめる前に

連携前にまずは下準備から！
手順で登場する用語紹介と必要なもののインストール、設定をしていきましょう。

①解説内の用語

リポジトリ

操作用語

※プル、ブランチ、マージの操作については別の記事で紹介予定です。

②VSCodeのインストール

インストール方法についてはこちらの記事を見て作業を行ってください。

【2021年5月更新】VisualStudioCodeのインストールと日本語化

英語が苦手な方は日本語化もしておくと便利です。この記事は日本語化した内容で解説しております。

③Gitのインストール

　GitはGithubのコードのバージョン管理をしているシステムツールです。なんとこのツールMacOSには搭載されていますが、Windowsには入っておりません。なので事前にインストールしましょう。

まずはGitのサイト(https://git-scm.com/)へ向かいます。
トップページのテレビのイラスト内「Download xxxxx for Windows」をクリックします。
※「xxxxx」はバージョンを表す数字なので変動します。

ダウンロードができたら、ファイルをクリック。

表示されるセットアップの案内は基本「Next」をクリック。

最後あたりの案内「Configuring experimental options」は要チェック。
「Enable experimental support for pseudo consoles.」のチェックは外しましょう。

「インストール」をクリックします。
「Finish」をクリックすればGitインストール完了です！

④Githubアカウント登録

Githubのアカウント登録作業に移ります。Githubのログインページ(https://github.co.jp/)へ進みます。

早速「Githubに登録する」をクリック。

アカウント作成に必要な情報は、ユーザー名とEメールアドレス、パスワードになります。

アカウント情報は後ほど必要になるのでしっかり覚えておきましょう。

簡単なパズルを解いてチェックが済んだら「Create account」をクリックします。

次は、仕事についてやプログラミングの経験、Githubの使用方法の質問ページがあるので自分の情報を入力します。

「Complete setup」をクリックするとこちらのようなページが表示されます。
登録したEメールアドレスにチェック用のメールが届いているので確認してみます。

Githubから届いたメールを開いて、本文内の「Verify email address」をクリックすれば登録完了です！

連携手順と操作方法

次は連携と実際の操作方法について解説します。

①連携手順

1. Githubでリモートリポジトリ作成
2. 拡張機能(GitLensとGit Graph)のインストール
3. VSCodeでリポジトリクローン

ひとつずつ確実に進めていきましょう！

1、Githubでリモートリポジトリ作成

リモートリポジトリを作成します。

Githubへログイン(https://github.co.jp/)してユーザーページを表示します。
画面左の「Create repository」かヘッター右側の「 ＋ 」内「New repository」をクリック。

入力が必要な内容は Repository name(リポジトリ名)とDescription(リポジトリの説明)、公開(Public)か非公開(Private)の選択です。Repository nameとDescriptionは任意のものになりますが、第三者から見て分かりやすい内容にしましょう。

今回は、WEBポートフォリオをイメージして公開を選択します。

最後にREADME.mdファイルを作成する「Add a README file」にチェックを入れて「Create repository」をクリックします。

作成したリポジトリの名前が正しいか確認しましょう。
公開の場合は名前の前に本のマークが、非公開の場合は鍵のマークが表示されます。

2、拡張機能(GitLensとGit Graph)のインストール

次はVSCodeの拡張機能のGitLensとGit Graphをインストールしていきます。
VSCodeを起動して、ctrl ＋ shift ＋ x (Macは cmd + shift + x)　を押して拡張機能の検索ボックスを呼び出します。

呼び出した検索ボックスへ「git」と入力しましょう。

拡張機能 GitLens と Git Graph の「インストール」をクリック。
検索一覧の中の 拡張機能 の青いインストールのボタンが歯車に変わっていたらインストール完了です。

3、VSCodeでリポジトリクローン

VSCodeの画面左バーのソースコントロールのアイコンをクリックします。

ソース管理画面「リポジトリのクローン」をクリックすると、上部にテキストボックスが表示されます。ボックス下の「GitHubから複製」をクリック。

ポップアップが表示されたら「許可」をクリックします。

クリックするとGithubのページが開かれます。ページ内「Continue」をクリックして連携作業に進みます。

自身のGithubアカウント情報を入力してサインインします。
次のページは「Authorize github」をクリック。

「Success!」と表示されれば連携完了です！

連携が失敗してしまった場合は、リポジトリクローンのここまでの作業を繰り返して見てください。
私が設定した際は、1回目は失敗してしまいましたが2回目で無事「Success!」と表示されました。何も表示されずに連携できたこともあるので、1回失敗してもあきらめずに数回チャレンジしてみてください！

連携後にVSCodeに戻って「リポジトリのクローン」をクリックします。
再度「GitHubから複製」をクリックすると作成したリポジトリが表示されます。

作成したリポジトリをクリックするとリポジトリクローンをするフォルダの選択に移ります。分かりやすい場所(Cドライブ内のユーザーフォルダが分かりやすいです)を選んで「リポジトリの場所を選択」をクリックします。フォルダ名はGithubで作成したリポジトリ名になるので空欄で大丈夫です。
※この後、VSCodeでローカルリポジトリを開くので保存場所はしっかり覚えておきましょう！

指定した場所にリポジトリ名のフォルダが増設されていれば完了です。このフォルダがローカルリポジトリになります。作成したローカルリポジトリをVSCodeで編集して、VSCodeから連携したGithubのリモートリポジトリへ編集内容を送ります。
連携の手順は以上で終了になります。

②操作方法

次は、ローカルリポジトリで変更した内容をリモートリポジトリへ反映する操作方法を解説します。

1. ローカルリポジトリの編集とユーザー情報の登録
2. ステージングとコミット
3. プッシュ

1、ローカルリポジトリの編集とユーザ情報の登録

VSCodeの画面左バーのソースコントロールのアイコンをクリックします。
今度は「フォルダを開く」をクリックして、リポジトリクローンをしたフォルダを選択します。

フォルダを開くとフォルダの中身が左側に表示されます。フォルダ名が大文字に変わるのは仕様みたいですね。中身を見てみるとリポジトリを作成した時に作ったREADMEもしっかりあります。

フォルダの中に新しいhtmlファイルを作成してみましょう。
「新しいファイル」のアイコンをクリックしてファイル名を設定します。「index.html」と入力しエンターを押すとフォルダ内に新しいファイルが出来上がります。

出来上がったファイルにhtmlのコードを書き込んでいきます。
今回はお試しなのでhtmlで、”Hello,World!”　”githubとvscodeを連携させます。”と表示されるWEBブラウザのページを作ってみます。

編集が終わったら、変更をリモートリポジトリへ反映させます。
上部の「ターミナル」メニュー内の「新しいターミナル」をクリックしましょう。

クリックすると画面下部にターミナルの画面が表示されます。
ターミナルにコマンドを入力して、GitHubアカウントのユーザー名とEメールアドレスを入力します。

ここで注意しないといけないのがメールアドレスです。登録したアドレスはリポジトリを共有した場合、第三者に公開されてしまいます…。個人的なアドレスが見られてしまうと危険なのでGitHubのPrimary email addressを使いましょう。

確認するには、GitHubのページを開いて、右上のユーザーアイコンをクリックします。
表示された一覧の下から2番目「Settings」をクリックして進んでいきます。

左側のメニューの真ん中あたりの「Emails」を選択すると2つ目にPrimary email address があります。わかりずらいのですが、文章の中に数字から始まり…github.comで終わるアドレスがあるのでコピペして確認しましょう。

メールアドレスの確認ができたら以下のコマンドを入力していきます。

git config --global user.name githubアカウントのユーザー名
git config --global user.email githubアカウントのメールアドレス

1行ごとに入力した後はエンターを押します。

エラー表示なく、ローカルリポジトリのあるフォルダ名で動きが止まっていればうまく設定できています。

2、ステージングとコミット

ターミナルへの入力が終わったら、VSCodeの画面左バーのソースコントロールのアイコンをクリックします。
変更があるファイルがあると変更の項目に通知が入ります。先ほど追加したhtmlファイルの変更を検知してくれてますね。このファイルの変更をリモートリポジトリへ反映させていきましょう。

変更があるファイルの右横に3つのアイコンがあります。(左からファイルを開く・変更の破棄・変更をステージのアイコンです。)左から3番目の「変更をステージ」をクリックします。

ステージが完了すると、変更のあるファイルはステージされている変更の項目に移動します。続いて、メッセージボックスへ変更した内容が分かるようにコメントを入力します。
今回は「htmlファイル新規作成」としましょう。

コメントが書き終わったら、メッセージボックス上のソース管理という文字の右側にある「コミット」のアイコンをクリックします。(左からビューモードの切り替え・コミット・最新の情報に更新・View Git Graph(git log)のアイコンです。)

表示されるポップアップの「すべてのコミットを保存」をクリックすればコミットできます。

どのように変更されたかは、インストールした拡張機能Git Graphの機能で確認できます。コミットのアイコンの右隣り「View Git Graph(git log)」のアイコンまたは画面下部の「Git Graph」をクリックします。

Git Graphで確認すると、誰がいつリポジトリを変更したのか確認することができます。

ここまでの作業ではまだローカルリポジトリの変更しかできておりません。他の人に変更を確認してもらうためにはプッシュをする必要があります。

3、プッシュ

プッシュの操作は、変更の同期をクリックする実行することができます。細かい操作はVSCode画面下部の青いラインの左側のアイコンで操作することができます。3つの内、真ん中のアイコンをクリックするとプッシュを実行することができます。(左からブランチの操作・プッシュとプルの操作・問題の検知)アイコンの下矢印横の数字はプルの数を、上矢印横の数字はプッシュの数を表しています。

プッシュのアイコンをクリックすると、ポップアップが表示されますので「OK」をクリックします。

Githubのポップアップが表示されたら「Sign in with your browser」をクリックします。

続いて「Authorize GitCredentialManager」をクリックした後、Githubアカウントのパスワードを入力します。

VSCodeへポップアップが表示されたら「はい」をクリックします。

プッシュが完了すると情報が更新されます。
先ほどコミットした項目に「origin/HEAD」「origin/master」のアイコンが移動していればプッシュ成功です。ローカルリポジトリの内容がリモートリポジトリへ反映されたことになります。

ちゃんと反映されているかGithubのマイページへ移動してリポジトリを確認してみましょう。

最初はREADMEのファイルのみだったリポジトリにindex.htmlが追加されていることがわかります。

まとめ

VSCodeとGithubの連携作業お疲れ様でした！
初心者の方にわかりやすいように用語解説から丁寧に解説してきました。作業するのが自分だけの場合はここまでの内容だけ覚えていれば大丈夫です。プッシュまでできれば、WEBポートフォリオの作成がグッと楽になると思います。

最初に連携作業さえ済んでしまえば、後のリポジトリクローンやプッシュの作業でパスワードの入力は必要ありません。設定を楽に進めることができるはずなので時間のある時に試して見てください。今後、業務で使う予定がある人は設定に慣れておくことをオススメします。

複数の人で作成を行う場合は、共同開発者の設定やプル。ブランチの分け方やマージについても理解しないといけません。そちらの解説については後日記事にまとめたいと思います！