「VSCodeとGitHubを連携させると便利って聞いたけど、どうするの？」
「プログラミングを始めたばかりだけど、開発環境をちゃんと用意したい！」
上記の疑問にお答えします。
VSCodeとGitHubと連携したいけど、「なんかやることが多いな～」と感じた方に向けてこの記事を書いています。
この記事では、VSCodeとGitHubの連携作業を３つに分けて説明ます。
VSCodeとGitHub連携作業の全体像は以下の通りです。
- GitHubのアカウント作成
- Gitのインストール＆基本設定
- VSCodeとGitHubと連携
「偉そうに語るおまえは誰やねん。」と思われるので、私のことも少し紹介させてください。
たいらーのプロフィール
- 文系四大出身。ソフトウェア開発の経験はなしですが、ＩＴ業界に身を置いています。
- 開発者やユーザーとのパイプ役など、業務にプログラミングスキルを活かす。
- Pythonは独学で習得。スクレイピングや作業の自動化などに勤しんでいます。
手順に沿って設定すれば、VSCodeとGitHubが連携した環境を構築することができます。
ぜひ参考にして、ご自身のために開発環境を整えましょう。
１．GitHubのアカウント作成方法
まずは、GitHubの導入方法から説明します。
まずアカウントを作成しましょう。
手順は次のとおりです。
- GitHubのサイトにアクセス
- 「GitHubに登録する」を選択
- 必要事項の入力
- 質問に回答
- 利用プランの選択
１．GitHubのサイトにアクセス
さっそく以下にアクセスしましょう。
２．「GitHubに登録する」を選択
「GitHubに登録する」を選択します。
３．必要事項の入力
次のような画面が表示されるので、必要事項を入力しましょう。
Username： 任意のユーザー名
Email address： 登録用メールアドレス
Password： 文字数は15文字以上、または数字と小文字を含む8文字以上で登録する必要あり。
Email preferences : 設定は任意。お知らせなどメール受け取りたい場合はチェック。
入力内容に問題がないことを確認したら「Verify your account」で、画像をいくつか選択し、あなたがロボットではないことを証明します。（画面の指示に従えばOKです。）
「Create account」を選択すると、画面がGitHub launch codeの入力画面に切り替わり、登録用メールアドレスにGitHub launch codeが送られます。
４．質問に回答
GitHub launch codeを入力し、Enterを押すと次のような画面が表示されます。
いくつか質問されるので、ご自身に置き換えて回答してください。選択すると「Continue」が選択できるようになります。
今回の場合は、質問１で「Just me」を選択しています。
質問１：何人のチームメンバーがあなたと一緒に仕事をしますか？
質問２：あなたは学生ですか、それとも教師ですか？
「Continue」を選択すると、次のような画面が表示されます。また、質問されるのでご自身に置き換えて回答してください。
今回は、特に回答しなくてもすすめられるようなので、何も選択せず「Continue」を選択します。
質問３：どのような特定の機能を使用することに興味がありますか？該当するものをすべて選択して、適切なGitHubプランを紹介できるようにします。
５．利用プランの選択
続いて次のような画面が表示されます。
利用プランの選択です。ここでは無料である「Continue for free」を選択します。
以上でアカウント作成は終了です。
２．Gitのインストール方法と初期設定
つづいて、Gitのインストール方法と初期設定について解説します。
手順は次のとおりです。
- Gitのダウンロード
- Gitのインストール
- Gitの初期設定
１．Gitのダウンロード
以下にアクセスします。この記事ではWindowsOSを前提として話を進めます。
「Download」を選択します。
２．Gitのインストール
次のようなファイルがダウンロードされるので、実行します。
内容に同意し、「Next」を選択。
インストール先を指定する画面が表示されます。特に問題なければ「Next」を選択。
インストールするコンポーネントを指定する画面が表示されます。特に問題なければ「Next」を選択。
スタートメニューの設定画面が表示されます。特に問題なければ「Next」を選択。
エディタを指定する画面が表示されます。今回は「Visual Studio Code as Git’s default editor」を選択し、「Next」を選択。
新しいリポジトリの最初のブランチ名を設定します。
「Let Git decide（デフォルト）」を選択するとブランチ名が「master」になります。
特に問題ないので、デフォルトのまま「Next」を選択。
環境変数を設定する画面が表示されます。
今回はコマンドプロンプトやVSCodeでgitコマンドを使用するため、デフォルトの「Git from the command line and also from 3rd-party software」を選択したまま「Next」を選択。
使用するSSHを設定する画面が表示されます。
今回はGitの持つOpen SSHを使用する「Use bundled OpenSSH」を選択したまま「Next」を選択。
HTTPSで接続する場合に使用する証明書を設定する画面が表示されます。
今回の場合、GitHubを利用するのでOpenSSLが持つルート証明書の使用を選択します。「Use the OpenSSH library」を選択したまま「Next」を選択。（カスタム認証局のルート証明書を使用する場合は下を選択するようです。）
レポジトリからのチェックアウト、コミットするときの改行の取り扱いを設定する画面が表示されます。
今回の場合は「Checkout Windows-style, commit Unix line endings」を選択したまま「Next」を選択。（企業や複数人で利用する場合などは、コーディングの規約に合わせて設定したほうが良いと思います。）
Gitで使用するコンソールを選択する画面が表示されます。特に問題なければ「Next」を選択。
GitでPullするときの動作を設定する画面が表示されます。特に問題なければ「Next」を選択。（企業や複数人で利用する場合などは、コーディングの規約に合わせて設定したほうが良いと思います。）
Gitに接続するときに認証補助を使用するかを設定する画面が表示されます。今回の場合は、Gitのユーザー名およびパスワードの入力を簡略的にしたいので、「Git Credential Manager」を選択したまま、「Next」を選択。
追加のオプションを設定する画面が表示されます。「Enable file system caching」を選択したまま、「Next」を選択。
試験的なオプションを設定する画面が表示されます。今回はどちらもチェックせず、「Install」を選択。
インストールが終了後、次のような画面が表示されます。「Finish」を選択しインストール作業を終えます。
３．Gitの初期設定
Gitを利用する上で誰がコミットしたのか分かるように、利用者の名前とメールアドレスを設定する必要があるため、設定します。
コマンドプロンプトを起動します。
次に以下のコマンドを入力します。
“{自分の名前}”と“{メールアドレス}”はご自身のものと置き換えてください。
git config --global user.name {自分の名前}
git config --global user.email {メールアドレス}
以上で基本設定は終了です。
３．【VSCode＆GitHub連携の前に】Gitの仕組みについて
VSCodeとGitHubの連携作業の前に、Gitの仕組みについてかんたんに解説します。
ここが理解できれば、連携後の運用もスムーズにできるようになります。
二人が共同作業する状況を例に説明するので、イメージしてみてください。
以下は、Git運用の基本的な流れを表しています。
作業者Aがソースファイルを修正し、作業者Bも同じソースファイルを使って作業する状況を絵にしています。
用語とgitコマンドを以下にまとめます。参考にしつつ、解説を見ましょう。
| 用語 | 説明 |
|---|---|
| リポジトリ | プログラムや作業内容の保管場所のこと。 |
| ローカルリポジトリ | ローカル環境にあるリポジトリ。この場合は各作業者のパソコンが該当。 |
| リモートリポジトリ | リモート環境にあるリポジトリ。この場合はGitHubが該当。 |
| ブランチ | 複数の作業を並列で進めるための機能。特定の目的のために複製・分岐させることが多い。 |
| リビジョン | 変更履歴のこと。 |
| gitコマンド | 説明 |
|---|---|
| コミット | 修正や削除などのファイル情報をリポジトリに送る。コミットすることでリビジョンが作成される。 |
| アド | ソースファイルなどをコミット対象にするために、インデックスというコミット対象のファイル置き場に登録する。 |
| プッシュ | ローカルリポジトリの情報をリモートリポジトリに反映する。 |
| プル | リモートリポジトリの情報をローカルリポジトリに取り込む。「git pull」コマンドはフィッチとマージを同時に行う。 |
| フィッチ | リモートリポジトリの情報をローカルリポジトリに反映するが、リモートリポジトリを最新にし、更新情報を取り込むだけでブランチへの取り込みは行わない。 |
| マージ | 特定のブランチやリビジョンを、ローカルリポジトリのブランチに取り込む。 |
ざっくり流れを説明すると、作業者Aが修正したソースファイルを①アド→②コミット→③プッシュして、リモートリポジトリにソースファイルをアップロードしています。
作業者Bは、同じソースファイルを使って作業するために、リモートリポジトリからローカルリポジトリに④プルしてします。
どうでしょうか。イメージはつかめたでしょうか。
GitHubとの連携には、ローカルリポジトリとリモートリポジトリの設定が必要なことが分かっていただけたと思います。
次はそれぞれの設定方法について解説します。
４．ローカルリポジトリの作成（VSCode）
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の活用は必須になってきます。ぜひご自身でも環境を構築してみてください。
ご清聴ありがとうございました。
あわせて読みたい！