Visual Studio Code: Git を統合する方法

Visual Studio Code は、http://visualstudio.com から無料でダウンロードできる、新しい軽量のクロスプラットフォームのオープンソースコードエディターです。

Microsoftとの共同制作によるこの短期連載記事の第2回では、テクニカルエバンジェリストのSergii BaidachnyiがエディターのGit関連機能について詳しく解説します。（もし見逃した方は、第1回の記事「Visual Studio Code：注目の5つの機能」をご覧ください。）

Sergii はこのデモに Mac を使用していますが、VS Code は Windows および Linux コンピューターでも動作します。

ローカルGitリポジトリの操作

ローカルワークステーションに Git をインストールすることに問題がなければ、インストールが完了したら Visual Studio Code から直接 Git の操作を開始できます。

まず、現在のプロジェクト用のローカルリポジトリを初期化し、そこにファイルを追加する必要があります。Gitビューで「Gitリポジトリを初期化」をクリックするだけで簡単に実行できます。

このボタンをクリックすると、 Gitのinitコマンドが起動し、すべてのファイルが自動的に追加されます。これで、ローカルでGitを操作する準備が整いました。

ローカルでファイルを操作すると、すべての標準コマンドにアクセスできます。任意のファイルをクリックしてコンテキストメニューを起動すると、ファイルをステージに配置できます。

Git ビューの上部にあるメニューを使用して、変更をコミットしたり、Git 出力にアクセスしたりできます。

最後に、ステータスバーのブランチ名をクリックすると、Git ツールのコマンドラインが開きます。

コマンドラインを使用すると、git checkoutやgit branchなどのコマンドを実行できます。

どちらのコマンドも、パラメータはブランチ名のみです。Git checkout を使用すると、ファイルを新規または既存のブランチにチェックアウトでき、git branch を使用すると、VS Code を新規または既存のブランチに切り替えることができます。

Gitビューを使用すると、どのファイルが変更されたかを確認できます。ファイルをクリックすると、ファイルの現在のバージョンと以前のバージョンを確認できます。VS Codeでは、この例のようにすべての変更がハイライト表示されます。

プロバイダーとしての Visual Studio Team Service

Gitは単なるプラットフォームであり、プロバイダーが必要です。独自のインフラストラクチャを構築しない場合は、GitHubまたはVisual Studio Team Serviceをプロバイダーとして使用できます。ここではVisual Studio Team Serviceを使用しましょう。

Visual Studio Team Service では、アカウントごとに最大 5 人の開発者を無料でサポートし、プロジェクトをいくつでも作成できます。また、スプリント計画ツール、タスクボードとカンバンボード、バーチャルチームルームなどの追加機能もご利用いただけます。

もちろん、Visual Studio Team Service は Git をサポートしています。つまり、Visual Studio Code と Visual Studio Team Service を併用できます。無料の Visual Studio Team Service アカウントは http://visualstudio.com でアクティベートできます。

Visual Studio Team Service にアクセスできるようになると、プロジェクトを作成できます。ここで言う「プロジェクト」とは、アプリケーションのライフサイクルに関連するすべてのもの、つまりリポジトリ、チームルームなどを指します。Visual Studio Team Service は、Git を含む 2 種類のバージョン管理システムをサポートしていることに注意してください。

この場合は、Git を選択します。

プロジェクトを作成したら、Visual Studio Team Service 内でもう1つ作業が必要です。プロファイルを開き、「セキュリティ」タブで代替認証資格情報を適用してください。Visual Studio Team Service はデフォルトで Live ID を認証に使用しますが、Git ツールは Live ID をサポートしていません。

サーバー側でもう1つ必要なのは、Gitのリモートリポジトリとして使用するURLを取得することです。プロジェクトに移動して「CODE」タブを開くと、URLが表示されますので、次のステップのためにコピーしておいてください。

サーバー側はこれで完了です。次はMacの設定です。まず、Visual Studio Onlineで代替認証情報として定義したユーザー名をGitに渡す必要があります。

git config --global ユーザー名 [email protected]

Visual Studio Code 内のターミナルウィンドウで代替認証情報を作成できます。VS Code 内のターミナルウィンドウで作成すると、ワークスペースのコンテキストで開くため、より便利です。次のコマンドを実行する前に、Git が現在のワークスペースに関連付けられていることを確認してください。最後に、リモートリポジトリへの参照を追加する必要があります。

git リモートで origin を追加
https://canadaapps.visualstudio.com/DefaultCollection/_git/ObjectiveCProj</h

既存のローカルファイルをリモートリポジトリにプッシュします。

git プッシュ -u origin –all

これで完了です。Visual Studio Code を再度開くと、Git タブのほとんどのメニュー項目が有効になっていることがわかります。

コーディングを開始し、すべての変更を Visual Studio Team Service にコミットできます。

プロバイダーとしてのGitHub

GitHubアカウントをお持ちでない場合は、github.comで作成できます。GitHubアカウントを作成したら、新しいリポジトリを作成することも、既存のリポジトリを使用することもできます。下のスクリーンショットは、メインページの「新しいリポジトリ」ボタンを使って新しいリポジトリを作成する方法を示しています。

リポジトリが作成されたら、Git システムを初期化するために使用されるクローン用のリンク (下記参照) をコピーします。

次のステップは、GitHubをリモートリポジトリとして設定するためにターミナルウィンドウを開くことです。ターミナルウィンドウを開くには、エクスプローラーサイドバーで任意のファイルを選択してVS Codeのコンテキストメニューを使うことが多いです。エクスプローラーサイドバーにファイルがない場合でも、心配はいりません。VS Codeで直接ターミナルウィンドウを開くことができます。

これを行うには、「表示」メニュー項目または⇧⌘Pホットキーの組み合わせを使用してコマンドパレットをアクティブ化する必要があります。コマンドパレットを使用すると、フォルダのコンテキストでターミナルウィンドウを呼び出すことができます。

この場合、ターミナルウィンドウには作業フォルダのコンテキストがありません。そのため、手動で移動する必要があります。ターミナルウィンドウを使用して、コミット履歴に表示されるユーザー名をgitに関連付けることができます。

git config --global user.name sbaidachni

そして、先ほどコピーしたリンクを使用して、GitHub リポジトリをローカルフォルダーに複製します。

git クローン https://github.com/sbaidachni/testVSCode.git

操作が成功すると、次のような表示が出ます。

これで完了です。Visual Studio Code を使ってクローンしたフォルダを開くことができます。VS Code はリポジトリに関するすべての情報を自動的に読み取ります。これでコーディングを開始できます。

Gitとデプロイメント

最後に、GitとVisual Studio Codeの統合機能を利用してクラウドへのデプロイタスクを実装する方法について説明します。Visual Studio CodeはまだMicrosoft Azure（Microsoftのクラウド）と直接統合されていませんが、最小限の労力でプロジェクトをクラウドにデプロイできます。

Azureを使い始めるには、Azureアカウントが必要です。http://azure.microsoft.com で試用アカウントにサインアップするか、BizSpark、DreamSpark、MSDNサブスクリプションなどの他のオプションをご利用ください。アカウントを取得したら、https://portal.azure.com にある管理ポータルにアクセスしてください。

Azure の実験を始めるには、まず 1 つの HTML ファイルを含むプロジェクトを作成します。その後、Node.js または ASP.NET プロジェクトを作成できます。手順は同じです。

Azureポータルで作業を始める前に、Gitビューを開いてローカルGitリポジトリを初期化する必要があります。次に、https://portal.azure.com/ から管理ポータルを開き、新しいWebアプリケーションを作成します。

Web アプリテンプレートを使用すると、サイト用のホスティングストレージを簡単に作成し、PHP、Node.js、ASP.NET、その他の Web アプリケーションなど、ほぼすべてのものをそこにデプロイできます。

空の Web サイトがデプロイされたら、[設定] を開いてデプロイの構成を開始します。

ご覧のとおり、Microsoft Azure は複数のソースをサポートしています。OneDrive、Dropbox、ローカル Git リポジトリ、GitHub、Visual Studio Online からソースコードを取得できます。Visual Studio Code は現在、最後の 3 つのオプションのみをサポートしているため、メニューから任意のオプションを選択できます。

ここでは「ローカル Git リポジトリ」を選択します。Azure によってサイトの構成に Git クローン URL が追加されます。