Gitの基本

Gitの3つのエリア

Gitでは、ファイルの変更は3つのエリアを通じて管理されます。 この流れを理解することが、Git操作の基本です。

  編集  ──  git add  ──▶  ステージング  ──  git commit  ──▶  リポジトリ
  (作業)                    (準備)                          (記録)

git init - リポジトリの初期化

新しいプロジェクトでGit管理を始めるには、git init を実行します。 これにより .git ディレクトリが作成され、 バージョン管理が有効になります。

# 新しいプロジェクトを作成してGitを初期化
$ mkdir my-project
$ cd my-project
$ git init

git add - ステージングに追加

変更したファイルをコミット対象として登録します。git add で ステージングエリアに追加しないと、コミットに含まれません。

# 特定のファイルをステージング
$ git add index.html

# 複数ファイルをステージング
$ git add index.html style.css

# カレントディレクトリの全変更をステージング
$ git add .

# 変更の一部だけをステージング（対話モード）
$ git add -p

git commit - 変更を記録

ステージングエリアの変更をリポジトリに記録します。 各コミットには一意のハッシュ値（ID）が割り当てられ、後から参照できます。

# メッセージ付きでコミット
$ git commit -m "初期ページを作成"

# 詳細なメッセージをエディタで書く
$ git commit

# add と commit を同時に（追跡済みファイルのみ）
$ git commit -am "ヘッダーのスタイルを修正"

git status - 状態の確認

現在のリポジトリの状態を確認します。どのファイルが変更されたか、 ステージングに追加されたか、未追跡かを一目で把握できます。

$ git status

On branch main
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        modified:   index.html

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
        modified:   style.css

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        script.js

git log - コミット履歴の確認

これまでのコミット履歴を確認します。各コミットのハッシュ、作者、日時、メッセージが表示されます。

# 基本のログ表示
$ git log

# 1行表示（見やすい）
$ git log --oneline

# グラフ付き（ブランチの分岐が視覚的に分かる）
$ git log --oneline --graph --all

# 最新3件だけ表示
$ git log -3

a1b2c3d ヘッダーのスタイルを修正
e4f5g6h ログインフォームを追加
i7j8k9l 初期ページを作成

git diff - 差分の確認

ファイルの変更内容を詳細に確認できます。何を変更したかをコミット前にチェックする習慣をつけましょう。

# ワーキングディレクトリの変更を確認
$ git diff

# ステージング済みの変更を確認
$ git diff --staged

# 特定のファイルの差分
$ git diff index.html

# 2つのコミット間の差分
$ git diff a1b2c3d e4f5g6h

diff --git a/index.html b/index.html
--- a/index.html
+++ b/index.html
@@ -1,3 +1,4 @@
 <h1>Hello</h1>
-<p>古いテキスト</p>
+<p>新しいテキスト</p>
+<p>追加された行</p>

.gitignore - 追跡しないファイルの指定

.gitignore ファイルに パターンを記述すると、Gitが追跡しないファイルを指定できます。 パスワードや一時ファイル、ビルド成果物などを除外するのに使います。

# .gitignore の例

# 環境変数ファイル（パスワードなどが入る）
.env
.env.local

# 依存パッケージ（npm install で復元できる）
node_modules/

# ビルド成果物
dist/
build/
.next/

# OS のシステムファイル
.DS_Store
Thumbs.db

# ログファイル
*.log

# エディタの設定ファイル
.vscode/
.idea/

基本的な作業フロー

日常的なGit操作の流れをまとめます。この一連の流れを繰り返してコードを管理します。

# 1. 現在の状態を確認
$ git status

# 2. ファイルを編集（エディタで作業）

# 3. 変更内容を確認
$ git diff

# 4. 変更をステージングに追加
$ git add index.html style.css

# 5. ステージングの内容を確認
$ git diff --staged

# 6. コミット
$ git commit -m "ナビゲーションバーを追加"

# 7. 履歴を確認
$ git log --oneline

その他の便利なコマンド