前回の記事でGitとGitHubの準備が概ね整いました。今回はVSCodeの準備をしていきます。大まかな流れは下記のとおりです。

●Visual Studio Codeのインストール
●プラグインのインストール
●リポジトリの作成
●ローカル＆リモートリポジトリの紐づけ
●コミット・プッシュ

VScodeのインストール

すでに入っているとは思いますが、インストールから。

https://code.visualstudio.com

環境にあったバージョンが自動で表示されます。特に迷う点もなさそうですので省略します。

自分でパッケージを選ぶ場合はこちらです。zip版もあります。

https://code.visualstudio.com/Download

VSCodeにプラグインを追加

今回必要となるプラグインをインストールしていきます。

日本語パック

左メニューの Extensions からインストールしていきます。ctrl+shift+x（Macではcmd+shift+x）でも表示できます。左上の検索ボックスに japanese と入力、「Japanese Language Pack for Visual Studio Code」をインストールします。

インストール完了後に Change Language and Restart というボタンが出てくるのでクリックして再起動すれば日本語になります。

GitLens

GitをGUIで使うための核となるプラグインです。ソース管理の中にコミット、ファイル履歴、ブランチなどのビューが追加され可視化してくれます。差分やコメントも視覚的に非常に見やすくなります。

Git Graph

履歴やブランチの状態を可視化してくます。直観的でわかりやすいUIが特徴です。SourceTreeをVSCodeで使用できるような感覚です。Git Historyと同じような機能も多いですが、両方入れておいて損はないかと思います。

Git History

通常はシェルから git log で見るログを様々な切り口で視覚的に確認できる。ファイル単位で遡れるのでいざというときに非常に役に立つ。Git Graphよりさらに細かいことができる印象。

VScodeとGitHubを連携させる

それぞれの設定が一通り終わりましたので、実際にVScodeとGitHubを連携させて作業をやってみます。

GitHubにフォルダ（リモートリポジトリ）を作ってそれをローカルにコピー（クローン）する方法と、逆にローカルにフォルダ（ローカルリポジトリ）を作ってGitHubに反映する方法とがあります。両方のやり方を紹介します。

どちらの方法でも同じ結果が得られますが、一度もコマンドラインを使いたくない場合は「GitHubのリポジトリをクローンする」方法がよいでしょう。

GitHubのリポジトリをクローンする

リポジトリを複製

GitHubで前回作成した VScodeTest のリモートリポジトリを開きます。ファイルが入っていない状態ですので下記のような画面が表示されます。Quick setupのSSHのボタンを選択し、コピーボタンでコードをコピーします。

VSCodeを開きます。既存のプロジェクトを開いている場合は、「ファイル」「新しいウィンドウ」から新規ウィンドウを開いてください。ctrl+shift+nでも開けます。「リポジトリの複製」をクリックします。

カーソルが検索ボックスに移動します。さきほどコピーしたコードを貼り付けてエンターを押します。

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

フォルダの選択になります。今回はCドライブの直下にdevフォルダを作成し、その中にローカルリポジトリを作成します。devフォルダを選択し、「リポジトリの宛先として選択」をクリックします。

このとき dev の中に例えば test というフォルダを作成し、こちらを選択した場合、c:\dev\test の中にリモートリポジトリの名前である VScodeTest のフォルダが入れ子になります。つまり c:\dev\test\VScodeTest というローカルリポジトリが作られます。今回は c:\dev のルートにローカルリポジトリを作りたいので c:\dev を選択します。

ウィンドウがポップしますので「開く」を選択します。

「はい、作成者を信頼します」をクリックします。

VSCODETESTというローカルリポジトリを開いた状態となります。VSCodeではすべて大文字で表記されます。

フォルダを確認するとさきほど選択した c:\dev の中にVScodeTestというフォルダが生成され、中には隠しフォルダの .git ができています。VScodeTestというローカルリポジトリが作られてgitの監視対象となっていることがわかります。ローカルリポジトリの名称はリモートリポジトリと同じになります。

試しに test.html というファイルを作り、VScodeTest フォルダに入れてみましょう。

VSCodeを見るとソース管理に通知が1件ついています。

ソース管理をクリックします。さきほどフォルダに追加したtest.html が早速反映されています。VScodeTestがローカルリポジトリとして無事機能していることが確認できました。

ステージングとコミット

早速コミットしようとボタンをクリックすると「ステージングされている変更がなく、コミットできません」となります。

ステージングを省略して直接コミットもできますが、ここでは+をクリックしてステージングします。

「変更」が「ステージされている変更」になりステージングが完了しました。コミットをクリックしてコミットします。変更内容がわかるよう「test.htmlを追加」というメッセージを入れてコミットしました。

Git Graphのプラグインも入れていますので、「グラフ」という項目にコメント付きでコミットの内容が表示されます。

プッシュする

準備が整いましたので早速プッシュしてみます。三点のアイコンから「プッシュ」をクリックします。

下記メッセージが表示された場合は気にせずOKを選択してください。

GitHubのさきほどコードをコピーした画面をリロードすると、反映されていることが確認できます。test.htmlがアップされ、「test.htmlを追加」というコメントも追加されています。

ローカルリポジトリを作成してGitHubに反映する

ローカルリポジトリを作成

自分のPCにGitHubと同期させるフォルダ＝ローカルリポジトリを作成していきます。今回はCドライブの直下にdevフォルダを作成し、その中にvscode-githubというローカルリポジトリを作っていくことにします。

フォルダの格納場所はどこでも構いませんが、あまり深い階層だとパスが長すぎてエラーになることがあるため浅めにしておいた方がよいです。また社内のネットワークドライブを直接指定するのもダメではないのですが、エラーの原因になりやすいので避けた方が無難です。ローカルをベースとしてresyncコマンドでネットワークドライブに（負荷の少ない時間帯に）同期するなどした方が事故は起こりにくいです。

VSCodeから作成したフォルダを開きます。

「はい、作成者を信頼します」をクリックします。

VSCode内のエクスプローラーでフォルダが展開されます。「ソース管理」のアイコンをクリックします。

さきほどまではなかった「リポジトリを初期化する」というボタンが表示されます。クリックします。本来はコマンドラインから「git init」で初期化するところです。ここからVSCodeからGUIでGitをコントロールしていきます。

これで初期化が完了しました。c:\dev\vscode-github の中に.git という隠しフォルダが生成され、このフォルダがgitの監視対象となります。この時点でローカルフォルダがローカルリポジトリになったと言えます。

ステージングとコミット

ローカルリポジトリにテストファイルを作ってみます。ここではtest.htmlを作ります。

するとVSCodeのソース管理画面に反映されます。早速コミットしようとボタンをクリックすると「ステージングされている変更がなく、コミットできません」となります。ステージングを省略して直接コミットもできますが、ここでは+をクリックしてステージングします。

「変更」が「ステージされている変更」になりステージングが完了しました。コミットをクリックしてコミットします。変更内容がわかるよう「test.htmlを追加」というメッセージを入れてコミットしました。

Git Graphのプラグインも入れていますので、「グラフ」という項目にコメント付きでコミットの内容が表示されます。

このままpushしてしまいたいところですが、受け手側との連携ができていません。ローカルとリモートを紐づける設定を行います。

リモートリポジトリとローカルリポジトリを繋ぐ

前回作成したGitHubのリポジトリ VScodeTest の画面を開きます。トップ→Repositories→VScodeTestを選択すると下記画面になります。

Quick setupのリンクをコピーします。今回はSSHで接続しますのでSSHボタンをクリックした上で、コピーのアイコンをクリックしてコードをコピーします。SSHはgit@github.comから始まる文字列です。

VScodeに戻ります。先ほどコミットまで終わり、左上に「Branchの発行」ボタンが表示されている状態のはずです。「ターミナル」「新しいターミナル」でターミナルを開きます。

下記コマンドを入力します。さきほどGitHubでコピーしたリモートリポジトリと現在開いているローカルリポジトリを紐づける作業です。VSCodeでもここはコマンドを打つ必要があります。

git remote add origin GitHubでコピーしたコード

エラーが出なければ作業完了です。Successなどの表示は特にありません。

プッシュする

紐づけできましたので早速プッシュしてみます。三点のアイコンから「プッシュ」をクリックします。

下記メッセージが表示された場合は気にせずOKを選択してください。

GitHubのコードをコピーした画面をリロードすると、反映されていることが確認できます。test.htmlがアップされ、「test.htmlを追加」というコメントも追加されています。

まとめ

Visual Studio CodeとGitHubを使ったソースコードの管理方法について紹介してきました。この環境下でファイルを更新すれば、それがローカルであれGitHub上であれ、常にファイルが監視され、変更履歴と差分が保存され、タイムラインから戻りたい時点に戻れるようになります。大幅な修正の場合にはブランチを切って、元のファイル群に影響を与えない状態で、複数のファイルに修正を施していくこともできます。

説明すると長いのですが、作業自体はそれほど難しくはありません。一度環境を作ってしまえば、二度目は簡単です。VSCodeとGitHub上で簡単にGitで管理できますので、ぜひ試してみてください。