VS CodeからGitHubを利用する

VS CodeからGitHubを利用するプログラミング
スポンサーリンク

前回のGitHubのアカウント作成に続きいまさらネタとなります。

GitHubにアカウントを作成したので、今回はGitHubをVS Codeを使ってみたいと思います。

スポンサーリンク

VS CodeからGitHubを利用する準備

VS CodeからGitHubを利用するために事前にGitコマンドの設定をする必要があります。

必要なソフトウェアのインストール

WindowsでVS Codeを利用している場合はGit for Windowsをインストールしておきましょう。

LinuxでVS Codeを利用している場合、あるいはVS CodeとWSL2を連携させている場合は、WSL2のLinux側にgitパッケージとopenssh-clientパッケージが必要になります。Ubuntuを利用している場合は次のコマンドを実行します。

$ sudo apt-get update
$ sudo apt-get install git openssh-client

以降の作業はWindowsの場合はGit for Windowsに付属するGit Bashで、WSL2あるいはLinuxを使っている方はLinuxのターミナルで行います。

SSHキー(秘密鍵・公開鍵ペア)の作成

まずSSHキー(秘密鍵・公開鍵のペア)を作成しておきます。これはGitHubにGitコマンドでアクセスする際に必要になります。

次のコマンドを入力します。なおメールアドレスの部分はGitHubに登録したメールアドレスに変えます。

$ ssh-keygen -t ed25519 -C "your_email@example.com"

次に秘密鍵・公開鍵ペアを作成するための情報を入力します。まずは秘密鍵のファイル名です。基本的にはデフォルトで良いのでリターンキーのみを入力します。

Enter a file in which to save the key (/home/you/.ssh/id_ed25519):

次に設定するパスフレーズが要求されます(確認を含めて2回)。

Enter passphrase (empty for no passphrase): 
Enter same passphrase again:

秘密鍵が流出した場合を考えると本当はパスフレーズを入力した方が良いのですが、面倒なので私はリターンキーのみを入力してパスフレーズを無しとしてしまいました。

これで秘密鍵・公開鍵のペアの作成完了です。秘密鍵が「id_ed25519」、秘密鍵が「id_ed25519.pub」としてできているはずです。

公開鍵の登録

次にこの公開鍵をGitHubに登録します。

GitHubにサインインしてSettings画面の左側で「SSH and GPG keys」を選択し「New SSH key」を選択します。

SSHキーの追加

続いて公開鍵の内容を「Key」の領域にコピペします。

公開鍵の追加

またこの公開鍵を認識するための名前(公開鍵を生成したPCのホスト名やユーザ名)を「Title」の領域に入力し「Add SSH key」を選択します。

公開鍵の登録に成功すると次のように表示されます。

公開鍵の追加完了

SSHでの接続テスト

公開鍵をGitHubに登録したらSSHでの接続を確認してみましょう。

次のコマンドを入力します。WindowsであればGit Bashでこのコマンドを入力します。

$ ssh -T git@github.com

初めてSSHを使ってGitHubに接続する場合は次のようなメッセージが表示されるので「yes」を入力します。

The authenticity of host 'github.com (IP ADDRESS)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)?

そして次のようなメッセージが表示されて、GitHubから切断(接続を拒否)されれば成功です。

Hi username! You've successfully authenticated, but GitHub does not
provide shell access.

Gitコマンドの設定

Gitコマンドを利用開始する前に、いくつか設定をしておきましょう。

ユーザ名とメールアドレス

下記のコマンドで設定することができます。

$ git config --global user.name 'ユーザ名'
$ git config --global user.email 'メールアドレス'

ユーザ名はトラブルを避けるために半角英数字を利用しましょう。

メールアドレスについては自分が日常的に利用しているメールアドレスとしても良いのですが、Githubのレポジトリが公開レポジトリである場合はそのメールアドレスが公開されてしまいます。

そのような場合はGitHubのEmailsの設定で「Keep my email address private」と「Block command line pushes that expose my email」をチェックしておきます。

ダミーのメールアドレス

そしてgitコマンドで設定するメールアドレスにこの画面で表示されるダミーのメールアドレスを設定します。

改行コードの設定

WindowsとLinuxでは改行コードの扱いが異なります。

これを解決するためにGitでは改行コードを自動変換する仕組みがあり、デフォルトではこの自動変換が有効になっています。

しかし、Windows・Linux混在環境ではトラブルがよくあるようです。この自動変換は無効にしておきましょう。

$ git config --global core.autocrlf false

改行コードについては各レポジトリでルールを決めるようにしましょう。

ファイル名の大文字小文字の設定

GitではWindowsを想定してかファイル名の大文字・小文字を区別しません。ReadMe.mdとREADME.mdを同一のファイルと見なします。

大文字小文字を区別するLinuxを利用する場合は大文字小文字の同一視は無効にして置いた方が良いでしょう。

$ git config --global core.ignorecase false
スポンサーリンク

VS CodeからGitHubの利用

準備が整ったらVS CodeからGitHubを利用してみましょう。

今回は「Remote – WSL拡張機能」で、VS CodeとWSL2を連携させている状態で試しています。

GitHubとの連携とレポジトリのクローン

VS Codeの左端の「ソース管理」のアイコンを選択してから「レポジトリのクローン」を選択しましょう。

レポジトリのクローン

するとクローンするURLを入力するように促されますが、自分のGitHubアカウントのレポジトリを利用する場合は、ここは「GitHubから複製」を選択します。

GitHubからの複製

これでVS CodeとGitHubを連携させるための設定が始まります。

まずは「拡張機能GitHubがGitHubを使用してサインインしようとしています。」というメッセージが表示されるので「許可」を選択します。

サインイン

これでブラウザが立ち上がり、GitHubにVS Codeとの連携を許可するように求められます。

GitHubとVS Codeの連携

今回は連携させたいので「Authorize Visual-Studio-Code」を選択します。

続いてGitHubにアクセスするためのパスワードを入力します。

GitHubのパスワード

正しいパスワードを入力するとVS Codeに戻るために次のようなメッセージが表示されるので「Visual Studio Codeを開く」を選択します。

VS Codeを開く

これでVS CodeとGitHubが連携できたはずです。

タイミングによってはVS Codeに次のような通知が表示されるかもしれません。

拡張機能の承認が未完了

ブラウザでのGitHubとの連携が完了していれば、ここでは「はい」を選択すればOKです。

VS CodeとGitHubを連携させると、クローンするレポジトリの候補として、自分のGitHubアカウントのレポジトリが表示されるようになります。

GitHubの自分のレポジトリが表示される

このレポジトリリストから使用したいレポジトリを選択すると、次はクローンしたレポジトリを配置するディレクトリ(ローカルの作業ディレクトリ)を選択します。

クローンしたレポジトリを配置するディレクトリの指定

これでレポジトリのクローンが行われます。

VS Codeにはクローンしたレポジトリを現在のウィンドウで開くか新しいウィンドウで開くかを聞かれます。

クローンしたレポジトリ開く

今回は「開く」を選択して現在のウィンドウで開きました。

設定によってはここでフォルダーのファイルの作成者を信頼するかどうかを聞かれますので、「はい、作成者を信頼します」を選択しましょう。

これでクローンしたレポジトリがVS Codeで開かれます。

クローンしたレポジトリ

ここでいずれかのファイルを選んで「タイムライン」をみてみると、そのファイルの履歴(コミットしたときのログ)をみることができます。

ファイルの履歴

ブランチの作成とレポジトリの更新

テスト用のブランチなので、練習がてらにブランチを作ってからコードの修正などをしてみます。

ブランチを作成するためには「ソース管理」から「スリードットアイコン」→「ブランチ」→「分岐の作成」を選択します。

ブランチの作成

なぜこのメニュー項目だけ「ブランチ」ではなく「分岐」なのでしょうか・・・?

これでブランチ名を入力するように促されるのでブランチ名を入力します。今回は「branch-vscode-test」としておきます。

ブランチ名の入力

これで左下にブランチ名が表示され、現在ブランチ中での作業となっていることがわかります。

作成したブランチへの切替え

このブランチでソースの変更などの作業をしておきます。

今回はソースコードを一部変更(表示するメッセージの変更)をしてみました。

また、下記の記事に沿ってVS Code上でC++のコードをビルド・デバッグできるようにしました。

WSL2とVS CodeでC++を利用してみる
今回はVisual Studio Code + WSL2という環境でC++のコーディング・ビルド・デバッグを試してみます。多少は手で設定する項目は有りますが、VS Codeによってビジュアルでデバッグできるのはかなり使いやすいのではないかと思います。

この設定により.vscodeというディレクトリが生成され、その中に3つのjsonファイルが追加されました。

さらにビルドした結果でhelloworldという実行ファイルができるので、このファイルをGitの管理対象外とするように.gitignoreファイルに追加しました。

結果としてVS Codeのエクスプローラでは「helloworld.cpp」と「.gitignore」に「M(修正されたファイル)」マークがつき、「.vscodeディレクトリ内のファイル」には「U (Gitの管理外のファイル)」のマークがついています。

変更した状態

「ソースを管理」で確認するとこれらのファイルが「変更」の下に並んでいるので、「+」を選択して「すべてをステージ」しましょう。

すべての変更をステージング

5つのファイルがステージングされたら、あとはコミットメッセージを入力してから、チェックマークのアイコンを選択してコミットしましょう。

コミットメッセージを入力してコミット

これでこれまでの変更がコミット(Gitに登録)されました。

変更のGitHubへの反映

コミットした内容はまだローカルにあるので、GitHubに反映しましょう。

これはソース管理のスリードットアイコンから「プッシュ」を選択すればOKです。

GitHubへのプッシュ

GitHubにアクセスしてみると「branch-vscode-test had recent pushes」という表示があり、VS Codeで作成したブランチがGitHubにプッシュされていることがわかります。

GitHubでの確認

GitHubで表示させるブランチを切り替えてみると、編集や追加したファイルが反映されていることがわかります。

GitHubにプッシュされたブランチ

ブランチのマージ

ついでにブランチのマージもVS Codeからやってみます。

今回は先ほど作成したbranch-vscode-testの変更内容が問題なさそうなので、masterにマージしてみます。

まずはいったんGitHub上のデータをローカルに取り込みます。これはソース管理のスリードットアイコンから「フェッチ」を選択すればOKです。

レポジトリのフェッチ

続いてVS Codeで作業するブランチを「master」に切り替える必要があります。

画面左下のブランチ名を選択すると切り替えることができるブランチ一覧が表示されるので「master」を選択します。

masteへの切替え

続いてソース管理のスリードットアイコンから「ブランチ」→「ブランチをマージ」を選択します。

ブランチのマージ

これでマージ候補のブランチが表示されるのでマージしたいブランチ(今回はbranch-vscode-test)を選択します。

マージするブランチの選択

そしてソース管理に表示される同期ボタンを選択すれば、マージした内容がGitHubに反映されます。

マージした内容をGitHubに反映

GitHubを確認してみると、masterブランチに先ほど行った変更が反映されていることがわかります。

GitHubでマージした内容の確認

便利な拡張機能

ここまでの設定でみたようにVS CodeとGitコマンドがあれば、VS CodeでGitHubを活用することができます。

しかしVS CodeにはよりGitHubを簡単に活用できるような拡張機能があるので紹介しておきます。

ここでは3つの拡張機能を紹介しますが、まずはGit GraphかGit Historyのいずれかを導入し、複数人で開発する場合はGitLensを入れると良いのではないかと思います。

Git History

まずは「Git History」です。

Git History - Visual Studio Marketplace
Extension for Visual Studio Code - View git log, file history, compare branches or commits

これはGitのログを見やすくする拡張機能です。

Git Historyをインストールしたらコマンドパレットで「Git View History (git log)」を選択してみましょう。

これで使用しているレポジトリの履歴が表示されます。

Git Historyによる履歴

今回使用しているレポジトリの履歴が少ないのでありがたみがありませんが、コマンドラインでの「git log」の結果よりは見やすいのがわかると思います。

gitコマンドによるログ

Git Historyで便利なのは、表示されたログからコミットを選択すると、そのコミットの詳細が画面下半分に表示されることです。

コミットの詳細

この例では最新のコミットで2つのファイルが修正され、3つのファイルが新規追加されたことがわかります。

また各ファイルの右側に表示されているアイコンにより、「そのコミットでのファイル内容を表示」「ワークスペースとのファイルの比較」「直前のコミットとの比較」「そのファイルの履歴」を表示させることができます。

また、VS Codeでファイルを開くと右上に時計マークのアイコンが追加されます。

追加された時計マーク

このアイコンを選択するとそのファイルの履歴(そのファイルが関連するコミットの履歴)が表示されます。

Git Graph

Git Graphはブランチの様子を視覚的に見やすくしてくれる機能です。

Git Graph - Visual Studio Marketplace
Extension for Visual Studio Code - View a Git Graph of your repository, and perform Git actions from the graph.

Git Graphをインストールした後にコマンドパレットで「Git Graph: View Git Graph (git log)」を選択すると画面に使用しているレポジトリの履歴が表示されます。

Git Graphによるレポジトリの履歴

今回はブランチ構造がシンプルなので直線のグラフとなっていますが、ブランチ毎に別々の開発がされている場合などはここに枝分かれしたグラフが表示されます。

またこの画面でいずれかのコミットを選択すると、そのコミットの詳細が表示されます。

Git Graphによるコミットの詳細

こう見ると先ほど紹介したGit Historyと機能がかぶる部分もあるので、いずれかを入れておけば良いかもしれません。

GitLens

GitLensはVS CodeとGitを組み合わせて利用する際に便利な拡張機能です。

GitLens — Git supercharged - Visual Studio Marketplace
Extension for Visual Studio Code - Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly nav...

この拡張機能をインストールすると左側に新たなアイコンが追加されます。

GitLensのQuick Setup

このアイコンを選択するとセットアップするためのボタンが表示されるので、とりあえず「Quick setup」を選択します。

すると右側のGitLensの説明が表示されます。

GitLensの説明

この右側の部分をスクロールしていくと、いくつか代表的な設定項目が表示されますので、これが「Quick setup」になるのだと思います。

GitLensの設定は後でも変えられるので、まずはデフォルトのままでよいと思いますが、私は最後までスクロールすると表示される日付と時間のフォーマットだけ変更しました。

日付と時刻のフォーマットを変更

デフォルトだと英語風のフォーマットになっていたので、日付は「年/月/日 時:分:秒 (曜日)」に、時刻は「時:分:秒」に変更しておきました。

「秒」と「曜日」は邪魔かもしれません

さて、GitLensが有効になっている状態で、Gitで管理中のファイルを開くと。まずカーソルがある行に「その行の更新者」「更新時期」「更新時のコミットメッセージ」が表示されます。

GitLensが有効なときの表示

また、ファイルの上部にそのファイルを最後に更新した人と何人で編集しているかが表示されます。ここで編集者の数のところを選択すると画面の表示が切り替わり、どの行がどのコミットで更新されたのかを視覚的に確認できます。

コミット別の表示

また左側のアイコンで「ソース管理」を選択すると、ソース管理のエリアの下部に新しい項目が追加されています。

追加されたGit操作

ここから標準のVS CodeではできなかったようなGitの操作を行うこともできます。

GitLensにはこれ以外にも説明しきれないぐらいの多くの機能があります。

私の印象としては、GitLensには複数人で開発する際に便利な機能が多いように感じました。

まとめ

今回はVS CodeとGit Hubを組み合わせてい利用する方法を紹介しました。

VS CodeとGitHubは相性が良く、VS Codeを利用するとGitHubを簡単に利用することができます。さらに拡張機能を導入するとブランチの様子をグラフィカルに表示したり、誰がどの行を修正したのかをわかりやすく表示させることができます。

次回は今回構築した環境を使ってVS Codeの拡張機能を修正したいと思います。

コメント