VSCodeとGitHubを連携する方法【Gitの仕組みも解説】

歯車(青)開発環境
スポンサーリンク
スポンサーリンク

「VSCodeとGitHubを連携させると便利って聞いたけど、どうするの?」

「GitHubの連携ってすぐできるの?めんどうくさくない?」

VSCodeとGitHubと連携しようと思ったけど、なんかやることが多いなと感じた方に向けてこの記事を書いています。

この記事では、VSCodeとGitHubの連携作業を3つに分けて説明し、合間の時間で取り組めるよう工夫しています。

VSCodeとGitHub連携作業の全体像は以下の通りです。

  1. GitHubのアカウント作成
  2. Gitのインストール&基本設定
  3. GitHubと連携

 

「偉そうに語るおまえは誰やねん。」と思われるので、私のことも少し。

私のプログラミング歴は約5年で、本職での開発経験はありませんが、一応、IT業界に身を置いています。

今でもPythonなど、独学でプログラミングを勉強しつつ、そのスキルを活かして仕事の効率化を図ったり、ゲームをつくったりしています。

プログラミングは、独学で身につけました。

初心者の苦労は分かっているつもりなので、プログラミング学習を始めてすぐの方にも分かりやすいように、画像つきで手順を説明しています。

 

この記事では、「3.GitHubと連携」について説明しています。

手順に沿って設定すれば、VSCodeとGitHubが連携した環境を構築することができます。

なお、以下の作業が終了していることを前提に話を進めています。

まだの方は次の記事を参考に、作業を完了しておきましょう。

GitHubのアカウント作成方法を解説
VSCodeとGitHubの連携方法を教えます。まずそのためにGitHubのアカウントを作成しましょう。この記事では、VSCodeとGitHubの連携に必要なGitHubアカウント作成について、分かりやすいようにステップバイステップで解説しています。
Gitのインストール方法と基本設定を解説
VSCodeとGitHubの連携方法を教えます。まずそのためにGitをインストールしましょう。この記事では、VSCodeとGitHubの連携に必要なGitのインストール方法と基本設定について、分かりやすいようにステップバイステップで解説しています。

 

 

1.Gitの仕組みについて

GitHubの連携作業の前に、Gitの仕組みについてかんたんに解説したいと思います。ここが理解できれば、連携後の運用もスムーズにできるはずです。

例として、二人が共同作業する状況をイメージしてください。

以下は、Git運用の基本的な流れを表しています。

作業者Aがソースファイルを修正し、作業者Bも同じソースファイルを使って作業する状況を絵にしています。

 

用語とgitコマンドについては、以下にまとめます。

用語説明
リポジトリプログラムや作業内容の保管場所のこと。
ローカルリポジトリローカル環境にあるリポジトリ。この場合は各作業者のパソコンが該当。
リモートリポジトリリモート環境にあるリポジトリ。この場合はGitHubが該当。
ブランチ複数の作業を並列で進めるための機能。特定の目的のために複製・分岐させることが多い。
リビジョン変更履歴のこと。
gitコマンド説明
コミット修正や削除などのファイル情報をリポジトリに送る。コミットすることでリビジョンが作成される。
アドソースファイルなどをコミット対象にするために、インデックスというコミット対象のファイル置き場に登録する。
プッシュローカルリポジトリの情報をリモートリポジトリに反映する。
プルリモートリポジトリの情報をローカルリポジトリに取り込む。「git pull」コマンドはフィッチとマージを同時に行う。
フィッチリモートリポジトリの情報をローカルリポジトリに反映するが、リモートリポジトリを最新にし、更新情報を取り込むだけでブランチへの取り込みは行わない。
マージ特定のブランチやリビジョンを、ローカルリポジトリのブランチに取り込む。

 

ざっくり流れを説明すると、作業者Aが修正したソースファイルを①アド→②コミット→③プッシュして、リモートリポジトリにソースファイルをアップロードしています。

作業者Bは、同じソースファイルを使って作業するために、リモートリポジトリからローカルリポジトリに④プルしてします。

どうでしょうか。イメージはつかめたでしょうか。

GitHubとの連携には、ローカルリポジトリとリモートリポジトリの設定が必要なことが分かっていただけたと思います。

次はそれぞれの設定方法について解説します。

 

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

ご自身のパソコン側の設定です。

手順を確認しながら、実際にやってみましょう。

 

・任意の場所にフォルダを作成する

今回はCドライブ直下に「git-local」フォルダを作成します。

 

・VSCodeでローカルリポジトリを初期化する

VSCodeを起動し、エクスプローラメニューから「フォルダを開く」を選択します。

 

作成した「git-local」フォルダを選択すると次のような画面が表示されます。

そこで、左側の「ソース管理」を選択します。

 

「リポジトリを初期化する」を選択します。

 

「git-local」フォルダのなかに隠しフォルダ「.git」が作成されていることを確認してください。隠しフォルダ「.git」がローカルリポジトリです。

 

3.リモートリポジトリを作成する

GitHub側の設定です。

手順を確認しながら、実際にやってみましょう。

 

・GitHubでリポジトリを作成

GitHubにログインし、画面左上の「Create repository」を選択します。

以下を設定し、「Create repository」を選択します。

Owner:自分のID
Repository name:git-remote
Description:任意のコメント
「Private」を選択

 

リポジトリ作成が完了すると画面が遷移します。

「…or push an existing repository from the command line」は使用するので、右端のコピーアイコンを選択し、メモ帳などに貼り付けておいてください。

 

・VSCodeでローカルリポジトリとリモートリポジトリを紐づける

VSCodeのターミナルを開きます。

先ほどコピーしていたgitコマンドの1行目を貼り付け、実行します。

以上でローカルリポジトリとリモートリポジトリを紐づけは完了です。

 

4.動作確認(addからpushまで実行)

設定が上手くいったか確認したいので、実際にgitコマンドを実行してみましょう。

VSCodeを起動し、「新しいファイル」を選択します。

「HelloPython.py」ファイルを作成し、適当にコーディングします。

以下のGitコマンドを実行し、アドとコミットを行います。

git add HelloPython.py
git commit -m "Create sourcefile"

 

 

以下のGitコマンドを実行し、ブランチ作成とプッシュを行います。

git branch -M main
git push -u origin main

 

VSCodeのターミナルに実行結果が表示されたら、GitHub側を確認してみましょう。

「<>Code」にローカルリポジトリでコミットした「HelloPython.py」が表示されていれば成功です。

 

 

以上、VSCodeとGitHubの連携について解説しました。

これでVSCodeとGitHubの連携に必要な設定を一通り説明することができたと思います。

設定は、1時間もあればできると思うので、この記事を参考に環境を構築してみてください。

 

gitコマンドは基本的なものしか使用しませんでしたが、なかなか奥が深いです。

もし、初心者からレベルアップを目指したいなら、『GitHub実践入門 ~Pull Requestによる開発の変革 Pull Requestによる開発の変革 (WEB+DB PRESS plus) [ 大塚弘記 ]』がおすすめです。

ロングセラー商品で、初級者だけでなく中級者までフォローする情報量なので、こちらを実際に使いつつ、知識を習得していきましょう。

基礎から実践までをカバーする一冊


※画像をクリックすると商品ページに移動します。

 

ご清聴ありがとうございました。