見出し画像

【Git + GitHub】VSCodeを使ったGitベース開発の方法（GitHub上リポジトリと連携するまで）

1610

Git、GitHubとは？

Gitは分散型バージョン管理システムです。
ローカル端末上のソースコード変更履歴を自動で追跡してくれます。
また、リモートリポジトリへの同期を行なってくれます。

リモートリポジトリとは、ネットワーク上に存在する、プロジェクトの共有や協力作業を行う場所で、代表的なサービスが、Microsoft傘下のGitHubです。

※ リポジトリ＝Gitが管理するプロジェクトのデータやファイルが格納される場所のこと。具体的には、プロジェクトの変更、ブランチ、コミットなどが保存されるディレクトリ。

Gitによる開発はチームでの作業にとても便利ですが、個人にとっても恩恵は大きいです。

  • バージョン管理: コードの変更履歴を追跡し、過去の状態に簡単に戻ることができる。

  • チーム協力: 複数の開発者が同時に作業し、変更を統合できる。

  • 分散型構造: ローカルで作業し、オフラインでの開発も可能。

  • ブランチ機能: 異なる機能や修正を独立して開発し、後で統合できる。

  • リモートリポジトリ: 複数の開発者がリモートで共同作業し、プロジェクトを共有できる。

Gitは言語に依存しません。
あらゆる種類のプロジェクト、主にソフトウェア開発で利用されます。
GitHubは大変ポピュラーなプラットフォームで、Web開発、ソフトウェア開発、モバイルアプリ開発、データサイエンスプロジェクトなど多岐にわたる分野で利用されています。

VSCodeとは

Visual Studio Code（VSCode）はMicrosoftが提供している開発環境です。

同じ系統の開発環境にVisual Studio（通常のフルバージョン）がありますが、こちらがより広範な開発機能を提供する統合開発環境（IDE）であるのに対し、VSCodeはより軽量で汎用的なエディタという感じです。

主に複数の言語に対するコーディングやデバッグに焦点を当てています。

手順１：準備

準備として、以下の作業を済ませておいてください。

  1. GitHubアカウントの作成:

  2. VSCodeのインストール:

    • Visual Studio Code（VSCode）をダウンロードしてインストールします。 https://code.visualstudio.com/

  3. Gitのインストール:

    • Gitがインストールされていない場合、 https://git-scm.com/ からダウンロードしてインストールします。

  4. VSCodeにGit拡張機能のインストール:

    • VSCodeを開き、左側のアクティビティバーから「拡張機能」をクリックし、検索バーに「Git」を入力して、提案されるGit拡張機能をインストールします（Git Graphをお勧めします）。

手順２：GitHub上でリポジトリを作成する

GitHubにログインしたら、画面右上の＋ボタンをクリックして「New repository」を選択し、新しいリポジトリを作成します。

リポジトリをGit上に作成します

ここで作ったリポジトリはあくまでGit上のリポジトリです。
次の手順でローカル端末上でもリポジトリを作りますが、そちらと連携するための入れ物のようなイメージです。

ソースコードの作成などの具体的な作業は基本的にローカル上で行います。

チェックボックスは一旦無視で大丈夫です。リポジトリにはREADMEファイルを作成することが推奨されていますが、ローカル端末側で作成する場合はチェックを外しておきましょう。
新しいリポジトリが作成されました

手順３：プロジェクトディレクトリを作成、VSCodeで開き、初期化する

ここでは、VSCodeを使ったやり方を説明します（ターミナルなどCLI上からgitコマンドで作成する方法もあります）。

ローカル上の適当な場所にプロジェクトのディレクトリを作成します。作成したディレクトリをVSCodeの画面上、またはアイコン上にドラッグすると、ディレクトリ傘下のファイルがVSCodeに読み込まれます。

画面左側一番上のアイコンをクリックすると、Exprolerパネルに傘下のファイル構成が表示されます。

試しに、ファイルを作ってみましょう。
カーソルを新規作成のアイコンに合わせてクリックし、新規作成するファイルの名前をつけます（ここではREADME.md）。

こんな感じで編集もできます

この時点では、リポジトリの初期化ができていません。
そこで、画面左側のSauce Controlのアイコンをクリックし、Initialise Repository をクリックします。

Initialise Repositoryをクリック
この画面になったら成功

手順３：リモートリポジトリを追加

GitHubのリポジトリ画面から、URLをコピーします（ちなみにリポジトリ画面はGitHubの右上のアカウントアイコン > Your Repositories から切り替えることができます）。

URLをコピーします。
ttps://github.com/***/my_repository.git　みたいになってるはず

Sauce Controlパネル右上の三点リーダからRemote ＞Add Remoteをクリックします。先ほどコピーしたURLを貼り付けましょう。リポジトリの名前を聞かれますが、特になければ「origin」とするのが一般的です。

手順４：GitHubと連携する（Branchを公開する）

これで、GitHubとの連携の準備ができました。

同期する前に、CommitとBranchについて説明します。

Commitとは

Gitで変更をリポジトリに確定する操作です。
VSCode上で行なったファイルへの変更は、その時点では「仮の変更」の状
態です（ステージングと言います）。

  1. ステージング:

    • プログラムに変更を加えるとき、まずは「これを保存するよ！」って言う意味で、変更をステージングエリアに置きます。

  2. コミット:

    • ステージングエリアに置いた変更を、実際にリポジトリに保存することを「コミット」と言います。コミットすると、その時点でのプログラムの状態が記録されます。この際、どんな変更をしたかを一言で説明する「コミットメッセージ」もつけることができます。

  3. 履歴:

    • コミットを続けていくと、リポジトリの中にどんどん変更がたまっていきます。これが履歴と呼ばれるもので、いつでも昔の状態に戻れたり、他の人と協力しやすくなります。

例えば、ファイルに適当な変更を加えてみましょう（ここではREADME.mdファイル上の見出しを追加しました）。

この状態で「Commit」ボタンを押すことで、変更を正式に確定することができます。

Commitするまでは、VSCode上で変更した内容を復元（「元に戻す」）することができるのですが、Commitした時点でその変更が次のバージョンにおける正式なものとして確定されます。

Branchについて

Branch（ブランチ）は、Gitリポジトリ内での開発の流れを分岐させるための仕組みです。これにより、異なる機能や修正を同時に進めたり、安全に新機能を試したりできます。

通常の履歴が直列的であるのに対し、Branchは並列的な時系列を表せる感じです。

Branchという形で変更を体系的に管理することで、例えばある機能が追加されたBranchと追加する前のBranchを両方並行して公開したり、後からその機能が追加されたBranchの一部ファイルだけを別のBranchに統合したりといったことができます。

Branchを追加するには、VSCode左下の次の箇所をクリックします。
画面上側にオプションが表示されますので、Add New Branchをクリックし、適当な名前をつけます。

GitHubと連携するには、Publish Branchをクリックするか、画面左下の雲のマークを押します。
GitHubと連携するかどうか確認画面が現れますので、表示に従って進めてください。

うまく連携できれば、GitHubのリポジトリページが次のように変わるはずです。

この記事が気に入ったらサポートをしてみませんか？