寒さが厳しくなり朝晩は着る毛布から抜け出すことができないピピよです。
学習した内容のアウトプットも兼ねて、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からGitHubのリポジトリを操作できること表現した図

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

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

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

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

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

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

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

②ソースコード管理とは

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

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

ソースコード管理をわかりやすく表現した図

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

③Github

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

④VSCode(VisualStudioCode)

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


連携をはじめる前に

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

①解説内の用語

リポジトリ

用語説明
リポジトリ(repository)「貯蔵庫」「格納庫」の意。開発の際にデータやプログラムの情報が入ったデータベースのことを指す
リモートリポジトリ(remote repository)ネット上(リモート)のリポジトリ
ローカルリポジトリ(local repository)自分のパソコン内(ローカル)のリポジトリ


操作用語

用語説明
クローン(clone)リモートリポジトリをパソコンの指定した場所へ複製する
ステージング(staging)ローカルで変更したデータをコミットする場所に上げる
コミット(commit)ステージングされた変更履歴をGitに登録する
プッシュ(push)変更履歴をリモートリポジトリに送信
プル(pull)※リモートリポジトリをローカルに取り込む
ブランチ(branch)※原稿のバージョンから枝分かれさせて他の変更を行う
マージ(merge)※現在のブランチを他のブランチに取り込む

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

②VSCodeのインストール

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

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

③Gitのインストール

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

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

gitホームページのトップページ

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

gitホームページでインストールが終わった際の確認箇所

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

gitのインストーラー最初のポップ

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

gitのインストーラー終了直前の要注意ポップ

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

gitインストーラー作業完了のポップ


④Githubアカウント登録

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

GitHubホームページのサインアップ前のトップページ

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

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

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

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

GitHubホームページのアカウント作成時の情報入力画面

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

GitHubホームページのアカウント作成時のユーザーへの詳細情報確認画面

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

GitHubアカウント作成時、メール確認の画面

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


連携手順と操作方法

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

①連携手順

  1. Githubでリモートリポジトリ作成
  2. Git Historyのインストール
  3. VSCodeでリポジトリクローン

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

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

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

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

gitHubホームページのサインイン後のトップページ、リポジトリ作成実行箇所説明

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

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

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

GitHubホームページリポジトリ作成時の情報入力画面

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

GitHubホームページ作成したリポジトリのページ


2、Git Historyのインストール

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

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

VSCODE画面の拡張機能「GitHistory」インストール画面

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

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

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

VSCODE画面ソース管理のタブ、リポジトリのクローン

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

VSCODE画面リポジトリクローンクリック後、GitHubから複製のクリック箇所およびポップ

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

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

GitHubホームページ認証確認画面

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

GitHubホームページVSCODEとGitHubの認証を確認するためのパスワード入力画面

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

GitHubホームページ認証完了画面

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

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

VSCODE画面のGitHubから複製が実行されている画面

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

VSCODE画面ローカルリポジトリを保存するフォルダの選択

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

②操作方法

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

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


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

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

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

VSCODE画面ローカルリポジトリのフォルダを開く操作

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

VSCODE画面ローカルリポジトリへ新規ファイルを追加する操作

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

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

VSCODE画面ターミナルを開く操作


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

VSCODE画面ターミナルを開いた後に入力する箇所を表した図

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

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

ホームページsettingsのメールアドレスの確認方法

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

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

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

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

VSCODE画面ターミナルへ入力するコマンドの説明

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

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

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

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

VSCODE画面追加したファイルをステージングする操作

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

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

VSCODE画面、ステージングしたファイルをコミットする操作

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

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

VSCODE画面GitHistoryを開く操作

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

VSCODE画面、GitHistoryのタブ

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

3、プッシュ

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

VSCODE画面コミットした内容をプッシュするための操作説明

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

VSCODE画面プッシュの操作をした後のポップ

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

VSCODE画面でプッシュした直後のGitHub認証のためのポップ

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

GitHubホームページプッシュするための認証作業

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

VSCODE画面プッシュ後のGitHistoryのタブの画面

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

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

GitHubホームページ作業したリモートリポジトリのページ

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


まとめ

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

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

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

作者情報
ビールをこよなく愛するエンジニア見習い。 気になった居酒屋には一人でも入店します。 初めてのお店でも常連と間違われる不思議な現象に見舞われることがあります。 家では金麦派。