はじめに
Visual Studio Code（VS Code）は、Web開発で最も人気のあるエディターのひとつになっています。このような人気を博した理由は、多くの組み込み機能によります。Gitなどのソース管理統合もそのひとつです。VS Code でGitの機能を活用すると、ワークフローがより効率的で堅牢になります。
このチュートリアルでは、GitのVS Code でのソース管理統合について学習します。
前提条件
このチュートリアルには、次が必要です。
- Gitをインストールしたマシン。Gitのインストールについては、チュートリアルGit入門を参照してください。
- Visual Studio Code最新バージョンをインストールしたマシン。
ステップ1 — Source Controlタブを理解する
ソース管理統合を利用するために先ず、Git リポジトリとしてプロジェクトを初期化します。
Visual Studio Code を開き、組み込みターミナルにアクセスします。これを開くには、Linux、macOS、Windows でショートカットCTRL + ` キーを押します。
端末に新しいプロジェクトのディレクトリを作成し、そのディレクトリに移動します。
- mkdir git_test
- cd git_test
次に、Gitレポジトリを作成します。
- git init
Visual Studio Code でこれを行うには、左パネルのSource Controlタブ（分かれ道のように見えるアイコン） を開きます。
次に、Open Folder を選択します。
カレントディレクトリでファイルエクスプローラーが開きます。好みのプロジェクトディレクトリを選択し、Open をクリックします。
次に、Initialize Repository を選択します。
今ファイルシステムを確認すれば、.git ディレクトリがあるのがわかります。これを行うには、ターミナルでプロジェクトディレクトリに移動して、ディレクトリの中身をすべて表示します。
- ls -la
生成された.git ディレクトリが表示されます。
- Output.
- ..
- .git
repo が初期化されたので、index.html というファイルを追加します。
その後、Source Control panelにU字付きの新しいファイルが現れます。Uは、 untracked file（追跡対象外のファイル）の略で、 新しいファイル、変更されたファイル、 まだリポジトリにまだ追加されていないファイルのいずれかを意味します。
一覧のindex.htmlファイル横のプラスアイコン（＋）をクリックし、リポジトリでそのファイルを追跡します。
リポジトリに追加されると、ファイルの横にある文字がAに変化します。**A **はリポジトリに追加された新しいファイルを表します。
変更をコミットするには、Source Control panelの上部にある入力ボックスにコミットメッセージを入力します。次に、チェックアイコンをクリックしてコミットを実行します。
その後、保留中の変更がなくなったのがわかります。
次に、index.html ファイルに内容を少し加えます。
!キー、続けてTabキーを押すと、Emmetショートカットを使用してVS CodeのHTML5のスケルトン（雛形）を生成できます。そのまま進み、<body>にヘディング<h1>などを追加し、保存します。
Source Control panelで、ファイルが変更されたのがわかります。ファイル名の横にmodified（修正済）を表すM字インジケーターが表示されます。
練習として、この変更もコミットに進めます。
Source Control panelとのやりとりに慣れたので、ガターインジケーターの解釈に進みます。
ステップ2 — ガターインジケーター
このステップでは、VS codeで「ガター」と呼ばれるものを見てみましょう。ガター とは、行番号の右側の細い 領域を指します。
コード折りたたみ機能を使用したことがあれば、ガター に最大化アイコンと最小化アイコンがあります。
はじめに、<h1> タグ内の内容を変更するなど、index.html ファイルに少し変更を加えてみましょう。その後、変更した行のガターに青の縦線が表示されるのがわかります。青の縦線は、コードの修正行を表します。
今度は、コードの行を削除してみます。index.html ファイルの<body> セクションからどれか1行を削除します。ガター に赤の三角が表示されるのがわかります。赤の三角は、削除された行またはグループ行を表します。
最後に、<body> セクションの下部に新しいコード行を追加すると、緑の縦線が表示されます。緑の縦線は、コードの新規行を表します。
この例では、修正行、削除された行、新規行のガターインジケーターを示します。
ステップ3 — ファイルの差分を確認する（diff）
VS Codeには、ファイルにdiff を実行する機能もあります。通常、これを行うには、別のdiffツールをダウンロードする必要があるので、この組み込み機能は作業効率を上げます。
diff を表示するには、Source Control panelを開き、変更されたファイルをダブルクリックします。ここではindex.html ファイルをダブルクリックします。典型的なdiff ビューが表示されます。左側が変更前のバージョン、右側が現行バージョンになります。
この例では、現行バージョンで行が追加されたことを示しています。
ステップ4 — ブランチの作業
下部バーに移動すると、ブランチを作成して切り替えることができます。エディターの下部左側に、Source Controlアイコン（分かれ道のように見えるもの）と、大抵の場合**master**または現在の作業ブランチ名が表示されています。
ブランチを作成するには、そのブランチ 名をクリックします。ポップアップメニューが開き、新しいブランチが作成できます。
testという新しいブランチの作成に進みます。
ここで、index.html ファイルを変更します。これは新しいテストブランチですなどのテキストを追加して、新しいテストブランチにいることを表します。
これらの変更をテストブランチにコミットします。次に、左下のブランチ名をもう一度クリックして、masterブランチに戻ります。
masterブランチに切り替えると、テストブランチにコミットされたテキストこれは新しいテストブランチですが消えているのがわかります。
ステップ5 — リモートリポジトリの使用
このチュートリアルでは詳細に触れませんが、Source Control panelを介して、リモートリポジトリにアクセスして作業できます。リモートリポジトリを使用して作業した経験があれば、pull 、 sync 、 publish 、 stashなどの見慣れたコマンドがあるのがわかります。
ステップ6 — 便利な拡張機能のインストール
VS CodeにはGit用の多くの組み込み機能があるだけでなく、機能を高める人気の拡張機能もいくつか追加できます。
Git Blame
この拡張機能は、選択した行のGit Blame 情報をステータスバーで表示できます。
脅迫的な響きがありますが、心配無用です。Git Blame拡張機能は誰かの気を悪くさせるというより、実用性を高めるものです。コード変更について誰かを「blame」（非難する）というアイディアは、辱めることが目的ではなく、任意のコード部分について正しい質問相手を見つけることを目的としています。
スクリーンショットでわかるように、この拡張機能は、作業中のコードのカレント行に関して、ちょっとしたメッセージを下部ツールバーに表示します。
Git History
VS Code の内蔵機能を使用して、作業ファイルの変更確認、diffs の実行やブランチの管理ができますが、Git履歴については詳細情報が得られません。Git History拡張機能はこの問題を解決します。
下のイメージで見るように、この拡張機能を使用すると、ファイルの履歴、変更者、ブランチなどを完全に確認できます。下記のGit Historyウインドウをアクティブにするには、ファイルを右クリックしてGit: View File Historyを選択します。
さらに、ブランチとコミットを比較したり、コミットからブランチを作成したり、他にもさまざまなことができます。
Git Lens
GitLensは、Visual Studio Code に組み込まれたGit 機能をパワーアップしたものです。コードの作者はGit blameの注釈やCode Lensを介してひと目でわかるように視覚化され、Gitリポジトリへの移動や探索はシームレスに実行でき、強力な比較コマンドにより有益な見識が得られ、他にもさまざまなことができます。
Git Lens拡張機能はコミュニティで一番人気があり、最強でもあります。ほとんどの場合、先の2つの拡張機能の代用として使用できます。
「blame」情報については、作業中のカレント行の右側に、ちょっとしたメッセージが表示されます。そこには変更者、変更日時、関連するコミットメッセージが記されます。このメッセージ上にカーソルを置くと、コード変更そのものやタイムスタンプ他、追加情報がいくつかポップアップします。
Git History情報について、この拡張機能は多くの機能を備えています。多数のオプションに簡単にアクセスして、ファイル履歴を表示したり、diffで前のバージョンとの差分を比較したり、任意の改訂版を開いたりできます。これらのオプションを開くには、カレント行のコード編集者名、編集後の経過日数が記された下部ステータスバーのテキスト部分をクリックます。
次のウィンドウが開きます。
この拡張機能は機能が満載なので、すべてを把握するには時間がかかります。
まとめ
このチュートリアルでは、VS Code でのソース管理統合の使用方法を説明しました。VS Codeは、かつて別途ツールのダウンロードが必要だった多くの機能を処理できます。
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
author
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.