VSCodeでGit・GitHubを使う方法を解説する【初心者向き】

  • PR
  • WEB制作
VSCodeでGit・GitHubを使う方法を解説する【初心者向き】

人気のテキストエディター「Visual Studio Code(ビジュアル・スタジオ・コード)」における、Gitの基本操作からGitHubとの連携方法について詳しく解説してゆきます。



▼この記事が向いている方

  • 初めてVS CodeでGitを利用する方
  • VS CodeにおけるGitの操作方法が知りたい方
  • VS CodeとGitHubの連携方法が知りたい方



このうえで今回は、次の流れにしたがって、具体的な作業方法を徹底解説してゆきます。



▼今回の作業の流れ

  1. VS Codeでローカルリポジトリを作成する
  2. ローカルリポジトリにファイルを追加する
  3. ローカルリポジトリをGitHubと連携させる
  4. リモートリポジトリの変更をコミット・プッシュする
作業を進めれば、約1時間ほどでVS Code・GitHubを利用したプログラミングの作業環境が構築できます。

また、ある程度作業に慣れている方、部分的な作業内容を知りたい方でも、適度に読み飛ばしながら作業をすすめて頂ける構成となっています。

これからVS CodeやGitHubを使用する方は、ぜひチェックして行って下さいね!

Webサイトの制作で使用するツール・ソフトの全体的な情報が知りたいという方は「Web制作で使うツール・ソフトを徹底解説する」の記事からご覧ください。

▼この記事を書いたひと

フリーランスみやしも(@miyashimo_blog)です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

作業の準備

作業の準備

作業を進めるためにも、先ずはあらかじめ準備が必要なことについて解説してゆきます。

Gitをインストールする

今回の作業には、バージョン管理ソフトのGitがインストールされている事が前提となります。以下のサイトから取得したインストーラーを使って、Gitをインストールする事ができます。



▼Windows

Git for Windows

※クリックすると別ウィンドウで開きます


▼Mac

Download for macOS

※クリックすると別ウィンドウで開きます

Gitの基本設定を済ませておく

初めてGitを使用される方は、次のコマンドを実行してGitの基本設定を済ませておきましょう。

すでにGitを利用している方には不要な作業となります

▼実行コマンド

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



上記コマンドは、Gitに自分の名前とメールアドレスを設定するという意味になります。 (※コマンドを実行する際は、上記の{自分の名前}と{メールアドレス}を自分の内容に置きかえて下さい)



Gitでは、コミットを行う際に『誰がコミットしたのか?』の情報を持たせる必要があり、 このためにも、Gitに名前とメールアドレスを設定しておく必要があります。

『--global』はそのPCで使われるGit全体の設定を行うオプションです。 オプションを--localに変えればリポジトリ毎に設定することも出来ますが、毎回の手間をなく意味でも、基本的には--globalを使用しておくのがおススメです。

VSCodeをインストールする

今回の作業ではVisual Studio Code(ビジュアル・スタジオ・コード)を使用して作業を進めてゆきます。VSCodeについて知りたい方、インストール方法が知りたい方は、次の記事を参考に導入を進めてみてください。

隠しファイルを見える様にしておく

Gitが生成するリポジトリはただのフォルダやファイルですが、これらは隠しフォルダ・ファイルになっているため、あらかじめ見える様にしておく必要があります。



▼Windows10の場合

エクスプローラーを開き、以下の順番に操作します。

表示タブ⇒『ファイル名拡張子』と『隠しファイル』にチェック

▼MacOSの場合

以下のショートカットで表示・非表示を切り替えられます。

『command + shift + .』
以上で、作業の準備は終わりです。つぎの章からは、実際の作業手順について解説してゆきます!

ローカルリポジトリを作成する

ローカルリポジトリを作成する

それでは実際の作業を開始しましょう。まずはGitのローカルリポジトリの作成から行います。

フォルダを作成してVSCodeで開く

まずは任意の場所でフォルダーを作成して、そのフォルダーをVS Codeから開きます。

今回は『git-sample』というフォルダ名を例に解説をすすめてゆきます。

フォルダーを作成したら、そのフォルダーをVS Codeから開きます。


VS Codeでターミナルを開く方法

VS Codeでフォルダを開くには、主につぎの2通りの方法があります。



▼VSCodeでフォルダを開く方法

  • フォルダ内で右クリックメニューを開いてから『Codeで開く』を選択する
  • あらかじめVSCodeを開いた状態で『ファイル⇒フォルダーを開く』を選択する
VS Codeでフォルダを開く方法①
VSCodeでフォルダを開く方法 ①
VS Codeでフォルダを開く方法②
VSCodeでフォルダを開く方法 ②

VS Codeでフォルダを開くと次のような状態になります。

VS Codeでフォルダを開いた状態
VS Codeでフォルダを開いた状態

VS Code左側の『エクスプローラー』に、開いたフォルダ名が表示されていることが分かります。



空っぽのフォルダを開いたので、現時点でここには何も表示されていませんが、フォルダ内にファイルやフォルダを追加してゆくと、それらが一覧になって表示される様になります。

今回の作業では『エクスプローラー』も使用するので、初めての方は存在を覚えておきましょう。

ローカルリポジトリとして初期化する

VS Codeでフォルダーを開いたら、そのフォルダーをGitの『ローカルリポジトリ』として初期化します。



またここからは、コマンドラインによる作業も行います。

コマンドラインによる操作は、コマンドプロンプト(Win)やターミナル(Mac)を使用した方法が一般的ですが、今回はVS Codeの『ターミナル』機能を使った作業方法を紹介します。

VS Codeでターミナルを開く方法

VS Codeでターミナルを開くには、メニューから『ターミナル⇒新しいターミナル』を選択します。

VS Codeでターミナルを開く方法
VS Codeでターミナルを開く方法

ターミナルの初期フォルダは、VS Codeで開いたフォルダと同じ場所になっているので、そのままそのフォルダに対する操作が行える様になっています。

Gitコマンドを実行する

ターミナルを開いたら続けてコマンドを実行して、ローカルリポジトリの初期化を行います。



▼実行コマンド

git init



コマンドを実行すると、次のようなメッセージの表示とともにローカルリポジトリの初期化が完了します。

Initialized empty Git repository in I:/git-sample/.git/

また、この状態でフォルダーを見ると、次のように『.git』というフォルダーが作成されている事も確認できます。

Git初期化(フォルダ)
ローカルリポジトリのフォルダ

この『.git』という隠しフォルダが、『git-sample』というフォルダのローカルリポジトリになります。

ローカルリポジトリにファイルを追加する

ローカルリポジトリにファイルを追加する

作成したGitのローカルリポジトリにファイルを追加する方法について解説を行います。

新規ファイルの追加方法

VSCodeでフォルダーを開いた状態で、そのフォルダ内に新しくファイルを追加します。

追加するファイルは何でも大丈夫ですが、今回は『index.html』というファイルを例に作業をすすめます。

VSCodeの画面左側にあるフォルダ名にマウスカーソルを当てると、いくつかのツールチップが表示されますが、この内の『新しいファイル』と書かれたアイコンを選択すると、新しいファイルが作成できます。



ファイルの作成が出来ると次のようになります。

VSCodeでファイルを追加・保存する_1
VSCodeで新しいファイルを追加した状態

ローカルリポジトリに「ステージング」する

続けて、ローカルリポジトリに作成したファイルのステージングを行います。



VSCodeでステージングを行うためにも、まずは左側の『ソース管理』アイコンをクリックしてGitのメニューを開きます。

VS Codeのソース管理アイコン

ちなみにVSCodeでファイルの作成や編集を行うと、このアイコン上にはこれらのファイル数が表示される様になっています。

今回は『index.html』というファイルを一つだけ追加したので、その数を表す『1』が表示されます。

アイコンをクリックすると左側のメニューの内容が変わりますが、VSCodeではここからGitに関する各種操作を行うことが出来る様になっています。

VSCodeでGitメニューを開いた状態
VSCodeでGitメニューを開いた状態

ステージングを行うには、このメニューを開いた状態で、ファイル名の右側にある『+』アイコンを押します。

VSCodeでGitのステージング操作を行う_1
VSCodeでGitのステージング操作を行う①

すると『+』アイコンを押したファイルがステージされている変更というエリアに移動され、ステージングが行われます。

VSCodeでGitのステージング操作を行う_2
VSCodeでGitのステージング操作を行う②

ローカルリポジトリに「コミット」する

ファイルのステージングを行ったら、最後に『コミット』を行いましょう。VSCodeでコミットを行うには、つぎの流れで作業を行います。



▼コミット作業の流れ

  1. 『Message』と書かれた所にコメントを記入する
  2. メニュー上部にある『コミット』のアイコンを押す



また、今回は例として『first commit』とだけ入力してコミットを行います。

VSCodeでGitのコミット操作を行う_1
VSCodeでGitのコミット操作を行う

上記の操作を行うとコミットが行われ、追加したファイルや、既存ファイルの編集内容など、ローカルリポジトリー対して行った変更が反映されます。



またここで、記事の冒頭でも解説した『Gitの基本設定』が出来ていないと、次の様なエラーが発生しますのでご注意ください。

Gitの'user.name'と'user.email'を構成していることを確認してください。

GitHubと連携させる

GitHub

ここからは、VS CodeとGitHubを連携させて、GitHubのリモートリポジトリにプッシュ(アップロード)する方法について解説してゆきます。



▼GitHubと連携させる手順

  1. GitHubでリモートリポジトリを作成する
  2. ローカルリポジトリをリモートリポジトリに紐づける
  3. ローカルリポジトリからリモートリポジトリにプッシュする

GitHubでリモートリポジトリを作成する

まずはGitHubにログインした状態で、次の様に操作を行い、新規リポジトリを作成します。



▼GitHubのリポジトリ作成手順

  1. GitHub画面左上の『New』ボタンを押す
  2. リポジトリの名前を入力して『Create Repository』を押す


まずは画面左上にある『New』ボタンを押してリポジトリの作成画面を開きましょう。

GitHubで新規リポジトリを作成する方法_1
GitHubで新規リポジトリを作成する方法①

ここで入力する詳しい情報は省きますが、今回は、共有されている人しか見る事ができない『プライベートリポジトリ』として、リポジトリを作成します。



このためにも作成するリポジトリの名前と、画面の真中にある『Private』のラジオボタンを選択した状態で『Create Repository』のボタンを押ます。

また、リポジトリの作成名は今回の作業例に合わせて『git-sample』とします。
GitHubで新規リポジトリを作成する方法_2
GitHubで新規リポジトリを作成する方法②

リポジトリの作成が完了すると次の様な画面に移動しますが、ここでは『…or push an existing repository from the command line』と書かれたところにあるコマンドを控えておきます。

GitHubリモートリポジトリ作成_3
GitHubで新規リポジトリを作成する方法③
今回の場合は、PCに作成したローカルリポジトリをGitHubにリモートリポジトリとして登録する..といった流れで作業を進めるために上記のコマンドを使用します。

リモートリポジトリに紐づける

ローカルリポジトリとGitHubのリモートリポジトリを紐づける作業を行います。



ここで再びVSCodeのターミナルを開き、先ほどの作業で取得したコマンドを順番に実行してゆく形で作業をすすめます。



▼実行コマンド(1行目)

git remote add origin https://github.com/{ユーザー名}/{リポジトリ名}.git
コマンドの内容は、GitHubのユーザーや作成したリポジトリによって変わるため、必ず自分が作業を行った画面からコピペして実行しましょう。
VSCodeでGitHubから取得したコマンドを実行する

1行目は、PC上に作成したローカルリポジトリとGitHubで作成したリモートリポジトリの紐づけを意味するコマンドで、コマンドの実行後はローカルリポジトリ・リモートリポジトリ間で相互的にアップロード/ダウンロードできる状態になります。



ここでは念のために次のコマンドも実行して、実際にリモートリポジトリに紐づいたかの確認も行いましょう。



▼実行コマンド

git remote -v



つぎのような結果が表示されれば成功です。



origin  https://github.com/{ユーザー名}/{リポジトリ名}.git (fetch)
origin  https://github.com/{ユーザー名}/{リポジトリ名}.git (push) 

リモートリポジトリにプッシュする

続けて2行目・3行目のコマンドを実行してゆきます。



▼実行コマンド(2行目・3行目)

git branch -M main
git push -u origin main



2行目のコマンドはmainというブランチを作成しており、3行目のコマンドでは作成したmainブランチに対するプッシュ操作を行っています。



コマンドを実行すると次のような結果が表示されます。

Enumerating objects: 3, done. 
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 212 bytes | 212.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/{ユーザー名}/{リポジトリ名}.git
* [new branch] master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

GitHubに反映されたかを確認する

プッシュを行った結果がGitHubに反映されたかの確認もしてみます。さきほど作業を行ったGitHubの画面左上にある『Code<>』と書かれたメニューを選択しましょう。



今までの作業が上手くいっていると、この画面でローカルリポジトリでコミットした『index.html』のファイルが表示されていることが確認できます。

GitHubのリポジトリの確認
GitHubの画面でプッシュされたことを確認する

ここまで確認ができれば、GitHubを連携させるための作業は全て完了です。

以降はVSCodeから、ローカルリポジトリへのコミット・リモートリポジトリへのプッシュといった、Gitを使用した一連の作業が可能になります。

変更をコミット・プッシュする

おさらいとなりますが、VSCode上でGitに関する操作や、GitHubとの連携を確認するため、以下の順番で作業を進めてゆきましょう。



  1. VSCode上でファイルを編集・追加する
  2. 変更のステージング・コミットする
  3. 変更をリモートリポジトリにプッシュする

VSCodeでファイルを編集・追加する

VSCode上でファイルの編集・追加の作業を行います。



ここでは、最初に作成した『index.html』のファイルを編集する、『index2.html』というファイルを新たに追加する、という形でそれぞれ作業を行います。 (※ファイルを編集する際の記入内容は何でもOKです)



作業を行うと、VSCodeのエクスプローラー上では次のような表示状態となります。

ファイルの編集・追加をそれぞれ行った状態
ファイルの編集・追加をそれぞれ行った状態

ファイル名の右側には『M』や『U』といった文字が表示されていますが、これらはGitリポジトリ上でのステータスを表しており、それぞれ次の様な意味あいになります。



  • M:Modified(変更された)
  • U:Untracked(追跡対象外)

変更のステージング・コミットを行う

ローカルリポジトリへのステージング・コミットを行います。



ここの作業方法は先ほどに紹介した方法と同じやり方です。VSCode上でふたたび『ソース管理』のメニューを開き、ステージング・コミットと順番に作業してゆきましょう。



また今回は2回目のコミットなので、コメントには『second commit』としておきます。

変更のステージング・コミットを行う
変更のステージング・コミットを行う

変更のステージング・コミットを行うと、VSCodeの状態は次の様になります。

変更のステージング・コミットを行った状態
変更のステージング・コミットを行った状態

変更をリモートリポジトリにプッシュする

ローカルリポジトリの変更内容を、リモートリポジトリに対してプッシュします。

変更をリモートリポジトリにプッシュする
変更をリモートリポジトリにプッシュする

変更内容がリモートリポジトリに反映されたかを確認するために、GitHubの画面も確認しておきましょう。

変更をGitHubで確認する

リモートリポジトリに対するプッシュが上手くいっていると上記の様な結果となります。以上で、変更をコミット・プッシュする方法の解説は終わりです。

VS CodeとGitHubを連携した作業環境ではもっとも行う作業です。繰り返し行い、マスターしよう!

この記事のまとめ

今回は、人気のテキストエディター『VS Code(Visual Studio Code)』における、Git・GitHubの使用方法をくわしく解説してきました。



VS Codeには『ソース管理』や『ターミナル』といった、Gitの利用に必要な機能があらかじめ含まれているため、設定もかんたんです。



また、今回紹介した方法なら、Git関連の作業をVS Codeひとつに集約でき、複数のツールを組み合わせて作業を行う必要もなくなるため【ツールに集中できる=作業効率があがる】といったメリットも発生します。



多くのプログラミング作業で有効な利用方法だと思いますので、ぜひ試してみて下さいね。

今回は以上となります。最後までお読みいただき、ありがとうございました!