Visual Studio Code と Git Hub を連携させてみる 前編
作成日：2023/03/10
Visual Studio Code と Git Hub を連携させてみる 前編
Visual Studio Code は、開発者に人気のエディターです。
単なるプログラムを記述するエディターとしてだけでなく、拡張機能を組み込んで自分の好きなようにカスタマイズできることも人気の理由です。
また、ソースコード管理の GitHub との連携も行えますので、チーム開発にも対応可能です。
今回は DevOps における基本的な開発ツールとして、Visual Studio Code と GitHub を連携させる基本設定について解説します。
Visual Studio Code のインストール
Visual Studio Code はオープンソースで開発されており、無料で利用できます。
対応OSは Windows、macOS、Linux です。
必要な環境にインストールできます。
使用したい環境に合わせて、ダウンロードし、インストールしてください。
Visual Studio Code ダウンロードページ
Git クライアントの準備
GitHub の操作を行うためのクライアントツールはさまざまなものがありますが、一番基本的なツールとして git コマンドを用意します。
OSによって git コマンドのインストール方法が異なります。
Git のインストール方法
- Linux の場合
ディストリビューションのパッケージ管理ツールでインストールします。 - macOS の場合
Xcode Command Line Tools をインストールします。
あるいはインストーラーをダウンロードしてインストールします。 - Windows の場合
Git for Windows をインストールします。
あるいは GitHub Desktop をインストールします。
他にもいろいろなツールがありますので、お好みのものを探してみてもよいでしょう。
GitHub にリポジトリを作成
今回はチーム開発を想定して、最初に GitHub 上にソースコードを置くリポジトリを作成し、このリポジトリを開発者のクライアントにクローンすることにします。
リモートリポジトリをクローンすることでローカルに同じソースコードを置くことができます。
GitHub アカウントを作成してサインインし、新しいリポジトリを作成します。
リポジトリは誰でも参照できるパブリックリポジトリと、自分および許可されたアカウントしか参照できないプライベートリポジトリが作成できます。
今回は練習用としてパブリックリポジトリを作成します。
作成時にREADME.mdを追加するようにしておいてください。
新しいリポジトリを作成する画面
git cone のためのアドレスの取得
アドレスは、Webブラウザーで GitHub のリポジトリにアクセスし、「<> Code」ボタンをクリックして取得できます。
アクセス方法としてHTTPSとSSHがあります。
今回は簡略なHTTPSを使います。
取得したアドレスは次のステップで利用します。
リポジトリをクローンするためのアドレス
.gitファイルへのアクセスURLです。
リモートリポジトリをクローンする
git clone コマンドを使用して、GitHub 上に作成したリポジトリをクライアントにクローンします。
Git 用メールアドレスと名前の設定
git コマンドを使用する前に、自分のメールアドレスと名前を設定しておきます。
---
$ git config --global user.email "username@domain.name"
$ git config --global user.name "Toru Miyahara"
---
git clone コマンドの実行
git clone コマンドの文法は以下のとおりです。
---
git clone GitHub上で取得したアドレス
---
クローンを行いますと、リポジトリに含まれるファイルがクライアントのローカルフォルダ内にコピーされます。
git clone コマンドの実行例
リモートリポジトリに含まれるファイルがコピーされます。
Visual Studio Code でローカルリポジトリを開く
git clone コマンドを実行しますと、ローカルリポジトリが作成されます。
Visual Studio Code からこのローカルリポジトリをフォルダとして開きますと、ファイルを編集したり、ファイルを追加したりできます。
フォルダの開き方は複数ありますが、ウインドーに表示されていれば「フォルダを開く」ボタンをクリックするか、ファイルメニューから「フォルダを開く」を選択します。
フォルダ clone コマンドでクローンした場合、実行したディレクトリの下にリポジトリ名でフォルダが作成されていますので、そちらを選択します。
これで Visual Studio Code からローカルリポジトリ内のファイルを操作できます。
Visual Studio Code でクローンする
Visual Studio Code の Git 拡張機能を利用してクローンすることもできます。
Visual Studio Code のウインドー左側のアイコンが並んでいるアクティビティバーから、あるいは表示メニューから「ソース管理」を選択します。
そしてプライマリサイドバーに表示されている「リポジトリのクローン」をクリックします。
ウィンドウ上部にテキストボックス「リポジトリURLを指定するか、リポジトリソースを選択します。」が表示されます。
このテキストボックスに前記の GitHub 上で取得したHTTPSのアドレスを入力するか、「 GitHub から複製 リモートソース」を選択します。
この機能を使いますと、この後 Git 拡張機能を使うかの確認、Webブラウザーによる認証連携、クローンできるリポジトリの選択などを表示するのでGUIの指示に従って設定を進めてください。
Visual Studio Code の初期起動状態
Git とは連携していませんので、クローンしたフォルダを開くか、クローンから行うことができます。
うまくクローンできますと、フォルダとして開くかを聞いてきます。
開きますと、次のステップで説明するローカルリポジトリを開く作業を行ったことになります。
また、フォルダ内に実行フォルダが含まれている可能性がありますので、それらを信頼するかどうかの確認も必要です。
リポジトリのフォルダ内に含まれるものを信頼するかどうか設定します。
ファイルに修正を加えてみる
Visual Studio Code の表示をエクスプローラーに切り替えますと、リポジトリに含まれているファイルを一覧できます。
編集したいファイルをダブルクリックしますと、エディターで開いて編集できます。
ここではリポジトリ作成時に追加しておいたREADME.mdファイルを開いて、適当な文言を記入し、ファイルとして保存します。
するとエクスプローラーのファイルの右側に「M」と表示されます。
マウスカーソルをMに当てると「変更されたインデックス」とポップアップで表示されます。
この意味は、このファイルはOSのファイルとしては変更されているが、また Git のリポジトリには反映されていない状態であることを表しています。
ローカルリポジトリにコミットする
Git では、変更が加わったファイルは「ステージ」と呼ばれる領域に配置し (ステージング)、コミットすることでリポジトリへと反映されます。
2段階に分けず、ステージングとコミットを一気に行うこともできます。
「コミット」ボタンの上のテキストボックスにコミットメッセージ (後からコミットログで確認できる) を記入し、「コミット」ボタンを押すことで、一気にコミットします。
コミットしてもよいかダイアログを表示するので「はい」ボタンをクリックしますと、ローカルリポジトリに変更がコミットされます。
ファイルとステージング、リポジトリの関係
リポジトリは一種のデータベースとして考えられます。
コミットメッセージを入力して、コミットします。
Mがついているのが未コミットのファイルです。
ローカルリポジトリのコミットをリモートリポジトリにプッシュする
ローカルリポジトリへのコミットはトラッキングされており、リモートに反映させる必要があります。
「変更の同期」ボタンをクリックすることで、ローカルリポジトリへのコミットをリモートリポジトリに反映させます。
これを「プッシュ」と呼びます。
サーバーにアップロードすると考えればよいでしょう。
リモートリポジトリの状態は、Webブラウザーで GitHub にサインインして確認できます。
プッシュした変更が反映されているか確認してみてください。
プルについて
ローカルからリモートへ変更を反映するのがプッシュですが、逆にリモートからローカルに変更を反映するのがプルです。
厳密には、リモートから変更点を取り込んで同じ状態を「origin/main」というブランチに適当するフェッチと、さらに変更内容を main ブランチに取り込むマージを組み合わせたものがプルになります。
同じリポジトリで他の開発者が作業した場合、適切なタイミングでプルを行う必要があります。
Visual Studio Code では、定期的にフェッチを行う機能がありますので、必要に応じて設定するとよいでしょう。
プッシュとプルの関係
執筆者
宮原 徹（みやはら とおる）
1972年、神奈川県生まれ。
中央大学 法学部 法律学科卒。日本オラクルでLinux版Oracleのマーケティングに従事後、2001年に株式会社びぎねっとを設立し、Linuxをはじめとするオープンソースの普及活動を積極的に行い、IPA「2008年度 OSS貢献者賞」を受賞。
2006年に日本仮想化技術株式会社を設立し、仮想化技術に関する情報発信とコンサルティングを行っている。
現在は主にエンタープライズ分野における DevOps について調査・研究を行っており、成果はブログや勉強会などでも発信している。
