前回はVisual Studio Code(以下、VS Code)の基本的な使い方を見た。VS 2015がRTMしようという日になぜVS Codeの記事なのかはさておき、今回はVS CodeからGitを使う方法について見てみることにしよう(ちなみに今回は、いつも通りにVimで原稿を書いている)。なお、本稿はVS Code 0.5.0をベースに書かれている。デバッグの手順については次回に譲ることにする。
VS Codeは標準の状態でGitをサポートしている。ただし、事前にGitをインストールしていることが前提となる。インストールしていない場合には、サイドバーを[GIT]バーに変更すると、次の画面のようなメッセージが表示されるので、Gitのインストール/設定を行っておこう。
Gitがインストールされていれば、ローカルリポジトリに対するコミットなどが可能になる。ここでは、Node.js上で動作するWebアプリ用フレームワークであるExpressとそのスキャフォールディングツールであるexpress-generatorを利用して、JavaScriptベースのWebアプリのひな型を作成したものとして、これをGitで操作してみよう(Express/express-generatorのインストールやひな型の生成については、本稿では省略する。これらの知識については「Node.jsのMVCフレームワーク「Express」の基礎知識とインストール」などを参考にされたい)。
express-generatorを利用して、アプリのひな型を生成し、VS Codeでそのプロジェクトのフォルダーを開くと次のようになる。
この状態でビューバーの下から2番目にある[Git]ボタンをクリックすると、サイドバーに[GIT]バーが表示される。
まずは[Initialize git repository]ボタンをクリックして、Gitの初期化を行う。初期化が終わると、ローカルリポジトリが作成され、[GIT]バーの表示が次の画面のように変わる。
ビューバーの[Git]ボタンにはコミットされていない変更の数が表示され、[GIT]バーには変更のあったファイルがズラリと並んで表示されている。プロジェクトを作成した直後なので、上の画面では大量のファイルが表示されている。ファイル名の左側に表示されているアイコンは、そのファイルの状態を示している。ここでは[U]と表示されているが、これは未追跡状態(Untracked)であることを意味している。「このアイコンの意味って何だっけ?」というときには、アイコンの上にマウスカーソルを合わせると、その意味がポップアップ表示される。
ローカルリポジトリへコミットするには、上部のテキストボックスにコミットメッセージを入力して、その上にあるチェックマーク状の[Commit All]ボタンをクリックする。
ローカルリポジトリでのコミットはこのようにVS Codeに統合されていて、とても簡単に行える。この後、例えば以下のようにファイルを編集/保存すると、エディターでは編集箇所に青い縦線が表示され、ビューバーの[Git]ボタンには変更があったことが通知される。ここで[Git]ボタンをクリックし、[GIT]バーで変更のあったファイルをクリックすると、エディターが二つ開いて、変更箇所がハイライト表示される。
変更点の表示
[GIT]バーの[index.js]の左に表示されている[M]アイコンは「Modified」、つまり変更があったことを示している。
[GIT]バーでは個々のファイルにマウスカーソルを合わせたときに表示される二つのアイコンや、右クリックすると表示されるコンテキストメニューからステージングを行ったり、変更を取り消したりできる。
最後に[GIT]バーの右上にある[…]ボタンをクリックすると、メニューが表示され、各種の操作が行えるようになっている。
メニューの項目を見ると分かる通り、ここからリモートリポジトリに対するプッシュ/プルが可能だ。また、一番下の[Show Git Output]を選択すると、Git関連操作を行ったログが表示される。ここでは、リモートリポジトリを作成していないので、プッシュ/プルを行う項目はグレーアウトしている。そこで、次にGitHubを対象としてリモートリポジトリへのプッシュ操作などを行ってみよう。
Copyright© 1999-2015 Digital Advantage Corp. All Rights Reserved.