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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Visual studio codeでGitHubを使うには、GitHubをPCにアカウント登録してインストールする必要があります。下のリンクから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」に公開鍵の中身を設定してください。これで公開鍵を設定で来たので、あとは相手に公開鍵を伝えておくことで、ログインしてもらえます。

Visual studio codeで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」を編集・保存すると、変更がプッシュされます。

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

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

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

「// 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」の場合はコマンドに入力する項目で使用します。
 

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