「VSCodeとGitHubを連携させると便利って聞いたけど、どうするの？」
「プログラミングを始めたばかりだけど、開発環境をちゃんと用意したい！」
上記の疑問にお答えします。
VSCodeとGitHubと連携したいけど、「なんかやることが多いな～」と感じた方に向けてこの記事を書いています。
この記事では、VSCodeとGitHubの連携作業を３つに分けて説明し、段階的に取り組めるよう工夫しています。
VSCodeとGitHub連携作業の全体像は以下の通りです。
- GitHubのアカウント作成
- Gitのインストール＆基本設定
- VSCodeとGitHubと連携
「偉そうに語るおまえは誰やねん。」と思われるので、私のことも少し紹介させてください。
この記事を書いている私は、プログラミング歴は約６年で、一応ＩＴ業界に身を置いています。
本職での開発経験はありませんが、今でもPythonやWeb系のプログラミングを勉強しつつ、プログラミングスキルを活かして仕事の効率化を図ったり、ゲームをつくったりしています。
この記事では、「３．VSCodeとGitHubと連携」について説明しています。
手順に沿って設定すれば、VSCodeとGitHubが連携した環境を構築することができます。
「１．GitHubのアカウント作成」と「２．Gitのインストール＆基本設定」については、『プログラミング初心者のためのGit＆GitHub入門【導入までの手引き】』で解説しています。
まだの方は、先にこちらをご覧ください。
１．【VSCode＆GitHub連携の前に】Gitの仕組みについて
VSCodeとGitHubの連携作業の前に、Gitの仕組みについてかんたんに解説します。
ここが理解できれば、連携後の運用もスムーズにできるようになります。
二人が共同作業する状況を例に説明するので、イメージしてみてください。
以下は、Git運用の基本的な流れを表しています。
作業者Aがソースファイルを修正し、作業者Bも同じソースファイルを使って作業する状況を絵にしています。
用語とgitコマンドを以下にまとめます。参考にしつつ、解説を見ましょう。
| 用語 | 説明 |
|---|---|
| リポジトリ | プログラムや作業内容の保管場所のこと。 |
| ローカルリポジトリ | ローカル環境にあるリポジトリ。この場合は各作業者のパソコンが該当。 |
| リモートリポジトリ | リモート環境にあるリポジトリ。この場合はGitHubが該当。 |
| ブランチ | 複数の作業を並列で進めるための機能。特定の目的のために複製・分岐させることが多い。 |
| リビジョン | 変更履歴のこと。 |
| gitコマンド | 説明 |
|---|---|
| コミット | 修正や削除などのファイル情報をリポジトリに送る。コミットすることでリビジョンが作成される。 |
| アド | ソースファイルなどをコミット対象にするために、インデックスというコミット対象のファイル置き場に登録する。 |
| プッシュ | ローカルリポジトリの情報をリモートリポジトリに反映する。 |
| プル | リモートリポジトリの情報をローカルリポジトリに取り込む。「git pull」コマンドはフィッチとマージを同時に行う。 |
| フィッチ | リモートリポジトリの情報をローカルリポジトリに反映するが、リモートリポジトリを最新にし、更新情報を取り込むだけでブランチへの取り込みは行わない。 |
| マージ | 特定のブランチやリビジョンを、ローカルリポジトリのブランチに取り込む。 |
ざっくり流れを説明すると、作業者Aが修正したソースファイルを①アド→②コミット→③プッシュして、リモートリポジトリにソースファイルをアップロードしています。
作業者Bは、同じソースファイルを使って作業するために、リモートリポジトリからローカルリポジトリに④プルしてします。
どうでしょうか。イメージはつかめたでしょうか。
GitHubとの連携には、ローカルリポジトリとリモートリポジトリの設定が必要なことが分かっていただけたと思います。
次はそれぞれの設定方法について解説します。
２．ローカルリポジトリの作成
VSCode（ご自身のパソコン）側の設定です。
手順は次のようになります。手順を確認しながら、実際にやってみましょう。
- 任意の場所にフォルダを作成
- VSCodeでローカルリポジトリの初期化
手順１：任意の場所にフォルダを作成
今回はCドライブ直下に「git-local」フォルダを作成します。
手順２：VSCodeでローカルリポジトリの初期化
VSCodeを起動します。
もし、VSCodeの構築がまだでしたら、『【Python×VSCode】初心者でも分かる環境構築の方法と導入メリットを解説』が参考になるかと思います。
ぜひ一読ください。
エクスプローラメニューから「フォルダを開く」を選択します。
作成した「git-local」フォルダを選択すると次のような画面が表示されます。
そこで、左側の「ソース管理」を選択します。
「リポジトリを初期化する」を選択します。
「git-local」フォルダのなかに隠しフォルダ「.git」が作成されていることを確認してください。隠しフォルダ「.git」がローカルリポジトリです。
３．リモートリポジトリを作成する
GitHub側の設定です。
手順は次のとおりです。手順を確認しながら、実際にやってみましょう。
- GitHubでリポジトリを作成
- VSCodeでローカルリポジトリとリモートリポジトリを紐づける
手順１：GitHubでリポジトリを作成
GitHubにログインし、画面左上の「Create repository」を選択します。
以下を設定し、「Create repository」を選択します。
Repository name：git-remote
Description：任意のコメント
「Private」を選択
リポジトリ作成が完了すると画面が遷移します。
「…or push an existing repository from the command line」は使用するので、右端のコピーアイコンを選択し、メモ帳などに貼り付けておいてください。
手順2：VSCodeでローカルリポジトリとリモートリポジトリを紐づける
VSCodeのターミナルを開きます。
先ほどコピーしていたgitコマンドの1行目を貼り付け、実行します。
以上でローカルリポジトリとリモートリポジトリを紐づけは完了です。
４．動作確認（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の連携について解説しました。
設定自体はそこまで難しくないので、この記事を参考にすれば１時間もあればできると思います。
ぜひご自身でも環境を構築してみてください。
ひとりで作業をしているうちは、あまり必要性を感じないかもしれません。
ただ、これがチーム開発となるとGitHubの活用は必須になってきます。
もし、初心者からレベルアップを目指したいなら、『GitHub実践入門 ～Pull Requestによる開発の変革 Pull Requestによる開発の変革 （WEB+DB PRESS plus） [ 大塚弘記 ]』がおすすめです。
ロングセラー商品で、初級者だけでなく中級者までフォローする情報量なので、こちらを実際に使いつつ、知識を習得していきましょう。
基礎から実践までをカバーする一冊
※画像をクリックすると商品ページに移動します。
ご清聴ありがとうございました。