【最短10分】VisualStudioCodeでGitHubにプッシュする方法

gitは複数人で行う上で必須のツールです。
エンジニアで働く上では必ずと言っていいほど使います。
副業でもソースコードを共有し、成果物を納品する際に「GitHubにプッシュしてください」と言われます。
Gitが出来ることが前提条件として記載されていることもありますね。
今回はGitをリモートリポジトリにプッシュ(クライアントが見れる環境にアップロードする）する方法を解説します。

※Macのターミナルを使います。
Windowsの方はVisualStudioCodeで開くターミナルを「GitBash」などに変更すれば同じように出来ます。
設定→ターミナルの項目で変更可能。

Table of Contents

前提条件

Gitはコマンドラインで操作します(GUIもありますが)。
コマンドの基本的な操作はProgateなどで学習しておいてください。

以下のProgateのレッスンと、Gitの環境構築をトライしてみましょう。

必要な物

VisualStudioCode
GitHubのアカウント(無料会員で良いです)

行うこと

以下が簡単な概略図になります。

まずファイルはワークツリーに置いてあります。これはパソコン内にフォルダやファイルが配置されている状態です。
特定のフォルダとその配下のフォルダ・ファイルをGit管理化にすることが出来ます。
リポジトリというところに更新した履歴を記録します。

リポジトリはローカルとリモートがあり、ローカルリポジトリは自分1人で管理する際に使います。
なので、ローカルリポジトリまでが自分のパソコンにあります。
リモートリポジトリは外部のサーバーに記録します。複数人で使用することが基本です。
もちろん1人で使うことも出来ます。

実際の手順

では実際に操作してみましょう。

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

GitHubにリモートリポジトリを作成します。
公開設定は練習なのでPublicでもPrivateでもどちらでも構いません。
Initialize this repository with a READMEはチェックしておいてください。

これでリモートリポジトリが作成されました。

ここでは「test」というリモートリポジトリ名で作成しています。

ここまでの手順は業務であれば、既にリモートリポジトリが存在するので、
必要ない認識で大丈夫です。　

リモートリポジトリをクローンする

リモートリポジトリのデータをローカルに複製することをクローンと言います。
VisualStudioCodeでターミナルを開きます。
※ショートカット「Control」+「Shift」+「@」で開きます。

cdコマンドでダウンロードしたい場所まで移動して、以下のgitコマンドを実行します。
(ここではデスクトップにしています）
git cloneの後のURLはGitHubのリポジトリに緑色のボタンから確認出来るので、コピペしてターミナルに貼り付けましょう。

git clone https://github.com/xxxxxx/test.git

正常に終わると、デスクトップに「test」フォルダが作成されていると思います。
フォルダに中には「README.md」ファイルがあると思います。

フォルダ内にファイルを作成する

クローンしたフォルダを開き、適当なファイルを作成します。
ここではindex.htmlファイルを新規作成し、何かしらのコードを書き保存しました。

インデックスに登録する

ターミナルでtestフォルダに移動します。

以下のaddコマンドを実行し、ワークツリーにあるファイルをインデックスに登録します。

git add index.html

ローカルリポジトリにコミットする

インデックスに登録が成功したら、そのままコミットをします。
コミットはローカルリポジトリに履歴を保存するコマンドです。
※gitはこのようにワークツリーとインデックスを経由して保存されるので、最初は分かりにくいです。すぐに慣れますので最初はとにかく数をこなしましょう。

git commit -m "初めてのコミット"

ダブルクォーテーションで囲まれたテキストはコミットメッセージです。
プロジェクト内でメッセージルールなどがあれば従いましょう。大体過去のログを見ると、どんな感じでメッセージ残してるか分かるので、最初に確認することをオススメします。

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

いよいよGitHubにアップロードします。リモートへのアップロードはpushコマンドを使います。

git push origin master

originというのは、リモートリポジトリのサーバー名を指しています。
試しに

git remote -v

とすると、

origin https://github.com/kukka-me/test.git (fetch)
origin https://github.com/kukka-me/test.git (push)

という情報が出てくるかと思います。
これはgit cloneを実行したタイミングで、自動的に設定されています。別の接続先に変更することも可能です。

masterというのはブランチ名のことです。
ここでは解説しないですが、リポジトリ内にブランチを作成することが出来、複数の作業を並行して行うことが出来ます。
masterブランチは最初に作成されるブランチなのですが、開発者がmasterブランチに直接プッシュすることは通常ないです。
大抵はローカルに別のブランチを作成し、リモートリポジトリにも別ブランチをプッシュすることがほとんどです。