自宅のデスクトップと外出先のノートパソコン、2台で開発を続けていると、ある問題に直面しました。
VSCodeでgitを使ってバージョン管理はしているものの、コードを2台で共有する方法がわからなかったのです。
USBメモリで毎回コピーするのは面倒だし、うっかり古いバージョンで上書きしてしまう危険もあります。
そこでGitHubを使うことにしました。
1. GitHubとは何か – クラウド上のgit保管庫
Githubは、gitで管理しているコードをインターネット上に保存できるサービスです。
gitは手元のパソコンでバージョン管理をするツールですが、Githubはそのgitの履歴ごとコード全体をクラウドに保存します。
これで複数のパソコンから同じコードにアクセスできるようになるわけです。
例えるなら、自分のパソコンという「家」で管理していた資料を、インターネットという「図書館」に預けるようなもの。
そうすると、どのパソコンからでもその図書館にアクセスして、最新の資料を取り出せます。
2. GitHubアカウントの作成
まずはGithubのアカウントを作る必要があります。
github.comにアクセスすると、トップページに「Sign up」というボタンがありました。
- メールアドレスとパスワードの設定
- ユーザー名の決定
- メール認証
登録したメールアドレスに認証コードが届きます。6桁の数字を入力すると、アカウントが有効になりました。
2.1. リポジトリの作成 – コードを入れる箱を用意する
アカウントができたら、次はリポジトリを作ります。
リポジトリとは、gitで管理しているプロジェクト全体を入れる箱のようなものです。
Githubのホーム画面の右上に「+」ボタンがあり、そこから「New repository」を選びました。
2.2. リポジトリ名と公開設定
リポジトリ名には、自分のプロジェクト名を入力します。
その下に「Public」と「Private」という選択肢があります。
Publicは誰でも見られる公開設定、Privateは自分だけが見られる非公開設定です。
今回は自分用のコードなので、Privateを選びました。
無料アカウントでもPrivateリポジトリは作れます。
「README file」を追加するかどうかのチェックボックスがありましたが、ローカルにすでにコードがあるため、チェックを外しました。
ここでREADMEを作ると、後でローカルのコードと統合するときに少し手間が増えるからです。
「Create repository」ボタンを押すと、リポジトリができました。
3. ローカルのgitとGitHubの接続（リモートリポジトリの追加）
リポジトリを作ると、次はローカルのgitとGithubを接続します。
VSCodeのターミナルを開き、自分のプロジェクトフォルダに移動します。
そして、以下のコマンドを実行しました。
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
Code language: JavaScript (javascript)このコマンドは、「originという名前でGitHubのリポジトリを登録する」という意味です。
originは慣例的に使われる名前で、メインのリモートリポジトリを指します。
実行しても何も表示されませんでしたが、これで設定は完了です。
確認のため、git remote -vと入力すると、登録されたリモートリポジトリのURLが表示されました。
3.1. コードをGitHubにアップロード
いよいよローカルのコードをGitHubに送ります。
この作業を「プッシュ」と呼びます。
最近のgitでは、デフォルトのブランチ名が「main」になっています。
もし、古いバージョンで「master」という名前なら、まずブランチ名を変更します。
git branch -M main
次に、実際にコードをアップロードします。
git push -u origin main
-uオプションは、今後git pushだけで自動的にoriginのmainブランチにプッシュされるようにする設定です。
初回だけ必要なオプションです。
コマンドを実行すると、ユーザー名とパスワードを求められました。
ターミナルに「Writing objects: 100%」のような表示が流れ、最後に「Branch ‘main’ set up to track remote branch ‘main’ from ‘origin’.」と表示されました。
GitHubのリポジトリページを更新すると、ローカルのコードがすべて表示されています。
コミット履歴も含めて、完全に移行できました。
3.2. 別のパソコンでのクローン作業
ここからが本題です。
外出先のノートパソコンで、GitHubからコードを取得します。この作業を「クローン」と呼びます。
3.3. リポジトリURLの取得
GitHubのリポジトリページで、緑色の「Code」ボタンをクリックします。
表示されるURLをコピーしました。
HTTPSとSSHという2つの方式がありますが、今回はHTTPSを使います。
3.4. クローンコマンドの実行
ノートパソコンのVSCodeで、コードを保存したいフォルダに移動します。
そしてターミナルで以下のコマンドを実行しました。
git clone https://github.com/ユーザー名/リポジトリ名.git
Code language: PHP (php)ここでもユーザー名とトークンを求められます。
トークンは先ほど保存したものを使います。
ダウンロードが始まり、数秒後に完了しました。
指定したフォルダの中に、リポジトリ名のフォルダが作られ、その中にコードがすべて入っています。コミット履歴も含めて、デスクトップパソコンの環境と完全に同じ状態です。
4. 編集してプッシュ、プルして同期
2台のパソコンで開発を続けるには、以下のサイクルを繰り返します。
# リモートの変更を取得してマージ
git pull origin main
# プッシュ
git push -u origin mainCode language: PHP (php)ノートパソコンでコードを編集したら、変更をコミットします。
VSCodeの左側のアイコンから、変更したファイルにチェックを入れ、コミットメッセージを書いて「Commit」をクリック。
その後、上部の「…」メニューから「Push」を選ぶと、GitHubに変更が送られます。
次にデスクトップパソコンで作業するときは、まず「Pull」を実行します。
これでGitHubから最新の変更を取得できます。
VSCodeなら「…」メニューから「Pull」を選ぶだけです。
この「編集→コミット→プッシュ」と「プル→編集」のサイクルで、常に最新のコードで作業できるようになりました。
まず、リモートに何があるか確認してから判断するのが安全です：
<em># リモートの内容を確認</em>
git fetch origin
git log origin/main
<em># 差分を確認</em>
git diff main origin/mainCode language: HTML, XML (xml)4.1. この方法の利点と限界
GitHubを使うようになって、複数のパソコン間でのコード共有が驚くほど簡単になりました。USBメモリも不要ですし、どのバージョンが最新かで悩むこともありません。
ただし、インターネット接続が必須です。オフラインでは、ローカルでのコミットはできても、プッシュやプルはできません。また、大きなファイル(動画や大量の画像など)を扱うプロジェクトでは、アップロードに時間がかかります。
それでも、複数のパソコンで開発を続けるなら、GitHubは間違いなく便利なツールです。最初の設定に少し時間はかかりましたが、一度設定すれば後は自然に使えるようになりました。