先生と生徒の会話形式で理解しよう

生徒

「JavaScriptのプロジェクトがだんだん増えてきたんですが、変更して戻したり確認する方法ってありますか？」

先生

「はい、それにはGitというツールを使うと便利です。ファイルの変更を記録したり、履歴を確認できます。」

生徒

「Gitって難しそうですが、初心者でも使えますか？」

先生

「今日はGitの基本操作をやさしく一緒に学びましょう！」

1. Gitって何？バージョン管理って？

Gitとは、プログラムやファイルの変更を記録してくれるバージョン管理（いわゆる変更履歴を保存する仕組み）のツールです。変更前の状態に戻せたり、いつ誰が何を変えたかを確認できます。

たとえると「ノートのページに１行ずつ書き足して、あとで振り返れるノート帳」のようなイメージです。

2. 環境を準備しよう

Gitは公式サイトから無料でインストールできます。WindowsならGit Bash、Macならターミナルで利用できます。

まずは簡単にコマンドが動くか確認してみましょう。


git --version

これで「git version x.x.x」のように表示されたらOKです。

3. プロジェクトでGitを使い始めよう

JavaScriptプロジェクトのフォルダで次のコマンドを実行します：


git init

このコマンドで、そのフォルダが「Gitで管理されるプロジェクト」に変わります。

4. 変更を記録する「コミット」をしてみよう

ファイルを編集したら、変更をGitに記録（コミット）します。


git add .
git commit -m "最初のコミット"

git add .で変更をまとめ、git commitで「いつ何を変更したか」をメッセージ付きで保存します。

5. 履歴を確認して戻す

コミットした変更履歴は次のコマンドで確認できます：


git log

一覧が表示され、「戻りたい」コミットがあれば次のように戻せます：


git checkout <commit-hash>

は履歴に表示された一意の番号です。

6. ブランチを使って別の道を作ろう

新しい機能を試したいときはコピーの道（ブランチ）を使います：


git branch featureA
git checkout featureA

これで「featureA」という枝道を作り、安心して実験できます。

7. 変更を本流（main）に戻すにはマージ

ブランチが完成したら、本流に戻して合体（マージ）します：


git checkout main
git merge featureA

これで開発の流れを整えたまま、新機能が取り込まれます。

8. Gitはトラブルを防ぐ安心ツール

Gitを使えば「戻せる安心感」が得られます。JavaScriptで間違えても、いつでも前に戻せて安心です。

9. 続けることで使い方が身につく

最初は覚えることが多いですが、新しいコードを書くたびにGitに記録する習慣をつけると簡単です。

小さな変更でもこまめにコミットし、「記録＝安心」だと感じることが大切です。

まとめ

ここまでJavaScriptの開発現場において欠かすことのできない「Gitによるバージョン管理」の基本について解説してきました。プログラミングの学習を始めたばかりの頃は、コードを書くこと自体に精一杯になりがちですが、実は「書いたコードをどう守り、どう管理するか」という視点を持つことが、脱初心者への大きな一歩となります。

Gitを導入することで、万が一プログラムが動かなくなった際にも、正常に動作していた過去の状態へ一瞬で戻すことができます。これは、複雑なロジックを組み立てるJavaScriptの開発において、心理的な安全性を確保するために非常に重要な役割を果たします。また、ブランチ機能を活用することで、メインのソースコードを汚さずに新しい機能の実験ができる点も、モダンな開発スタイルには必須のスキルと言えるでしょう。

実践的なGit運用の流れ

実際の開発現場では、以下のようなサイクルでGitを利用します。まずはこの一連の流れを体に染み込ませることから始めましょう。

git init：プロジェクトの開始時に一度だけ実行し、管理対象にする。
git add：変更したファイルをステージングエリア（コミットの準備場所）へ登録する。
git commit：意味のある単位で変更を記録し、メッセージを添える。
git status：現在のファイルの状態や、コミットされていない変更がないか確認する。

JavaScriptプロジェクトでの具体的な管理例

例えば、新しい関数を追加したり、バグを修正したりした際の操作例を見てみましょう。


// app.js の内容を変更したと仮定します
const greet = (name) => {
  return `こんにちは、${name}さん！`;
};

console.log(greet("Git学習者"));

// ターミナルでの操作
// 1. 変更をステージング
// git add app.js

// 2. 変更を記録
// git commit -m "挨拶機能を追加"

実行結果のログを確認する際は、以下のコマンドが役立ちます。


commit a1b2c3d4e5f6g7h8i9j0 (HEAD -> main)
Author: Your Name <you@example.com>
Date:   Sat Jan 31 00:00:00 2026 +0900

    挨拶機能を追加

より高度な活用：コンフリクト（衝突）を恐れない

複数人で開発をしたり、自分一人でも異なるブランチで同じ箇所を編集したりすると「コンフリクト（競合）」が発生することがあります。Gitは賢いツールですが、同じ行の変更を自動で判断できない場合に、人間に判断を仰ぎます。最初は驚くかもしれませんが、これもGitが「勝手にコードを上書きして消さないように守ってくれている証拠」です。

開発の規模が大きくなればなるほど、Gitの真価は発揮されます。GitHubやGitLabといったリモートリポジトリサービスと連携することで、世界中の開発者と協力することも可能になります。まずは手元のローカル環境で、毎日コミットを積み重ねる習慣をつけていきましょう。

先生と生徒の振り返り会話

生徒

「先生、Gitの基本操作がなんとなく分かってきました！今までファイルを『app_backup1.js』とか『app_最終版.js』みたいに別名で保存して管理していたんですけど、それが必要なくなるんですね。」

先生

「その通りです！ファイル名を変えて管理すると、どれが本当に最新かわからなくなりますよね。Gitを使えば、ファイル名は一つのまま、過去の状態にいつでもタイムトラベルできるようになるんです。非常にスマートだと思いませんか？」

生徒

「確かにスマートですね。でも、git add . と git commit を毎回やるのが少し面倒に感じてしまいそうで……。」

先生

「最初はそう感じるかもしれませんが、これは『セーブポイント』を作る作業と同じです。RPGでボスの前にセーブするのと同じで、難しい機能を実装する前にコミットしておけば、失敗してもそこからやり直せます。JavaScriptで複雑な非同期処理やDOM操作を書くときは、このセーブポイントが命綱になりますよ。」

生徒

「命綱、ですか。そう言われると、こまめにコミットしたくなりますね！ところで、TypeScriptを使っているプロジェクトでも同じように使えるんですか？」

先生

「もちろんです。拡張子が .ts になっても、Gitの使い方は全く変わりません。むしろTypeScriptのような型定義がある言語では、大規模なリファクタリング（コードの整理）をすることが多いので、Gitによる履歴管理の重要性はさらに高まります。少し例を見てみましょうか。」


interface User {
  id: number;
  name: string;
}

const getUserInfo = (user: User): string => {
  return `ID: ${user.id}, Name: ${user.name}`;
};

// このインターフェースを変更する場合も、Gitがあれば安心

生徒

「なるほど！コードの形式に関わらず、開発のプロセス全体を支えてくれるツールなんですね。まずは今日の学習内容を自分のプロジェクトで試してみます。git status で今の状況を確認する癖からつけてみます！」

先生

「素晴らしい心がけですね。慣れてきたら、自分がなぜその変更をしたのか、後で見返したときに分かりやすいコミットメッセージを書く練習もしてみてください。それができるようになれば、立派なエンジニアの仲間入りですよ。頑張りましょう！」

生徒

「はい！ありがとうございます！」