困りごと：変更の理由が分からない
😰 3ヶ月後の自分
「このコード、なんで変更したんだっけ...？」 「このバグ修正、何のバグだったか覚えてない...」 「誰がこの機能を追加したの？理由は？」
変更履歴があっても、なぜ変更したかが分からないと意味がありません。
コミット = スナップショット + 説明文
**コミット（Commit）**は、ある時点の状態を「写真」として保存し、「説明文」を付けることです。
📸 スナップショット + 📝 説明文 = 📦 コミット
コミットに含まれる情報
- Who（誰が）: 作者の名前とメールアドレス
- When（いつ）: 日時（自動記録）
- What（何を）: 変更されたファイルと内容
- Why（なぜ）: コミットメッセージ（あなたが書く）
実践：初めてのコミット
1. プロジェクトの準備
# 新しいプロジェクトを作成
mkdir commit-practice
cd commit-practice
git init
# READMEファイルを作成
echo "# コミット練習プロジェクト" > README.md
echo "Gitのコミットを学習するためのプロジェクトです。" >> README.md
# ステージングエリアに追加
git add README.md
git status2. コミットを実行
git commit -m "プロジェクトの初期化：READMEを追加"成功！最初のコミットが作成されました。
3. コミット履歴を確認
git log以下の情報が表示されます：
- コミットID（一意の識別子）
- 作者情報
- 日時
- コミットメッセージ
良いコミットメッセージの書き方
❌ 悪い例
git commit -m "修正"
git commit -m "更新"
git commit -m "変更"
git commit -m "ファイル追加"
何を修正したの？なぜ更新したの？全く分かりません！
✅ 良い例
git commit -m "ログイン機能を追加：メールアドレスでの認証に対応"
git commit -m "バグ修正：ユーザー名に空白が含まれる場合のエラーを解決"
git commit -m "パフォーマンス改善：画像の遅延読み込みを実装"
何をしてなぜしたかが明確！
コミットメッセージの型
1. 基本形：「何を」+「詳細」
# 機能追加の例
echo "function validateEmail(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); }" > validation.js
git add validation.js
git commit -m "メール検証機能を追加：正規表現を使用したバリデーション"2. プレフィックスを使う方法
feat: 新機能
fix: バグ修正
docs: ドキュメント
style: コードスタイル
refactor: リファクタリング
test: テスト
chore: その他
# バグ修正の例
echo "// バグを修正" >> validation.js
git add validation.js
git commit -m "fix: メールアドレスの大文字小文字を区別しないよう修正"複数行のコミットメッセージ
詳細な説明が必要な場合：
# エディタを使って詳細なメッセージを書く
git add -A
git commitエディタが開いたら：
ユーザー認証機能を実装
- JWTトークンによる認証
- リフレッシュトークンの自動更新
- セッションタイムアウトの設定
関連Issue: #123
コミットの粒度（どのくらいの単位で？）
✅ 良い粒度
コミット1: ヘッダーコンポーネントを作成
コミット2: ヘッダーのスタイルを追加
コミット3: レスポンシブ対応を実装
各コミットが独立した意味のある変更
❌ 悪い粒度
# 大きすぎる
コミット1: ウェブサイト全体を作成（100ファイル変更）
# 小さすぎる
コミット1: セミコロンを追加
コミット2: インデントを修正
コミット3: 変数名を変更
実践的なワークフロー
# ToDoアプリを段階的に作成
# 1. HTMLの基本構造
echo '<!DOCTYPE html>
<html>
<head>
<title>ToDo App</title>
</head>
<body>
<h1>My ToDo List</h1>
<div id="app"></div>
</body>
</html>' > index.html
git add index.html
git commit -m "feat: ToDoアプリのHTML基本構造を作成"
# 2. JavaScriptの追加
echo 'const todos = [];
function addTodo(text) {
todos.push({ text, done: false });
}' > app.js
git add app.js
git commit -m "feat: ToDo項目を追加する関数を実装"
# 履歴を確認
git log --onelineコミットを修正する
直前のコミットメッセージを修正
# タイポを修正
git commit --amend -m "feat: ToDo項目を追加する関数を実装（修正版）"直前のコミットにファイルを追加
# 忘れていたファイルを追加
echo "/* スタイル */" > style.css
git add style.css
git commit --amend --no-editコミットのベストプラクティス
1. 動作する状態でコミット
# テストを実行してからコミット
npm test
git add .
git commit -m "feat: ユーザー登録機能を追加"2. 関連する変更をまとめる
# 機能とそのテストは一緒にコミット
git add src/auth.js tests/auth.test.js
git commit -m "feat: 認証機能とユニットテストを追加"3. コミット前に差分を確認
# 何を変更したか確認してからコミット
git diff --staged
git commit -m "適切なメッセージ"よくある質問
Q: コミットメッセージは日本語でもOK？
A: はい！チームの方針に従いましょう：
git commit -m "機能追加：ダークモードに対応"
# または
git commit -m "feat: add dark mode support"Q: どのくらいの頻度でコミットすべき？
A: 目安として：
- 1つの論理的な変更が完了したら
- 30分〜1時間に1回程度
- 作業を中断する前
Q: コミットし忘れることが多い...
A: 習慣化のコツ：
- 小さな変更でもコミット
- git statusを頻繁に確認
- 作業終了時は必ずコミット
まとめ
コミットの作成方法を学びました！
- ✅ 変更内容に「なぜ」の説明を追加できる
- ✅ 分かりやすいコミットメッセージが書ける
- ✅ 適切な粒度でコミットを作成できる
- ✅ 間違えても
--amendで修正できる
次のレッスンでは、作成したコミット履歴を確認する様々な方法を学びます！
【実践演習】意味のあるコミットを作成
実際にプロジェクトを作成して、段階的にコミットを積み重ねてみましょう。
CommandAcademy Terminal
Welcome to CommandAcademy Terminal!
Type "help" to see available commands.
user@cmdac:~$
█
ファイルツリー
/
etc
hosts35B
passwd76B
home
user
tmp
usr
bin
share
var
log
練習問題
style.cssを作成して、適切なコミットメッセージでコミットapp.jsを作成して、ToDo追加機能を実装- バグ修正や機能改善を行い、それぞれ適切なコミットメッセージでコミット
git logで履歴を確認し、変更の流れが分かるか確認
CommandAcademy Terminal
Welcome to CommandAcademy Terminal!
Type "help" to see available commands.
user@cmdac:~$
█
ファイルツリー
/
etc
hosts35B
passwd76B
home
user
tmp
usr
bin
share
var
log