🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【Git連携入門】VSCodeでGit・GitHubを使うための基本操作ガイド

この記事では、プログラミング初心者やWeb制作者が必ず通る道、「Git」と「GitHub」の連携方法を、VSCode（ビジュアルスタジオコード）を使って、世界一わかりやすく解説します。専門用語は極力使わず、私が実際につまずいたポイントを交えながら、「とりあえず動いた！」を体験してもらうことを目指します。

「黒い画面は苦手…」「コマンドって何？」という方でも大丈夫。この記事の手順通りに真似すれば、あなたの書いたコードを安全にGitHubへ保管できるようになりますよ！

自己紹介：知識ゼロからWebサイトを立ち上げた私が解説します

こんにちは！この記事を書いている私は、ほんの数ヶ月前まで皆さんと同じ、プログラミング知識ゼロの初心者でした。

「自分のサービスを作りたい！」という思いだけで、AIを相棒に試行錯誤を重ね、なんとか1ヶ月半で2つのWebサイト（buyonjapan.com, copicode.com）を独力で立ち上げることができました。

その過程で、一番最初に大きな壁として立ちはだかったのが、この「Git」と「GitHub」でした。エラーが出るたびに心が折れそうになりましたが、一つ一つ解決していくうちに、今では最高の相棒になっています。この記事では、そんな私の実体験に基づき、「初心者が本当に知りたいこと」だけを凝縮してお届けします。

【ステップ0】まずは準備運動！必要なツールを揃えよう

何事も準備が大切です。本格的な作業に入る前に、以下の3つのツールがお使いのPCにインストールされているか確認してください。もし無ければ、公式サイトからサクッとインストールしちゃいましょう！

💡 初心者あるある： 「Gitをインストールしたのに、VSCodeで認識されない！」
この場合、PCの再起動で直ることがほとんどです。インストール後に一度PCを再起動してみてください。それでもダメなら、Gitをインストールする際に「(Recommended)」と書かれている選択肢を選んで進めば、大抵はうまくいきます。

【ステップ1】Gitに自分の名前を教える（初回のみ）

最初に一度だけ、Gitに「このPCを使っているのは私ですよ」と自己紹介をする必要があります。これは、これから作成するセーブデータ（コミット）に、誰が作ったものなのか名前を記録するためです。

まず、VSCodeを開き、上部メニューの「ターミナル」から「新しいターミナル」を選択して、画面下部にターミナル（黒い画面）を表示させましょう。

VSCodeのターミナルを開く手順を示すスクリーンショット。メニューバーの「ターミナル」をクリックし、「新しいターミナル」を選択している。

ターミナルが表示されたら、以下の2つのコマンドを1行ずつコピペして、Enterキーで実行してください。

まずは、あなたのユーザー名を設定します。"Your Name" の部分を、ご自身のGitHubのユーザー名などに書き換えてください。

git config --global user.name "Your Name"

次に、メールアドレスです。"your.email@example.com" の部分を、ご自身のGitHubに登録しているメールアドレスに書き換えてください。

git config --global user.email "your.email@example.com"

何もメッセージが表示されなければ成功です。これでGitがあなたのことを覚えてくれました！この作業はPCを買い替えるまで基本的に不要です。

【ステップ2】プロジェクトの監視を開始する (git init)

それでは、実際にあなたのプロジェクトをGitの管理下に置いてみましょう。これを「リポジトリの初期化」と呼びます。難しく聞こえますが、VSCodeならボタン一つで完了です。

  1. VSCodeで、これからバージョン管理したいプロジェクトのフォルダを開きます。（例: `my-project` フォルダ）
  2. 左側のアクティビティバーから、上から3番目の枝分かれしたようなアイコン（ソース管理）をクリックします。
  3. 「リポジトリを初期化する」という青いボタンが表示されるので、迷わずクリック！
VSCodeのソース管理タブで「リポジトリを初期化する」ボタンをクリックする様子を示すスクリーンショット。

これだけで、あなたのプロジェクトフォルダに .git という隠しフォルダが作成され、Gitがファイルの変更を監視し始めます。簡単すぎて感動しますよね！

ついでに作成！.gitignore ファイル

プロジェクトの中には、パスワードなどの個人情報や、自動生成されるファイルなど、Gitに監視してほしくない（GitHubにアップしたくない）ファイルが出てきます。そういったファイルをあらかじめ指定しておくのが .gitignore ファイルです。

プロジェクトのルート（一番上の階層）に .gitignore という名前のファイルを新規作成し、無視したいファイル名やフォルダ名を記述します。例えば、以下のように書きます。

# OSが自動生成するファイル
.DS_Store

# パスワードなどを書く設定ファイル
.env

# 大量のパッケージがインストールされるフォルダ
node_modules

💡 ポイント： 最初は何を無視すればいいか分からないものです。「[使っている技術名] .gitignore」（例: Next.js .gitignore）などと検索すると、良い感じのテンプレートがたくさん見つかりますよ。

【ステップ3】変更を記録する（ステージング & コミット）

さて、ここからがGitの真骨頂です。ファイルの変更を「セーブポイント」として記録していきます。この作業は2段階に分かれています。

  1. ステージング: 「今回のセーブに含める変更」を選ぶ作業。
  2. コミット: 選んだ変更内容にメッセージを付けて、セーブポイントを確定する作業。

引っ越しに例えると、「段ボールに荷物を詰める（ステージング）」→「段ボールに『キッチン用品』などとラベルを貼って封をする（コミット）」というイメージです。

では、実際にやってみましょう。まず、プロジェクトに何か変更を加えます。例として、index.html というファイルを作成してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Gitテスト</title>
</head>
<body>
  <h1>こんにちは、Git!</h1>
</body>
</html>

ファイルを作成して保存すると、VSCodeのソース管理アイコンに「1」のようなバッジが付きます。これは「1件の変更がありますよ」というGitからのお知らせです。

ソース管理タブを開くと、「変更」という欄に index.html が表示されています。

1. ステージング (git add)

変更があったファイルにマウスカーソルを合わせると表示される「+」（変更をステージ）アイコンをクリックします。これでステージングは完了です。ターミナルで git add . と打つのと同じ操作です。

VSCodeのソース管理ビューで、変更されたファイル名の横にある「+」アイコンをクリックしてステージングする様子。

2. コミット (git commit)

ステージングが完了すると、ファイルは「ステージされている変更」の欄に移動します。次に、上部にあるメッセージボックスに「何を変更したか」が分かるようなメッセージ（例: 最初のコミット、index.htmlを作成など）を入力します。

メッセージを入力したら、「コミット」ボタン（またはチェックマークのアイコン）をクリックします。これでセーブポイントの作成が完了しました！ターミナルで git commit -m "メッセージ" と打つのと同じです。

VSCodeのソース管理ビューで、コミットメッセージを入力し、「コミット」ボタンをクリックする様子。

💡 コミットメッセージは未来の自分への手紙！
今は面倒に感じるかもしれませんが、後から「この変更なんだっけ？」となった時に、分かりやすいメッセージがあなたを助けてくれます。「〇〇機能を追加」「〇〇のバグを修正」のように、具体的に書く癖をつけましょう。

【ステップ4】GitHubにアップロードする (git push)

ローカルPCでのセーブが完了したので、いよいよオンラインの金庫であるGitHubに保管しましょう。この作業を「プッシュ」と呼びます。

1. GitHubで空のリポジトリを作成

まず、GitHubのサイトで新しいリポジトリ（保管場所）を作成します。「Repository name」にプロジェクト名（例: my-project）を入力し、「Create repository」ボタンを押すだけでOKです。この時、「Private」（非公開）を選ぶと、自分しか見れないリポジトリになります。

GitHubの新規リポジトリ作成画面。リポジトリ名を入力し、「Private」を選択して「Create repository」ボタンを押している。

2. VSCodeからGitHubに接続してプッシュ

ここがクライマックスです！ローカルのセーブデータを、今作ったGitHubのリポジトリに送り込みます。

コミット後、ソース管理タブに「ブランチを発行する」というボタンが表示されているはずです。これをクリックしてください。

VSCodeのソース管理タブに表示された「ブランチを発行する」ボタン。

すると、「GitHubに公開」という選択肢が出てくるので、それを選択します。VSCodeが自動で先ほど作成したGitHubリポジトリを見つけてくれるので、それを選択すれば…完了です！

初回はGitHubアカウントでの認証を求められます。ブラウザが立ち上がり、認証を許可するボタンを押すだけでOKです。

🚨 ここが最重要つまずきポイント！認証エラー
昔はパスワードで認証できましたが、現在はセキュリティ強化のため、**PAT (Personal Access Token)** という特別なパスワードを使うのが一般的です。もし「パスワードが違う」というようなエラーが出たら、それはほぼ間違いなくPATが必要だというサインです。

PATの作成方法は少し手順が多いので、GitHubの公式ドキュメントを見るのが一番確実です。以下のリンクを参考に、repo と workflow の権限にチェックを入れたトークンを作成し、パスワードの代わりにそのトークンを貼り付けてみてください。

➡️ 個人アクセストークンを管理する - GitHub Docs

一度認証が成功すれば、VSCodeが記憶してくれるので、次からはボタン一つでプッシュできるようになります。

【応用編】ブランチを切って安全に作業する

Gitに慣れてきたら、ぜひ「ブランチ」を使ってみましょう。ブランチとは、一言でいえば**「作業用のパラレルワールド」**です。

メインのセーブデータ（mainブランチ）に直接変更を加えるのは、バグを生む原因になり危険です。そこで、新しい機能を追加したり、デザインを試したりする時は、新しいブランチを作成し、そこで存分に作業します。作業が完了して問題ないことを確認できたら、その変更をメインのブランチに合流（マージ）させるのが安全な開発の流れです。

VSCodeなら、ブランチの作成も簡単です。

  1. 左下のステータスバーに表示されている現在のブランチ名（最初は main）をクリックします。
  2. 画面上部に表示される「+ 新しいブランチを作成...」を選択します。
  3. 新しいブランチ名（例: feature/add-new-page）を入力してEnterキーを押します。
VSCodeのステータスバーからブランチを新規作成する手順を示すスクリーンショット。

これだけで新しいブランチに切り替わりました。あとは、これまで通りファイルを編集 → ステージング → コミット → プッシュ（ブランチの発行）するだけです。この流れさえ覚えれば、もうあなたは立派なGit使いです！

まとめ：Gitは怖くない、最強のタイムマシン！

お疲れ様でした！この記事の手順通りに進められていれば、あなたのPC上のコードが、無事にGitHubという安全な場所に保管されているはずです。

今回紹介した操作が、Git・GitHubを使う上での本当に基本的な、そして最も重要な流れです。

  • 作業フォルダで git init （リポジトリを初期化）
  • ファイルを変更し git add （ステージング）
  • メッセージを付けて git commit （コミット）
  • GitHubに git push （プッシュ）

最初は難しく感じるかもしれませんが、毎日使っているうちに、歯を磨くように自然にできるようになります。Gitは、あなたのコードを守り、いつでも過去の状態に戻せる最強のタイムマシンです。エラーが出ても恐れず、AIに聞いたり、エラーメッセージで検索したりしながら、少しずつ仲良くなっていきましょう！

関連テンプレート