🔰基礎技術

GitとGitHubは便利なタイムマシン｜個人開発者がで覚えるべき必修科目

前回の記事で、「Webアプリ開発は『建築』のようなもの」とお話ししました。

でも、現実の建築とプログラミングには、たった一つだけ決定的な違いがあります。

現実の建築現場で、大事な柱を切りすぎたり、壁を間違えて壊してしまったらどうなるでしょうか？
その材料はゴミになり、新しい資材を買い直し、一からやり直しです。時間もお金も無駄になります。

しかし、プログラミングの世界には「失敗しても、時間を巻き戻せる魔法」が存在します。それが、今日紹介する Git（ギット） です。

今回は、難しいコマンド（黒い画面）を使わずに、この「ありえないほど便利な道具」を VS Codeだけで 使いこなす方法を解説します。

1. そもそもGitとGitHubって何？

初心者がまず混乱するのが「GitとGitHubの違い」です。これも建築（家づくり）に例えるとスッキリ理解できます。

🛠️ 建築現場で例えるGitとGitHub

  • Git（ギット）＝ 現場専用の「タイムマシン」
    手元のパソコン（現場）で「工事の記録」を保存するツール。「柱を切る前」にセーブしておけば、失敗してもボタン一つで時間を戻せます。
  • GitHub（ギットハブ）＝ 設計図と資材の「巨大クラウド倉庫」
    Gitで記録したデータをネット上に保存してくれる場所。パソコンが壊れても、GitHubに設計図があれば新しいPCですぐに工事を再開できます。

どれくらい使われているの？

結論から言うと、世界標準です。
Google、Microsoft、Metaなどの巨大企業から個人の趣味開発まで、世界中のエンジニアの90%以上が使用しています。これを使えることは、エンジニアとしての「共通言語」を持っていることと同じです。

2. なぜ使うの？「タイムマシン」以外のすごい機能

「ただのバックアップならDropboxやGoogleドライブで良くない？」と思うかもしれません。しかし、GitHubには個人開発を加速させる強力な連携機能があります。

  • 世界への公開ボタンになる（Vercel連携）：
    これが最強のメリットです。「GitHub（倉庫）に最新の設計図を送ると、自動的にWebサイトが更新される」という仕組みが作れます。面倒なサーバーへのアップロード作業は不要です。
  • 拡張機能との連携（Marketplace）：
    GitHubにはアプリストアのようなものがあり、コードのミスを自動チェックするロボットや、タスク管理ツールなどを導入できます。

3. 【実践】VS CodeからGit/GitHubを使う手順

ここからは実践です。黒い画面（ターミナル）でコマンドを打つ必要はありません。npx create-next-app でプロジェクトを作成した直後からスタートします。

Step 1: GitHubで「倉庫（リポジトリ）」を作る

  1. GitHubにログインし、右上の「＋」アイコンから「New repository」をクリック。
  2. Repository nameにプロジェクト名（例: my-first-app）を入力。
  3. 超重要：PublicかPrivateか選ぶ
    初心者は必ず「Private（非公開）」を選んでください。万が一、パスワードなどを書き込んでしまっても、流出事故を防げます。
  4. 「Create repository」ボタンをクリック。

Step 2: VS Codeで「記録（コミット）」する

  1. VS Code左側のメニューから「ソース管理（枝分かれのようなアイコン）」をクリック。
  2. メッセージ欄に「何の工事をしたか」を入力します（例：first commit や ボタンのデザイン修正 など）。
  3. 「コミット」ボタン（またはチェックマーク ✅）をクリック。
    ※「変更をステージしますか？」と聞かれたら「はい（Always）」を選んでください。

Step 3: GitHubへ「配送（プッシュ）」する

  1. VS Codeのソース管理パネルにある「ブランチを発行（Publish Branch）」ボタンをクリック。
    ※または、上部メニュー「…」→「リモート」→「リモートの追加」を選択し、先ほどGitHubで作ったリポジトリのURLを入力。
  2. 認証を求められたら、GitHubのアカウントでログイン・許可します。

これで完了です！GitHubのページをリロードすると、あなたのコードが保存されているはずです。

4. これだけは守って！初心者がハマる「罠」と注意事項

Gitは魔法の道具ですが、使い方を間違えるとトラブルになります。特に以下の「除外ファイル（.gitignore）」と「秘密鍵（.env）」の関係だけは、今日ここで覚えて帰ってください。

⚠️ 重要コラム：.gitignore（ギット・イグノア）とは？

プロジェクトの中には「GitHub（倉庫）に送ってはいけないゴミや危険物」があります。それらを指定して、Gitに「これらは無視してね」と伝えるリストが .gitignore ファイルです。

代表的な除外ルール：

  • node_modules/
    → ネットからインストールした巨大なライブラリ群。重すぎるので送りません。（npm installで復元できるため）
  • .env*
    → パスワードなどが書かれた秘密ファイル。絶対に送ってはいけません。
  • .next/
    → 開発中に作られる一時ファイル。

💡 他の言語での書き方例（参考）：

Next.js以外でも、Gitを使うときは必ずその言語用のルールを書きます。

  • Flutterの場合：
    build/（ビルド成果物）、.dart_tool/ など
  • Pythonの場合：
    __pycache__/（キャッシュ）、venv/（仮想環境）など
  • Macユーザーの場合：
    .DS_Store（フォルダ設定ファイル）

Q. .envがちゃんと除外されているか不安です。どう確認すればいい？

APIキーなどを記述した .env ファイルが、誤ってGitHubにアップロードされると大事故になります。以下の方法で必ずチェックしてください。

✅ VS Codeのエクスプローラーを見るだけ！

VS Codeの左側のファイル一覧を見てください。
.gitignore に正しく登録されているファイル（.envなど）は、ファイル名が「灰色（グレー）」に薄くなっているはずです。

これが「Gitから無視されている（＝安全）」という合図です。
もし色が薄くなっていなければ、.gitignore の記述が間違っています。すぐに確認してください。

まとめ：Gitは「挑戦」を支える保険

「失敗したら戻せばいい」。この安心感こそが、個人開発を加速させる最大の武器です。

道具の準備は整いました。次回はいよいよ、Gitと連携して作ったアプリを世界中に公開する「Vercelへのデプロイ（公開）手順」に進みましょう。

👉 次のステップ：[次回記事：デプロイとセキュリティ。作ったアプリを世界に公開する手順]

-🔰基礎技術