VScodeとGitでソースコードのバージョン管理をする方法①

2025.06.182025.06.20

Web制作システム

ソースコードの管理をどうするか？はサイト制作に関わる者にとって非常に重要で厄介な問題です。

中規模以上の開発を行う会社であれば、すでにバージョン管理システムが導入されておりそれを使うことになるでしょう。しかし個人のフリー技術者、自分のブログの制作・管理者、小規模サイトの制作を行うデザイン会社などであれば、自分のPCにソースを保存して、開発と本番の環境（サーバー）にアップして、Dropboxでもバックアップを取っているからいいや、なんてこともあるのではないでしょうか。

確かに複数個所のソースコードが一挙に失われる可能性は低いですし、作業者が1人であれば差分などもあまり考慮する必要もありません。本業が忙しくてバージョン管理システムなど導入している時間はない、というのが正直なところかもしれません。しかし一度導入してしまえば、作業が圧倒的に楽になることもまた事実です。そんな時間がない方のために、GitとVScodeを使ったバージョン管理システムの作り方をまとめます。

はじめに

Gitを使ったバージョン管理の話をする際にクセモノなのが用語です。リポジトリだのコミットだのリベースだの用語が並ぶ記事を見てそっとウィンドウを閉じた経験がある方もいらっしゃるはず。わからない単語が多すぎると理解力が急落し、ひとつひとつ調べる気力もなくなるものです。それぞれの用語のなんとなくの捉え方を先に書きます。

Git

読み方はギット。ソースコードのバージョン管理ツール。変更履歴を管理してくれる革命児。Gitっていうのが勝手に履歴とか差分とかとってくれるんだな、程度に捉えましょう。

GitHub

ギットハブ。Gitを使いやすくするためのウェブサービスとここでは軽く考えます。GitHubでブラウザからGUIでわかりやすく履歴など見れます。また無料クラウドサーバーとしてもふるまうため、自分のPCのファイルを編集し、GitHubと同期することでソースコードをクラウドに置けます。GitHubに一旦集約して、そこからステージングなり本番なりの環境に反映する中継基地（ハブ）です。現在はMicrosoftが所有。そのためVScodeとの連携は抜群です。

リポジトリ

サイトごとのフォルダ程度に捉えましょう。abc.comというサイトのファイル群をabcというレポジトリを作って保存する。厳密には違いますが、レポジトリ＝フォルダくらいに考えておくとスッと入ってきます。

ローカルリポジトリ／リモートリポジトリ

ローカルリポジトリは自分のPC/Macにあるサイトのフォルダ、リモートリポジトリはサーバー上にあるサイトのフォルダ。今回の作業ではリモートリポジトリ＝GitHubのサーバーにあるサイトフォルダを指しますが、本来はサーバーにあるリポジトリはすべてリモートリポジトリです。

コミット（ステージング）

ローカルのファイルを編集した後に必ず行う確定行為のようなものです。コミットした時点で初めて変更履歴が記録されます。ステージングはその一段階前の作業でステージング→コミットとするのが正式ですが、ステージングは省略も可能です。コミットしないと次の段階に移れません。

プッシュ／プル／フェッチ／クローン

ローカルとリモート同期の種類です。ざっくりいうとプッシュがローカルからリモートへのアップロード。プルとフェッチはリモートからローカルへのダウンロードで、プルは上書き、フェッチは競合する箇所は上書きしないようなイメージ。クローンは完全同期。マージやリベースは話が複雑になるので今回は触れません。

ブランチ

複数バージョンの管理、というと難解に聞こえますが、複数ファイルが関連する大き目の修正をするときに別バージョンとして修正していこう、という機能です。元となるファイル群に一切影響を与えずに安全に作業できます。

導入のメリット

通常であれば「複数人での共同作業が容易」が1番に来るのですが、今回は記事はターゲットが違いますので下記のような順番になります。

履歴管理ができる

Gitがファイルの変更履歴を追跡・記録してくれます。変更履歴の特定の箇所に戻ることができます。手動でのコード管理と比べ圧倒的に便利かつ安全です。いろいろな箇所を修正しているうちに動かなくなったり表示が崩れたとき、手動だったら原因の特定が大変ですが、Gitがあればサクサクと戻れ、原因の特定が簡単になります。

使い慣れたVScodeからGUIで作業を完結できる

普段のコーディングに使用しているVScodeからGitでの履歴管理をした上に、最終的にGitHubへのアップロードまでをGUIで行うことができることが最大のメリットです。VScodeはコマンドプロンプトにも当然対応していますが、それらを使わずにすべての作業を完結することができます。

ブランチでバージョン管理ができる

「ブランチ」の用語解説で書いた通りです。進むか戻るか一直線だった作業過程を枝分かれさせて、元ファイルに影響を与えない形で改修作業ができる超便利機能です。回収がうまくいかなかったり別の問題が出てくればブランチを切り捨て、万事うまくいけばブランチをマージすれば完了です。バックアップファイル＆フォルダを作りすぎてどれがどれかわからなくなる日々とはさよならです。

安全にコードを管理できる

ローカルで作業したものをリモート環境＝GitHubにアップロードすることで、ソースコードを安全に管理することができます。担当者のPCと社内のNASにソースを保存していたが、担当者が退社してソースコードがどこにあるかわからない、などという事態も防げます。GitHubを見に行ってローカルにクローンすれば完了です。ローカルのSSDやHDDが故障してもソースコードは守れます。

分散型のバージョン管理システムである

本来は一番に取り上げるべきメリットです。複数人の開発者が会社で、自宅でそれぞれ作業して最終的にGitHubにコードを集約させることができます。しかも修正箇所が衝突した場合も履歴を見ながらマージするのかなど判断ができます。今回の記事では優先順位は低くしています。

Gitのインストール

自分のPCやMacにGitをインストールします。なんとなくGitHubのPC/Mac版アプリかな？と思いがちですが、GitHubとは全く関係ありません。ローカルでGit＝バージョン管理をしてくれるアプリです。これがバックグラウンドで動いてくれるから、自分のPCでファイルの更新履歴が勝手に取られているわけです。

下記サイトからダウンロードします。
https://git-scm.com/downloads

赤く囲ったDownloadsから環境にあったものをダウンロードします。

Windows版 Gitのインストール

Windowsの場合です。ほとんどの場合は赤く囲ったWindows/x64 Setupで問題ないでしょう。ARM64はARM版のWindows、Portableはフラッシュメモリ（USBメモリなど）で使うポータブル版のことです。

インストールは指示に従うだけです。Nextをクリック。インストール先フォルダなどは省略します。

コンポーネントの選択です。デフォルトで構いません。

デフォルトエディターの選択で「Use Visual Studio Code as Git’s default editor」を選択してください。VimやNotepad++などの選択肢があります。

その他はデフォルトで問題ありません。

コマンドラインからGitがインストールできているか確認します。Winキー+rで「ファイル名を指定して実行」を呼び出しcmdと入力します。

コマンドラインにgit —versionと入力してバージョン情報が表示されればインストールされています。

デフォルトのままインストールすればGit Bashもインストールされているはずです。Git BashはLinuxのBashシェルをエミュレートしたもので、Windows環境でもLinuxのコマンドが使えるようになります。

Mac版 Gitのインストール

MacはOSにもよりますが、最初からGitが入っていることが多いです。ターミナルから下記コマンドを入力し git version が表示されればインストールされています。新規でインストールする必要はありません。最新バージョンにするには後述するHomebrewなどのパッケージ管理ソフトを使用します。git: command not foundなどのエラーメッセージが表示される場合は、新規でインストールが必要です。

git --version

Macの新規インストールは少し複雑です。インストーラーのdmgファイルは用意されていません（あっても古いです）。一番手っ取り早いのはXcodeをインストールすることです。XcodeはAppleが用意しているアプリの開発環境です。パッケージにgitが含まれていますので、XcodeをインストールすればGitもインストールされます。下記リンクでもApp Storeからでも問題ありません。

https://developer.apple.com/jp/xcode

HomebrewとMacPortsはパッケージ管理システムです。Gitのバージョン管理をするために掲載されているのだと思います。それぞれコマンドラインからインストールする方法が書かれています。今回の作業に必須ではありませんが、どちらか好きな方を入れておくと今後の管理が楽になるでしょう。

App StoreからXcodeを検索します。入手からインストールするだけです。こちらは途中の選択肢もないため省略します

Macの確認方法も同じです。ターミナルからgit —versionと入力します。

git --version

GitHub Desktopについて

GitHubのPC/Mac用アプリについて言及しましたが、それはそれで存在します。GitHub Desktopです。ターミナルやGitBashなどのコマンドラインから操作することが基本であるGitをGUIで操作できる公式アプリです。今回はVScodeとの連携を主としていますので紹介しませんが、コマンドを打ち込むのが苦手という開発者にはこちらもおすすめです。

https://github.com/apps/desktop

以上でGitのインストールが完了しました。記事にすると長いですが作業は簡単です。続いてGitHubの準備をします。

GitHubのアカウントを作成する

GitHubのアカウントを作成します。繰り返しになりますが、GitHubはGitを使いやすくするためのウェブサービスであり、無料のクラウドサービスでもあります。ローカルで編集したファイルたちをGitHubにアップロードすることでファイルの一定の安全性が担保され、ブラウザベースで更新履歴の確認なども行えます。

https://github.com

入力フォームは英語です。翻訳するなりして登録します。登録内容は下記のとおりです。*は入力必須項目です。

Email*

メールアドレスを登録します。ここでは test@test.net というアドレスで登録したとします。

Password*

パスワードです。15文字以上、もしくは数字と小文字を含む8文字以上。必須項目です。

Username*

ユーザー名です。英数字と-（ハイフン）のみ使用可能。最初と最後にｰは使用不可。ここでは test-vscode-test というユーザー名で登録したとします。

Your Country/Region*

国名です。Japanを選択します。必須です。

Email preferences

最新情報とお知らせ。公式のメルマガです。必須ではありません。

GitHubにログインする

試しにログインしてみましょう。さきほどのトップページから右上の「Sing in 」をクリックします。ユーザー名／メールアドレスとパスワードでログインします。

無事ログインできました。Newボタンをクリックして、試しにリポジトリを作成してみましょう。フォルダのようなものです。

Repository nameの箇所にレポジトリの名前を入力します。サイトの名称などがわかるものがよいでしょう。ここではわかりやすくVScodeTestとします。

Public/Privateの項目は注意が必要です。GitHubはオープンソースコミュニティですので、Publicにした場合、ソースコードが公開されます。全世界に公開されて互いにレビューできることがオープンソースの素晴らしいところですが、クライアントが特定できる情報などがコードにあった場合は一大事です。今回はテストですのでPrivateを選択します。

GitHub側の設定はこれでひとまず終了です。

GitにGitHubの情報を登録する

GitHubでユーザー登録を行いましたので、すでにインストールしているGitにユーザー情報を登録することで、このふたつを紐づけます。深く考えすぎるとこの辺りで頭が混乱してきます。

あなたのPCにインストールされたGit＝バージョン管理システムの裏方さん、はまだGitHubのことを知りません。そこでGitにGitHubのユーザー情報を登録することで、ウェブサービス＆クラウドサーバーとしてのGitHubと、PCに入ってローカルファイルを監視しているGitを紐づける必要があるのです。

Gitのインストール確認をしたときと同じ要領で、コマンドラインから下記を入力します。

git config --global user.name test-vscode-test
git config --global user.email test@test.net

内容は以下のとおりです。gitの設定ファイル（config）を書き換えます。現在作業中のレポジトリだけではなく全体設定として（—global）設定します。ユーザーネームはtest-vscode-testです。ユーザーメールはtest@test.netです。—globalのオプションを忘れないように注意します。この設定は一度すれば設定ファイルに書き込まれますので次回以降は必要ありません。

設定ファイルの格納場所はWindowsであればユーザープロファイルのルートです。Cドライブにtestというユーザーで作業しているとすると c:\users\test の中に .gitconfig という隠しファイルが生成されているはずです。下記のような内容になっているはずです。

[filter "lfs"]
	clean = git-lfs clean -- %f
	smudge = git-lfs smudge -- %f
	process = git-lfs filter-process
	required = true
[user]
	name = test-vscode-test
	email = test@test.net
[core]
	editor = \"C:\\Users\\test\\AppData\\Local\\Programs\\Microsoft VS Code\\bin\\code\" --wait

[user]に今しがた登録したGitHubのユーザー、メール情報が。[core]にインストール時に紐づけたVScodeのパスが入っています。

SSHの設定

コマンドラインを開いたついでにSSHの鍵を作っておきます。自分のPCとGitHubの間での通信をSSHを使って行うためです。下記を入力します。

ssh-keygen -t rsa

ここではGit Bashを使用しています。途中で下記3点の入力を要求されますが、すべてEnterを押せばOKです。保存先、パスフレーズ、パスフレーズの再入力と求められています。

Enter file in which to save the key (RSAへのパス)
Enter passphrase for “RSAへのパス” (empty for no passphrase)
Enter same passphrase again:

完了すると下記のような画面が表示されます。適宜ぼかしを入れています。RSA暗号でSSHの鍵を作ったということです。

公開鍵をGitHub側に設定する必要があるため、コピーします。コピーのコマンドは下記のとおりです。公開鍵(id_rsa)をclipコマンドでクリップボードにコピーしています。今回はEnter連打でデフォルトインストールしていますのでこちらのフォルダですが、手動で指定した場合はそちらに読み替えてください。