「Visual studio code」で「Git」を使う方法!

Visual studio code(VScode)でGitを使う方法は、初心者には難しいイメージがありますよね?しかし手順を丁寧にしていけば初心者でも使えます。ここではVisual studio code(VScode)でGitを使う方法を紹介していきます。

「Visual studio code」で「Git」を使う方法!のイメージ

目次

  1. 1Visual studio codeとは?
  2. マイクロソフトが開発したソースコードエディタ
  3. 2Gitとは?
  4. オフラインでも利用できるバージョン管理システム
  5. 3「Visual studio code」で「Git」を使う事前準備~インストール~
  6. インストールの手順
  7. 4「Visual studio code」で「Git」を使う事前準備~セッティング~
  8. セッティング/初期設定の手順
  9. 5「Visual studio code」で「Git」を使う基本知識~コマンド~
  10. 基本的なコマンド
  11. 6「Visual studio code」で「GitHub」を使う事前設定
  12. 設定の手順
  13. 7「Visual studio code」で「GitHub」を使う方法
  14. GitHubからのクローンを実行する手順
  15. 変更をプッシュする手順
  16. 8「Visual studio code」の統合ターミナルを使う方法
  17. 設定の変更手順
  18. 便利なショートカット
  19. 最後に
  20. 合わせて読みたい!プログラミングに関する記事一覧

Visual studio codeとは?

Visual studio code(VScode)とは、Microsoft製のソースコードエディタです。Electronフレームワーク上で構成されるのが特徴です。

Visual studio codeを使うことができるPCのOSはWindows、Mac、Linuxなので、幅広いPCユーザーに利用されています。

マイクロソフトが開発したソースコードエディタ

マイクロソフト社が開発したVisual studio codeは、ソースコードエディタです。ソースコードエディタとは、プログラマがプログラムのソースコードを編集するためのテキストエディタプログラムです。

ソースコードエディタは独立したアプリをPCにインストールして使う種類と、統合開発環境にもともと組み込まれている種類があります。ここで紹介するVisual studio codeは、アプリをPCにインストールして使う種類です。

Visual studio codeは2015年に最初のバージョンが発表された新しいソースコードエディタで、毎月のようにバージョンが更新されているのが特徴です。

Visual Studio Code – コード エディター | Microsoft Azure
Git 公式サイト

Gitとは?

Visual studio code(VScode)を使う上で必要になるのがGitの知識です。ここからはVisual studio codeを使うのに必要なGitとはどのようなものか、どのように使うのかを説明していきます。

オフラインでも利用できるバージョン管理システム

Gitとはプログラムのソースコードを変更した履歴を記録したり、追跡したりするためのバージョン管理システムです。分散型バージョン管理システムという形式なのが特徴で、もともとLinuxが開発したシステムでしたが、現在はWindowsなどでも使用できます。

Visual studio codeで編集したプログラムのソースコードを、Gitを使って管理するという関係性です。

GitとGitHubの違い

GitとGitHubの関係性は、メールシステムとメールアプリのようなものです。Gitを利用するのに、GiHubを使う方法や他のツールを使う方法があります。
 

Git GitHub
分散バージョン管理システム 開発者を支援するWebサービス
ソースコードの履歴を管理する
リポジトリが開発者ごとに分割できる
ローカルリポジトリを採用
クラウド上でGitを用いたバージョン管理
ユーザー数は世界に1000万人以上
ネット環境なしでバージョン管理 クラウド上で操作するのでネット環境が必要

Git自体はネット環境なしでも使うことができますが、GitHubはネット環境がないと使えないのが特徴です。GitでVisual studio codeでのソースコード編集を管理します。

「Visual studio code」で「Git」を使う事前準備~インストール~

Visual studio code(VScode)のインストール方法とは、ガイダンスに沿って進めていくだけなので、知識がない人でもできます。ここからは、Visual studio codeをインストールする方法を説明していきます。

インストールの手順

Visual studio codeの公式サイト

PCにインストールする順番はVisual studio codeとGit、どちらが先でも問題ありません。ここでは、まずVisual studio codeをダウンロード/インストールします。公式サイトへアクセスして、「今すぐ無料でダウンロードする」をクリックします。

Visual studio codeの選択画面

Visual studio codeのダウンロード画面になったら、PCのOS項目から「ユーザーインストーラー」という項目で、PCのビットに合っているバージョンをクリックします。

Visual studio codeのファイルバー

PCにVisual studio codeのダウンロードがはじまるので、終わったらファイルバーをクリックしてインストーラーを起動してください。

利用規約の同意画面

Visual studio codeの利用規約画面が表示されるので、「同意する」という項目にあるチェックアイコンをオンにしましょう。

利用規約の次へアイコン

Visual studio codeの利用規約に同意したら「次へ」アイコンをクリックしてください。

インストール先の指定画面

Visual studio codeのインストール先を設定する画面になるので、「次へ」アイコンをクリックします。

ショートカットの作成画面

セットアップをするときにPCのスタートメニューにショートカットを作成することが説明される画面になるので、「次へ」をクリックします。

Visual studio codeのインストール画面

Visual studio codeをPCにインストールする画面になるので、画面右下にある「インストール」をクリックします。

Visual studio codeのインストール中画面

Visual studio codeをPCにインストールしている最中の画面になるので、処理が終わるまで待ちます。

Visual studio codeのインストール完了

Visual studio codeのインストールが完了したら、自動で画面が切り替わるので「完了」アイコンをクリックしましょう。これで、VScodeをPCにダウンロード/インストールする手順は終わりです。

Gitのインストール手順

Gitのダウンロード画面

次にGitをPCにダウンロード/インストールしていきます。Gitの公式サイトへアクセスして、画面右にある「Windows用2.23.0をダウンロード」というアイコンをクリックしましょう。

Gitのダウンロード中画面

GitのファイルをPCにダウンロードしている画面になるので、処理が終わるまで待ちます。

Gitのファイルバー

Gitのファイルをダウンロードし終わったら、PC画面左下のファイルバーをクリックしましょう。

Gitのの利用規約画面

Gitのインストーラーが起動して、利用規約の画面になるので「Next」アイコンをクリックしてください。

Gitのフォルダ選択画面

次にGitをインストールする先になるフォルダを選ぶ画面になります。自動でGit用のフォルダが作成されて、Windowsの場合はCドライブに保存されるのでこれで問題なければ「Next」をクリックします。

フォルダの確定画面

本当にここにこのフォルダでGitをインストールするか確認の画面になるので、「はい」をクリックしましょう。

コンポーネントの設定画面

次にコンポーネントを選択する画面になるので、自動で選択されているままの状態で「Next」をクリックします。

メニューフォルダの選択画面

次にGitのメニューフォルダを作成する画面になるので、「Next」をここでもクリックしてください。

Gitのインストーラー画面

次の画面もデフォルトのままで問題ないので、「Next」をクリックして次に進みます。

Gitのコマント設定画面

Gitのコマンドを設定する画面になるので、デフォルトで選択されている項目のままで「Next」をクリックします。

Gitのライブラリ設定画面

次にGitのライブラリを設定する画面になりますが、ここでもデフォルトのままで「Next」をクリックします。

Gitのスタイル設定画面

次の画面ではWindowsのシステムにコミットするかどうかスタイルを設定しますが、こちらもデフォルトのままで「Next」をクリックしましょう。

Git Bashの設定画面

次にぎt Bashなどの設定画面になるのですが、この画面でもデフォルトのままで「Next」をクリックします。

リンクやマネージャーの設定画面

次にGitのリンクやマネージャーを設定する画面になりますが、この画面もデフォルトのままで問題ないので「Next」アイコンをクリックします。

インストールアイコンの画面

これまでの設定を済ませたらGitをPCにインストールする画面になるので、画面右下に「Install」アイコンをクリックします。

Gitのインストール中画面

Gitのインストール中画面に切り替わるので、インストールが完了するまで待ちましょう。

Gitのインストール完了画面

Gitのインストールが完了したら、自動で画面が切り替わるので「Finish」アイコンをクリックします。ここまででGitをPCにダウンロード/インストールする手順は完了です。

Thumb 【Windows】Visual Studio Codeのインストール方法!
Visual Studio Code(VSCode)のインストール方法を詳しく解説します。V...

「Visual studio code」で「Git」を使う事前準備~セッティング~

Visual studio code(VScode)とGitをPCにダウンロード/インストールし終わったら、Visual studio codeでセッティングをしていきます。ここからはVisual studio codeのアカウント登録方法を紹介していきます。

セッティング/初期設定の手順

Gitアイコンの画面

Gitでアカウント登録する手順は、Visual studio codeのメイン画面で画面左端の上から3番目のGitアイコンをクリックします。

Git画面になったら「$ git config --global user.name 'hoge'(改行)$ git config --global user.email 'xxxx@example.com'」というコマンドを入力しましょう。Gitはアカウント登録もコマンドで行います

「Visual studio code」で「Git」を使う基本知識~コマンド~

Visual studio codeのGitにアカウント登録ができたら、今度は基本的なコマンドを入力していきます。基本的にGitのコマンドもGitHubのコマンドも変更できないので、指定のコマンドを覚えましょう

基本的なコマンド

Gitに登録されている基本的なコマンドは覚えておかないと、Visual studio codeを活用しきれません。メモをしてデスク周りに貼るなどして必要な時に活用できるようにしておきましょう。

init

initとは、Gitのリポジトリを初期化できるコマンドです。initは「$ git init」と入力すると、Visual studio codeのGit画面上部に初期化アイコンが表示されます。

add

addとは、変更したものをインデックスに保存できるコマンドです。「$ git add hoge.txt」と入力すると、Git画面のソースに変更/追加したファイルが表示されます。保存する際はクローンを作成しません。

commit

commitとは、インデックスに追加されたファイルをコミットします。「$ git commit -m "コメント"」と入力すると、ソース管理にコマンドを入力する項目が表示されるようになります。

status

statusとは、前と比べてどこが変更されてるか確かめることができます。「$ git status -s」と入力すると、一覧で今までなかった新しいファイルの項目に「u」と表示されるようになります。これでクローンが作成された部分や、編集された部分が分かります。

log

logとは、コミット履歴を確認するコマンドです。「$ git log --graph」と入力するとコミット履歴をツリー状で確認できて、履歴の構成がよく分かります。Visual studio codeに拡張機能を入れると、快適に使えます。

branch/checkout

branch/checkoutとは、ブランチに関するコマンドです。ブランチを編集・確認・削除・切り替えできます。

「$ git branch ブランチ名 」でブランチ新規作成、「$ git branch 」でブランチ確認、「$ git branch -d ブランチ名」で ブランチ削除、「$ git checkout ブランチ名」でブランチ切り替えできます。

ちなみにブランチのクローンを作成するコマンドはありません。

remote

remoteとは、リモートリポジトリを追加できます。「$ git remote add 名前 リモートURL (改行)$ git remote remove 名前」と入力しましょう。

push/pull

push/pullとは、Gitの変更内容をリモートリポジトリに反映させたり、ローカルのGitに反映させたりするコマンドです。「$ git push 」か「$ git pull」と入力しましょう。

diff

diffとは、どのように編集したかが確認できるコマンドです。「$ git diff」と入力しましょう。これでクローンを作成した部分や、削除した部分が分かります。

clone

cloneとは、リモートリポジトリのクローンをローカルに作成できます。「$ git clone リモートURL」と入力すると、画面に入力欄が出てくるので、「clone(クローン)」と記入するとクローンを作成できます。

blame

blameとは、指定した部分がいつ変更されたのか確認できるコマンドです。「$ git blame ファイル名」と入力しますが、このコマンドも拡張機能をVisual studio codeに入れる必要があります。

「Visual studio code」で「GitHub」を使う事前設定

GitHubをVisual studio codeで使うためには、アカウント登録などの設定をしておく必要があります。ここからはGitHubを使うためのアカウント登録方法を紹介していきます。

設定の手順

Visual studio codeでGitHubを使うには、GitHubをPCにアカウント登録してインストールする必要があります。下のリンクからGitHubの公式サイトへアクセスして、アカウント登録しましょう。

アカウント設定を行う

GitHubのアカウント登録画面

GitHubのアカウント登録画面で、ユーザー名、Eメール、パスワードを設定して「GitHubにサインアップする」をクリックしてアカウント登録しましょう。

アカウント登録をしたら、画面右下にある新しいリポジトリを作成する「New repository」をクリックします。次の画面で「Create repository」をクリックします。次に公開鍵を登録します。

公開鍵の登録を行う

次にGitHubの公開鍵の設定をしていきます。公開鍵とは、GitHubにオンラインでログインできるようになるために公開したい相手へ送る鍵のことです。公開鍵はVisual studio codeとGitHub両方で設定します。

まずVisual studio codeで「$cd ~/.ssh」と入力して、公開鍵を設定するフォルダへ移動します。次に「$ssh-keygen -t rsa」と入力すれば公開鍵の設定準備は完了です。

そしてGitHubにログインして「Add SSH key」をクリックし、「title」に公開鍵の名前を「Key」に公開鍵の中身を設定してください。これで公開鍵を設定で来たので、あとは相手に公開鍵を伝えておくことで、ログインしてもらえます。

The world’s leading software development platform · GitHub
Thumb【Slack】GitHubの通知を受け取る方法!連携方法を解説!
SlackでGitHubから通知を受け取る方法や連携方法をご存知でしょうか?GitHubとは...

「Visual studio code」で「GitHub」を使う方法

Visual studio codeでGitHubを使う手順には統合ターミナルの画面でクローンを実行する方法や、変更をプッシュする方法があります。

GitHubからのクローンを実行する手順

Visual studio codeで「Ctrl+@」のショートカットキーを入力して、統合ターミナルを開きます。統合ターミナルで以下のコマンドを入力します。コマンドは(数字)の部分で改行します。

(1)PS C:\Users\username> cd C:\Temp\(2)PS C:\Temp> git clone git@github.com:azriton/test.git
(3)Cloning into 'test'...(4)The authenticity of host 'github.com (192.30.255.113)' can't be established.(5)RSA key fingerprint is HA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
(6)Are you sure you want to continue connecting (yes/no)? yes(7)Warning: Permanently added 'github.com,192.30.255.113' (RSA) to the list of known hosts.(8)remote: Counting objects: 3, done
(9)remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0(10)Receiving objects: 100% (3/3), done. (11)PS C:\Temp>

次にクローンを作成したリポジトリの統合ターミナルで「PS C:\Temp\test> code .」というコマンドを入力してください。統合ターミナルの画面から、クローンを作成したリポジトリの画面に切り替わります。

統合ターミナルで入力するコマンドはコピー&ペーストすると、入力ミスを防げます。統合ターミナルの画面での操作は主にコマンド入力のみです。

変更をプッシュする手順

変更をプッシュする手順は「README.md」をクリックし、コマンドを入力する項目に「line s」と入力して、「改行コードの変更」を選んだら「LF」と入力しましょう。「README.md」を編集・保存すると、変更がプッシュされます。

変更をプッシュする手順では統合ターミナルの画面を表示する必要はありません。統合ターミナルの画面はクローンの作成など複雑なコマンドを入力するときに出します。

Thumb 【Visual Studio Code】使い方/インストール方法を解説!
Visual Studio Codeの使い方・インストール方法を解説します。軽量テキストエデ...

「Visual studio code」の統合ターミナルを使う方法

クローンを作成したリポジトリを実行する以外でも、統合ターミナルを使うことがあります。ここからは統合ターミナルの詳しい使い方を説明していきます。

設定の変更手順

デフォルトの設定を変更したい場合は、統合ターミナルに以下のコマンドを入力します。

「// Windows標準のコマンドライン(改行)// "terminal.integrated.shell.windows": (改行)"C:\\Windows\\sysnative\\cmd.exe"// PowerShell(改行)// "terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\WindowsPowerShell\\v1.0\\powershell.exe"(改行)// Git Bash(改行)// "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"(改行)// Bash on Ubuntu(改行)//"terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\bash.exe"」

便利なショートカット

統合ターミナルで使えるショートカットキーは10種類以上です。「>t r s」の場合はコマンドに入力する項目で使用します。
 

Ctrl + @ ターミナルの表示/非表示
Ctrl + Shift + @ 新しいターミナルを開く
Ctrl + K ターミナルのクリア
Ctrl + Up 1行ずつ上にスクロール
Ctrl + Down 1行ずつ下にスクロール
Ctrl + PageUp 1画面分ずつ上にスクロール

Ctrl + PageDown 1画面分ずつ下にスクロール
Ctrl + Home ターミナルの先頭にスクロール
Ctrl + End ターミナルの最後尾にスクロール
コマンドパレットで、「>t r s」 選択中の文字列をコピーしてターミナルで実行
Ctrl + c Windowsは、コピーにShiftキーは必要なし
Ctrl + v Windowsは、ペーストにShiftキーは必要なし

最後に

いかがでしたか?Visual studio codeでGitHubを使って、PCを今以上に活用しましょう!

合わせて読みたい!プログラミングに関する記事一覧

ThumbProgateのスマホアプリを紹介!スマホでプログラミング学習ができる!
プログラミング学習のProgateはWeb版に加えてスマホアプリでも人気があります。Prog...
Thumbプログラミング初心者におすすめのMacを紹介!
皆さんはプログラミング初心者でしょうか。今ではとても流行っているプログラミングですが、プログ...
Thumb【Google】プログラミング学習ツール「Grasshopper」Webアプリを公開!
Googleが初心者向けのプログラミング学習ツール「Grasshopper」デスクトップ版を...
Thumb【LINE】プログラミング学習に参入「LINE entry」を開始!
LINEでは、2020年度からの小学校プログラミング学習必修化の流れを考慮しプログラミング教...

関連するまとめ

Original
この記事のライター
ネロ
不定期で記事を執筆していきます。犬と料理が好きです。よろしくお願いします!