事例
2023/10/29
與田 龍人

GitHub×VSCode チーム開発マニュアル

GitHubとVSCodeを組み合わせることで、チームでの開発が格段に楽になります。
このマニュアルでは、チーム開発におけるGIt操作とその基本的な手順を説明します。

1. 開発環境のセットアップについて


  • GitHubアカウントの作成 GitHubは、ソースコードを共有するためのサービスです。開発では、GitHubを使ってプロジェクトの管理やバージョン管理を行うことができます。


GitHubアカウントの作成は、GitHubの公式サイト: https://github.com/ から行えます。




  • VSCodeのインストール VSCodeは、無料で利用できる統合開発環境(IDE)です開発に必要な基本的な機能を備えているため、初心者にもおすすめです。


VSCodeのインストールは、VSCodeの公式サイト: https://code.visualstudio.com/ から行えます。




  • Gitのインストール Gitは、バージョン管理システムです。開発では、Gitを使ってソースコードの変更履歴を記録することができます。


Gitのインストールは、Gitの公式サイト: https://git-scm.com/ から行えます。





2. リポジトリのクローンについて


  • リポジトリとはソースコードを管理する1つの箱のような物です。

  • クローンは作られた箱(リポジトリ)を自身の環境にコピーすることで、独自の環境でコードの変更や追加を可能します。

  • 例)チーム開発においてリーダーが開発の基となるリポジトリを作成し、他のメンバーがそれぞれクローンすることでそれぞれの環境で開発を行うことができます。



以下では、その具体的な手順を解説しています。


2.1. GitHubでリポジトリを作成



  • GitHubのサイトで新しいリポジトリを作成します。


リポジトリとはソースコードを管理する1つの箱のような物です。


2.2. VSCodeでリポジトリをクローン



  • VSCodeを開きます。

  • 左サイドバーの「ソースコントロール」アイコンをクリックします。

  • リポジトリのクローンをクリックし、GitHubのリポジトリURLをペーストします。



git clone https://github.com/ユーザー名/リポジトリ名.git


3. ブランチの作成

ブランチは枝という意味があり、メインのソースコードに直接変更を加えずに開発を行うために、メインとは別に作成します。またメインのブランチに対するマージは、変更後、リポジトリの管理者によって承認を受けることで実際に変更を反映させることができます。



  • 左下のブランチアイコンをクリックし、新しいブランチ名を入力して、新しいブランチを作成します。




# 新しいブランチを作成します。 
# 下記の new-branch-name の部分を新しいブランチ名に置き換えてください。
git checkout -b new-branch-name



4. コードの編集とコミット

いよいよコードの編集とコミット(コードの変更)を行っていきます。


全体の流れとしては、コードの編集、変更をステージング、コミット作成、プッシュとリクエストの順で行っていきます。


4.1. コードの編集



  • 必要なファイルを開き、コードを編集します。


4.2. 変更をステージング



  • 「ソースコントロール」タブで、変更を右クリックしてステージを選択します。




# 変更をステージングします。
git add .



4.3. コミットの作成



  • コミットメッセージを入力し、✔ アイコンをクリックしてコミットします。


ステージングとコミットはこれから行う変更の準備だと理解しておくと良いでしょう。



# コミットメッセージを入力し、コミットします。
git commit -m "コミットメッセージをここに入力"


5. プッシュとプルリクエスト


  • 上部の…アイコンをクリックし、プッシュを選択して変更をリモートリポジトリにプッシュします。


ここでは準備してたコミットをメインブランチにマージするために、管理者にリクエストを送ります。




# ローカルの変更をリモートリポジトリにプッシュします。

git push origin new-branch-name




  • GitHubのサイトで、プルリクエストを作成して変更をメインブランチにマージします。




注意: このマニュアルは基本的な手順をカバーしていますが、実際の開発ではチームのニーズに応じて適切にカスタマイズしてください。


まとめ

GitHub、Git、VSCodeを組み合わせることで、チーム開発を効率的に行うことができます。


このブログを参考に、ぜひチーム開発を始めてみてください。


New call-to-action