「git pushってコマンド打つの、たまに失敗したり、そもそもターミナルで作業するのが苦手……」
もしあなたがそんな風に感じているなら、大丈夫です！そのお気持ち、現役エンジニアとして痛いほどよく分かります。特に、エラーメッセージが表示されると、どこをどう直せばいいのか分からなくて、時間だけが過ぎていく…なんて経験、一度や二度じゃないですよね。
でも、安心してください。今回は、そんなあなたのために、コマンドを一切使わず、VS Codeのマウス操作だけでGitHubにコードをアップロード（プッシュ）する方法を、業務効率化が得意な私が徹底解説します。
これでもう、難しいコマンドを覚える必要も、エラーで頭を抱えることもありません。サクッとプッシュして、開発効率を爆上げしちゃいましょう！
Gitの基本をおさらいしよう（超ざっくり）
VS Codeでの操作に入る前に、最低限知っておくと理解が深まるGitの用語を簡単にご説明しますね。
- Git（ギット）: あなたの書いたプログラムの変更履歴を記録・管理するためのシステムです。誰が、いつ、どんな変更をしたかをすべて記録してくれます。これがあれば、いつでも過去の状態に戻したり、複数の人で協力して開発したりできます。
- GitHub（ギットハブ）: Gitで管理しているプログラム（これを「リポジトリ」と呼びます）をインターネット上に保存してくれるサービスです。他の人と共有したり、バックアップを取ったりするのに便利です。
- プッシュ (push): あなたのパソコン（ローカル）で行った変更履歴を、GitHubなどのインターネット上のリポジトリにアップロードすることです。これにより、変更がみんなと共有されます。
- コミット (commit): プログラムの変更を「これで一区切り！」として、Gitに記録する作業です。例えるなら、ゲームのセーブポイントのようなもの。コミットごとに、どのファイルをどのように変更したか、そしてその変更がどんな内容だったかをメッセージとともに残します。
- ステージング (staging): コミットする変更を選ぶ作業です。たくさんのファイルを変更した場合でも、「このファイルとこのファイルの変更だけをコミットしたい」という時に使います。選択された変更は「ステージ」という一時的な場所に置かれます。
これだけ覚えておけば、VS Codeでの操作もスムーズに進むはずです！
VS CodeでGitHubにプッシュする手順
それでは、いよいよVS Codeを使った具体的な手順を見ていきましょう。
前提条件（まだの人は先に設定しておきましょう）
- VS Codeがインストールされていること: まだの方は公式サイトからダウンロードしてインストールしてください。
- GitHubアカウントが作成されていること: GitHubの公式サイトでアカウントを作成しておきましょう。
- VS CodeでGitが利用できる状態であること: 通常、VS CodeをインストールするとGitも一緒に使えるようになります。念のため、VS Codeのターミナル（
Ctrl + @で開けます）でgit --versionと入力してバージョンが表示されればOKです。 - ローカルのリポジトリがVS Codeで開かれていること: GitHubにプッシュしたいプロジェクトのフォルダをVS Codeで開いてください。（例:
ファイル>フォルダーを開く） - ローカルリポジトリがGit管理されていること: プロジェクトフォルダで一度もGitを初期化していない場合、VS Codeで「ソース管理」タブを開くと「リポジトリを初期化する」ボタンが表示されることがあります。これをクリックすればOKです。またはターミナルで
git initコマンドを実行しても良いでしょう。
これらの準備が整っていれば、すぐにでもプッシュ作業を開始できます！
1. 変更をステージングしよう
まずは、変更したファイルをコミットの準備である「ステージ」に移動させます。
- VS Codeの左側にあるアクティビティバー（アイコンが並んでいるバー）から、ソース管理アイコン（枝分かれしたような三つ並んだアイコン）をクリックします。
- 「ソース管理」ビューが開くと、あなたが編集したファイルが「変更」セクションに表示されているはずです。
- ステージしたいファイルの右隣にある「＋」アイコンをクリックします。または、すべての変更をステージしたい場合は、「変更」セクションの上にある「すべてステージ」ボタン（これも「＋」アイコンのような形です）をクリックします。
- ファイルが「ステージ済みの変更」セクションに移動したことを確認してください。
2. 変更をコミットしよう
次に、ステージした変更をコミットとして記録します。
- 「ソース管理」ビューの上部にある「メッセージ」と書かれた入力欄に、今回の変更内容を分かりやすく記述します。（例:
feat: ヘッダー部分のナビゲーションを追加やfix: ログインボタンの表示崩れを修正など） - メッセージを入力したら、入力欄のすぐ上にある「コミット」ボタン（チェックマーク「✓」のアイコン）をクリックします。
- これで、あなたのパソコン内のGitに、今回の変更が「セーブ」されました。
3. GitHubにプッシュしよう
いよいよ、コミットした変更をGitHubにアップロードします！
- VS Codeの左下、ステータスバーに注目してください。コミットが成功していれば、「変更の同期」ボタン（雲のアイコンに上下の矢印が描かれていることもあります）が表示されているはずです。
- この「変更の同期」ボタンをクリックします。
- 初回のみ、GitHubへのサインインを求められる場合があります。
- ポップアップが表示されたら「GitHubでサインイン」や「許可」のようなボタンをクリックします。
- Webブラウザが開き、GitHubの認証ページにリダイレクトされます。
- GitHubアカウントでサインインし、VS Codeからのアクセスを許可します。
- 認証が成功すると、「VS Codeを開く」といったメッセージが表示されるので、クリックしてVS Codeに戻ります。
- 認証が完了すると、自動的にプッシュが実行されます。
- プッシュが成功すると、ステータスバーのアイコンが更新され、何も表示されなくなるか、「✓」マークが表示されることがあります。
これで、あなたのGitHubリポジトリに変更が反映されました！ GitHubのサイトにアクセスして、プッシュしたファイルが更新されているか確認してみてください。
もし困ったら？よくあるトラブルと対処法
- 「変更の同期」ボタンが見当たらない！
- まずは、ステージングとコミットが完了しているか確認しましょう。「ステージ済みの変更」が空で、「メッセージ」欄が空になっていればコミット済みです。
- まだ「ローカルリポジトリがGit管理されていない」場合や、「GitHubにリモートリポジトリが設定されていない」可能性があります。「ソース管理」ビューの上部に「リポジトリを公開する」ボタンが表示されている場合は、それをクリックして手順に従ってください。
- GitHub認証でエラーが出る！
- GitHubのアクセストークンが失効しているか、設定が正しくない可能性があります。
- 一番簡単な対処法は、VS Codeを一度閉じ、再度開き直して、もう一度「変更の同期」を試すことです。再度認証を促されるはずです。
- それでも解決しない場合は、GitHubのWebサイトでアクセストークンを再生成するか、GitHubアカウントの設定を確認してみてください。
- GitHubリポジトリが存在しない、またはVS Codeのリポジトリと紐付いていない！
- プロジェクトフォルダを開いた状態で「ソース管理」ビューを見ると、「リポジトリを公開する」というボタンが表示されることがあります。これをクリックすると、新規でGitHubリポジトリを作成してプッシュするか、既存のリポジトリに紐付けるかを選択できます。
まとめ：これであなたも効率化マスター！
いかがでしたか？
VS Codeを使えば、難しいGitコマンドを覚えることなく、マウス操作だけで簡単にGitHubへプッシュできることが分かったと思います。
- コマンド入力のストレスから解放！
- エラーの心配も激減！
- サクサク変更を共有できる！
この方法をマスターすれば、あなたの開発効率はグンと上がること間違いなしです。現役エンジニアの私も、日常的にこのVS Codeの便利機能を使っています。
ぜひ、今日からこの方法を習慣にして、快適な開発ライフを送ってくださいね！ これであなたも業務効率化マスターへの第一歩を踏み出しました。
もしもっとVS Codeの便利な使い方を知りたければ、ぜひまた私の記事を読んでみてください！
コメント