Visual Studio Codeからgithubを利用する – ③githubへプッシュする

Visual Studio Codeを利用して開発したファイルをgithubで管理するためのあれこれを記事にしてみました。

この記事ではVisual Studio Codeで開発したファイルをgithubへプッシュするところまでを行います。ローカルで未管理状態にあるファイルをgitの管理化におき、さらにこれをgithubへプッシュすることでリモートで分散管理できるようにします。
仕事では当たり前のように使用するgithub(enterprise)ですが、個人開発を行う際にも手放せないツールになりました。昔はデータの喪失に備えて別のHDD上にコピーするなどしていたのですが、今ではほとんどgithubにおまかせです。

以下の記事の続きです。

ローカルリポジトリを作成する

まずはgitによる管理を行うための場所として自分の端末上にローカルリポジトリ(.gitディレクトリ)を作成します。Visual Studio Codeの場合、Source Controlを表示(左端のアイコンをクリックするか、CTRL+SHIFT+G)してInitialize RepositoryボタンをクリックすればOKです。

ただしこの操作ではディレクトリの指定はできず、workspace全体がgitの管理化に置かれます。

もし個別にディレクトリを指定したい場合はTerminalでgit bashを起動し、管理下に置きたいディレクトリに移動しそこで

git init

を実行するとよいでしょう。

ファイルをローカルリポジトリに登録する

次に、作成したソースコードなどのファイルをgitのローカルリポジトリに記録(保管)していきます。

ローカルリポジトリへの登録作業は2段階に分かれています。

  • ステージングエリアへファイルのスナップショットを追加(git add/git rm)
  • ステージングエリアの内容をコミット(git commit)

直接git commitできる場合も存在するのですが、あまり覚えなくて良いと思います。

ステージングは頻繁に登場する単語であり、様々なgitツールで当たり前のように使用されています。

ステージングエリアへ追加

まずは、新規作成したファイルのスナップショットをステージングエリアに追加します。ステージングエリアに追加してステージ済となったスナップショットがコミットによりローカルリポジトリへ記録されます。

なお今回は全て新規作成ですが、ファイルを修正・削除した場合にも同じくスナップショットをステージングエリアに追加していかないと、コミット対象になりません。
一見面倒ですが、コミットする範囲をステージングエリアで明確に指示できるのは、複数機能を同時に開発しつつ1機能ずつコミットしていく、などと行った場合に非常に助かります。個人開発だとあまり気にしませんが、仕事での開発だとこれがないと自分は困ってしまいます。

追加の方法ですがVisual Studio Codeの場合はGUIで操作が可能です。Source Controlに作成したファイルの一覧が表示されているので、+ボタンをクリックするだけです。これでファイルのスナップショットがステージングエリアに追加されます。

全てのファイルを追加した状態が下の画像です。
CHANGESのファイルが全てSTAGED CHANGESとなり、ステージングエリアにステージ済となっています。

 このステージングエリアへの追加をgit bashからコマンドで実行する場合は、

git add -A .

とすればよいです。ただしこのコマンドは全ファイルをまとめてステージングエリアに追加するので、初回を除いては使用しないほうが安全です。

また、ステージングエリアの内容をコマンドで確認したい場合は、

git status

とすれば確認できます。

(ちょっと脱線)

ステージングエリアに追加済のファイルを、後から修正したくなった場合です。
これまで時折スナップショットという表現を使用してきましたが、コミットによりリポジトリに記録されるのは、あくまでもステージングエリアに追加した時点のファイル内容です。後から行った修正はそのままではリポジトリに記録されません。
このステージングの仕組みはgit独特だと思います。git未経験者が開発プロジェクトへ参画した時につまづくことが多いイメージです。

もし後から行った修正もリポジトリに記録したい場合、もう一度ステージングエリアへの追加を行います。逆に後から行った修正はリポジトリに記録せず手元での修正にとどめておきたい場合は、追加しなければOKです。

例として、既にステージングエリアに追加したREADME.mdを開いて適当に内容を変更してみます。すると、Source ControlでSTAGED CHANGESの下とCHANGESの下両方にREADME.mdが出現します。CHANGESのREADME.mdをクリックすると、ステージングエリアのスナップショットと追加修正した最新ファイルとの差分が表示されますので、これもコミット対象としてリポジトリに保管したい場合は再度+ボタンをクリックしてステージングエリアに追加します。今回のコミット対象に含めたくない場合はそのままにしておきます。
このあたりの柔軟さがgitの便利な点です。
また、STAGED CHANGESのREADME.mdをクリックするとステージングエリアのスナップショットと前回コミットした時の差分が表示されますが、今回は初回コミットなので全量が差分として表示されます。

ステージングエリアの内容をコミット

ステージングエリアに追加した内容をコミットしてローカルリポジトリに保管します。

Visual Studio Codeの場合は、Source ControlからMore ActionsのうちCommit Stagedを選択することでコミットできます。

git bashからのコマンドでコミットする場合は、

git commit

です。-mオプションでコメントを指定しなかった場合はエディタが起動するので、そこでなんのためのコミットかがわかるようにコメントを入力しましょう(今回は初回コミットなのであまり意味はありませんが)。

githubにリモートリポジトリを作成する

ここまでの作業でファイルはローカルリポジトリにコミットされ、ローカル環境での管理は開始されました。これだけでもgitの様々なメリットを受けることは可能です。しかしこのままではディスクが壊れた時にデータが失われてしまいます。そこで、githubによるリモート管理を行います。

まずは、githubでリモートリポジトリを作成します。

githubにログインし、右上の+ボタンをクリックすると出てくるメニューのなかにNew Repositoryとあるので、これでリモートリポジトリを作成します。

作成する際、リモートリポジトリを非公開にする場合はprivateを選択してください。
また、README.mdファイルや.gitignoreなどの作成が必要な場合は適宜設定してください。ただしこの記事の場合は、プッシュする時に面倒なので何も作成しないほうが楽です。

リモートリポジトリを作成したら、作成したリポジトリにsshでアクセスするためのパスを取得します。
パスは、リポジトリのトップ画面の右側にあるClone or downloadというボタンをクリックすると表示されます。もしHTTPSのURLが表示されていた場合は、Use SSHをクリックすることでSSH URLが表示されます。このパスが後で必要になるのでメモしておきます。
(HTTPSでも可能ですが、ここではSSHで進めます)

リモートリポジトリを追加する

いよいよローカルリポジトリにコミットした内容をリモートリポジトリで保管するためのプッシュを行います。

まずは、ローカルのgitからgithubのリモートリポジトリへアクセスするためにリモートリポジトリの追加作業を行います。Visual Studio Codeの機能で行う場合はCommand Palletを使用する必要があるようです。

Command Palletを開いて、

>Git Add Remote

を実行すると、まずRemote nameを聞かれるのでoriginと入力します。次にRetemo URLを聞かれるのでSSH URLを入力します。これで追加が完了します。

また、Terminalのgit bashからコマンドで追加する場合は、

git remote add origin [SSH URL]

とすればOKです。
Command Palletで行うメリットはほとんどないと思うため、Visual Studio Codeに依存しないgitコマンドの方を覚えた方が良いと思います。

このコマンドを実行すると、リモートリポジトリがoriginという名前で追加されアクセスできるようになります。ちなみに、originという名前である必要はなく別の名前を使用しても良いのですが、慣例でoriginを使用するようになっており、自分が参画したどの開発プロジェクトでもorigin以外の名前を使用したことはありません。

リモートリポジトリにプッシュする

最後に、originという名前でアクセスできるようになったリモートリポジトリに、ローカルリポジトリで作成したソースコードをプッシュします。

Visual Studio CodeのSource Controlからもプッシュはできるのですが、鍵にパスフレーズを指定している場合にエラーが起きて解消が少し手間なので、ここではgit bashからプッシュしています。

プッシュするにはgit bashから、

git push -u origin master

というコマンドを実行することでoriginという場所にあるmasterブランチへのpushが完了します(ブランチの説明はここでは省略します)。

ただし、リモートリポジトリを作成した際にREADME.mdや.gitignoreなどを作成した場合は、上のコマンドを実行してもrejectされます。
リモート側で更新されているのでgit pullで統合しろうんぬんと怒られます。
しかしこれを受けてgit pullを実行すると今度は無関係なヒストリ(unrelated histories)を持つという理由でマージが拒否されます。
この場合は、

git pull --allow-unrelated-histories origin master
git push -u origin master

の2つのコマンドでpushできると思います。
ただしローカルにも同じREADME.mdなどのファイルがあるとgit pullでコンフリクトが発生するので、git pushの前にコンフリクトの解消と解消した内容のgit add、git commitが必要になります。

ローカルで開発したコードを途中からgithubで管理し始める場合は、githubでリモートリポジトリを作成する際にREADME.mdなどは生成せず空のリポジトリにしておくのが無難かと思います。

ちなみに、今回は初回登録時なので–allow-unrelated-historiesを使用しています。これ以外のケースで無関係なヒストリになることはまずなく、無関係なヒストリという警告を受けた場合はなんらかの問題が生じている可能性が高いです。よってこのオプションを乱用するのは危険かと思います。

githubにプッシュされたことを確認する

ブラウザでgithubへアクセスし、ファイルが保管されたことを確認しておきましょう。

無事githubでファイルの分散管理が開始されました。

さいごに

普段はeclipseのプラグインなどでgitを操作しているのですが、今回は初めてVisual Studio Codeから操作してみました。

Source Controlからはgitの初期化・修正ファイルやステージングエリアの操作・修正内容の差分表示・Commit・Push・Pullなど色々な操作が可能でした。Source Controlからは無理でもCommand Palletからは可能な操作もいくつかありました。
ただ、git bashから直接gitコマンドを打ち込んだほうが楽な場面も多々あったので、自分ならSource Controlとgitコマンドの組み合わせで作業すると思います。

また、修正履歴をグラフィカルに表示するextentionなどもあるので、のちのちそれらをインストールした方が良い場面もありそうです。

もっとも、Visual Studio Codeで開発しているからといってgitもそこから操作する必要はないので、

  • git guiコマンドで起動するGUIツールを使う
  • Source Treeのような別のGUIクライアントを使う

といった選択肢もありだと思います。
自分が携わっているプロジェクトでは、Source Treeやeclipseのプラグインなどをプロジェクト共通のGUIツールとして採用して、gitに慣れている人はgitコマンドも使うという感じにすることが多かったです。
tortoisegitが採用されることもたまにあったのですが、これはステージングの操作が簡略化されており便利な点があるものの、git自体の習熟にはあまり向かないということで、採用率自体は低いです。

結局のところ、自分にあったツールを見つけて使うのが一番だと思います。

コメント

タイトルとURLをコピーしました