特集
» 2015年07月21日 05時00分 UPDATE

特集:Visual Studio Code早分かりガイド:Visual Studio CodeでGitを利用する (1/4)

Visual Studio CodeでGitHub、Visual Studio Onlineなどのサービスを利用して、ソースコード管理を行うための基本を説明する。

[かわさきしんじ,Insider.NET編集部]
特集:Visual Studio Code早分かりガイド
Insider.NET

               

「特集:Visual Studio Code早分かりガイド」のインデックス

連載目次

 前回はVisual Studio Code(以下、VS Code)の基本的な使い方を見た。VS 2015がRTMしようという日になぜVS Codeの記事なのかはさておき、今回はVS CodeからGitを使う方法について見てみることにしよう(ちなみに今回は、いつも通りにVimで原稿を書いている)。なお、本稿はVS Code 0.5.0をベースに書かれている。デバッグの手順については次回に譲ることにする。

VS CodeでGitを活用する:[GIT]バー

 VS Codeは標準の状態でGitをサポートしている。ただし、事前にGitをインストールしていることが前提となる。インストールしていない場合には、サイドバーを[GIT]バーに変更すると、次の画面のようなメッセージが表示されるので、Gitのインストール/設定を行っておこう。

Gitがインストールされていない場合の[GIT]バー Gitがインストールされていない場合の[GIT]バー
画面はWindows版のVS Codeのもの。

 Gitがインストールされていれば、ローカルリポジトリに対するコミットなどが可能になる。ここでは、Node.js上で動作するWebアプリ用フレームワークであるExpressとそのスキャフォールディングツールであるexpress-generatorを利用して、JavaScriptベースのWebアプリのひな型を作成したものとして、これをGitで操作してみよう(Express/express-generatorのインストールやひな型の生成については、本稿では省略する。これらの知識については「Node.jsのMVCフレームワーク「Express」の基礎知識とインストール」などを参考にされたい)。

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

 express-generatorを利用して、アプリのひな型を生成し、VS Codeでそのプロジェクトのフォルダーを開くと次のようになる。

express-generatorを利用して作成したJavaScriptベースのWebアプリプロジェクトをVS Codeで開いたところ express-generatorを利用して作成したJavaScriptベースのWebアプリプロジェクトをVS Codeで開いたところ

 この状態でビューバーの下から2番目にある[Git]ボタンをクリックすると、サイドバーに[GIT]バーが表示される。

初期化前の[GIT]バー 初期化前の[GIT]バー

 まずは[Initialize git repository]ボタンをクリックして、Gitの初期化を行う。初期化が終わると、ローカルリポジトリが作成され、[GIT]バーの表示が次の画面のように変わる。

Git初期化後の[GIT]バー Git初期化後の[GIT]バー
ステータスバーの[master]の右側には変更があることを示す「*」が表示されている。

 ビューバーの[Git]ボタンにはコミットされていない変更の数が表示され、[GIT]バーには変更のあったファイルがズラリと並んで表示されている。プロジェクトを作成した直後なので、上の画面では大量のファイルが表示されている。ファイル名の左側に表示されているアイコンは、そのファイルの状態を示している。ここでは[U]と表示されているが、これは未追跡状態(Untracked)であることを意味している。「このアイコンの意味って何だっけ?」というときには、アイコンの上にマウスカーソルを合わせると、その意味がポップアップ表示される。

コミット

 ローカルリポジトリへコミットするには、上部のテキストボックスにコミットメッセージを入力して、その上にあるチェックマーク状の[Commit All]ボタンをクリックする。

最初のコミット 最初のコミット
コミットメッセージを入力して((1))、[Commit All]ボタンをクリックする((2))。
[Commit All]ボタンの隣にあるのは、更新ボタンとGitの各種操作を行うためのメニューを表示するボタンだ。

変更点の確認

 ローカルリポジトリでのコミットはこのようにVS Codeに統合されていて、とても簡単に行える。この後、例えば以下のようにファイルを編集/保存すると、エディターでは編集箇所に青い縦線が表示され、ビューバーの[Git]ボタンには変更があったことが通知される。ここで[Git]ボタンをクリックし、[GIT]バーで変更のあったファイルをクリックすると、エディターが二つ開いて、変更箇所がハイライト表示される。

ファイルを編集/保存したら、[Git]ボタンをクリックする
ファイルを編集/保存したら、[Git]ボタンをクリックする
変更のあったファイルをクリックすると、変更点がハイライト表示される
変更のあったファイルをクリックすると、変更点がハイライト表示される

変更点の表示
[GIT]バーの[index.js]の左に表示されている[M]アイコンは「Modified」、つまり変更があったことを示している。


ステージング

 [GIT]バーでは個々のファイルにマウスカーソルを合わせたときに表示される二つのアイコンや、右クリックすると表示されるコンテキストメニューからステージングを行ったり、変更を取り消したりできる。

[+]ボタン([Stage]ボタン)をクリックするか、
[+]ボタン([Stage]ボタン)をクリックするか、
コンテキストメニューから[Stage]を選択する
コンテキストメニューから[Stage]を選択する
ファイルがステージングされた 変更のあったファイルのステージング
[GIT]バーでは変更のあったファイルのステージングを行えるので、コミットの単位をきっちりと調整したい方は覚えておくとよいだろう。なお、変更を取り消すには[+]ボタンの左にある[Clean]ボタンか、コンテキストメニューの[Clean]をクリックすればよい。

Git関連操作を行うためのメニュー

 最後に[GIT]バーの右上にある[…]ボタンをクリックすると、メニューが表示され、各種の操作が行えるようになっている。

[…]ボタンをクリックすると表示されるメニュー […]ボタンをクリックすると表示されるメニュー

 メニューの項目を見ると分かる通り、ここからリモートリポジトリに対するプッシュ/プルが可能だ。また、一番下の[Show Git Output]を選択すると、Git関連操作を行ったログが表示される。ここでは、リモートリポジトリを作成していないので、プッシュ/プルを行う項目はグレーアウトしている。そこで、次にGitHubを対象としてリモートリポジトリへのプッシュ操作などを行ってみよう。

       1|2|3|4 次のページへ

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。