（2025.7.5 記）
開発者が増えたので、「そろそろバージョン管理を行おう」、と思い立ってやってみた作業メモになります。
今回は、GitHubにリモートリポジトリを設置し、VSCodeとGitの拡張機能を使ってローカルリポジトリで作業しながら完成分をリモートリポジトリに上げる、みたいな構成を作りました。
今回、稼働させるWEBサーバはDockerによる仮想環境を利用しています。
Docker周りの環境整備についてはこちらの記事で紹介していますので、併せて見てもらうと良いでしょう。
VSCodeのインストール方法は省略しています。
インストール済みの状態でご覧ください。
参考になれば幸いです。
対応時間：リポジトリの容量にもよるが、今回は1時間程度
０．実行環境
■Docker仮想環境
・LinuxOS：Ubuntu24.04LTS
・Apache：2.4
・MySQL：8.0
・PHP：7.4
■開発環境
・Windows11（24H2）
・VSCode（1.101.2）
１．Gitのインストール（開発機）
まず開発機で、バージョン管理ツールであるGitをインストールします。（インストール済みであればここは飛ばしてください。）
こちらのページからGitのHPに飛べるので、そちらからインストールします。
「https://git-scm.com/downloads/win」をクリックすると、Windows用のインストーラが置いてあるページに移行します。（他のOSの場合は、Gitの上記ページ前後にLinuxやMacOSのインストール方法が書かれた文章があるので、そちらを参考にするといいでしょう。）
「Git for Windows/x64 Setup」を選択しました。
選択すると自動的にダウンロードが始まります。
ダウンロードしたインストーラを起動し、インストールを始めます。
「Next」↑
「Next」↑
何も変更せず、そのまま「Next」（必要物があれば再度インストールでOK）↑
「Next」↑
「Use visual Studio Code as Git’s default editor」を選択→「Next」↑
「Next」↑
「Next」↑
「Next」↑
「OpenSSL Library」を選択→「Next」↑
「Next」↑
「Next」↑
「Next」↑
「Next」↑
「Install」↑
チェックを外して「Finish」↑
これでGitのインストールは完了。
２．GitHubの設定
GitHubにリモートリポジトリを置くために、まずはGitHubに利用登録します。（基本無料）
既に利用されている場合はサインアップの手順を飛ばしてください。
まずはGitHubのホームページに飛び、サインイン、またはサインアップします。
以下はサインアップの画面です。↓
ログイン後の最初のページはこのようになっていますので、「Create repository」を選択し、リモートリポジトリを作成していきます。↓
下図がその設定画面になります。↓
（公共（Public）に設定すると公開されてしまうので、赤枠の設定は注意してください。）
これでリモートリポジトリの作成と設定は完了です。
※この画面のUIからもリポジトリにソースなどの追加等行えますが、Gitから直接作成することも可能です。今回はこの説明を省きます。
次にこのリポジトリの編集可能者を追加します。（しないと他者がこのリポジトリを見にいって編集できません・・・）
リポジトリ（下図だと「test」）→ Settings → Collaborators → Find a collaborator
の手順で編集者を探します。
※編集者はGitHub登録者であることに注意です
このコラボレーターはリポジトリ毎に設定が必要です。
これでリモートリポジトリの設定が整いました。
３．VSCodeの設定
まずリモートリポジトリからローカルにリポジトリをクローンしてきます。
適当なディレクトリを作成し、その中で 右クリック → Open Git bash here でGitのコマンド画面を開きます。
その中で、次のコマンドを打つことでリモートリポジトリからデータをクローンできます。
※非公開の状態だと、対象GitHubのパスワードが求められます
git clone -b '[ブランチ名]' [リポジトリのURL]
ローカル環境にリポジトリがダウンロードされました。
中身も確認できます。
VSCodeでこのリポジトリを参照すればいいという寸法です。
次に、VSCodeを起動します。
記事作成当時のVSCodeのバージョンだと、以下写真のような「ソース管理」のアイコンがあるはずです。
中身は上から順に「リポジトリ初期化」と「GitHubに公開」となっています。
※リポジトリが初期化されていないフォルダで開くと下図のような画面が開きます
GitHubに上げない場合は「リポジトリの初期化」を選択します。
※リポジトリがある場合は画面が異なります。
リポジトリを含むフォルダの選択をするか、リポジトリのクローンが行えます。
※ここでクローンしちゃってもいい
ここまででGitリポジトリを作成、クローンしていたので、今回はその対象フォルダーを開く操作で説明を行います。
作成者を信頼します。↓
選択されたフォルダの中身が表示されます。↓
拡張機能のGitHistoryが入っていると、次のようにブランチや変更点が確認できるので便利です。↓
時計マークを押すと、中央ペインで詳細が確認できます。↓
コミットする場合は、左ペインで「ソース管理」を選択し、↓
「変更」ペインを見ます。
編集済みは「M」、新規ファイルは「U」が右側に表示されますので、その隣の「＋（変更をステージ）」を押下します。
すると、「変更」ペインが下図のように表示が変わります。
この状態で、「メッセージ」欄にメッセージを記入し、「コミット」ボタンを押下すると、リモートリポジトリへデータがコミットされます。
連続して「＋（変更をステージ）」をすれば、一気に変更ファイルをコミットすることができます。
以上！
４．最後に
このリポジトリの中にDocker等の仮想環境の設定ファイルも含めてあげれば、誰でも一律に開発環境の構築が可能となるので便利です。
VSCodeにコーディングAIの拡張機能を試しているので、次回はその辺りを記事にできればと思います。
ブランチの作成、クローン等細かい操作については、カゴヤさんのページがとても分かりやすくまとめてあるので、あえてこちらでまとめずに参照だけしておこうと思います。
▼オススメ教本▼
コメント