これまでの学習内容の振り返り
レッスン1〜6で学んだ内容：
- ✅ バージョン管理の概念
- ✅ Gitのインストールと初期設定
- ✅ リポジトリの作成（git init）
- ✅ ファイルの追跡（git add）
- ✅ 変更の記録（git commit）
- ✅ 履歴の確認（git log/status）
- ✅ 変更の取り消し（git restore）
これらを実際のプロジェクトで使ってみましょう！
演習プロジェクト：簡単なToDoアプリの開発
プロジェクトの概要
簡単なToDoアプリケーションを作成しながら、Gitの操作を実践します。
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
演習1：プロジェクトの初期化
課題
- Gitリポジトリを初期化する
- ユーザー名とメールアドレスが設定されているか確認する
- 初期ファイル（README.md）を作成してコミットする
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
💡 解答例を見る
# Gitリポジトリを初期化
git init
# 設定を確認
git config user.name
git config user.email
# READMEファイルを作成
echo "# ToDo App" > README.md
echo "シンプルなToDoアプリケーションです。" >> README.md
# ステータスを確認
git status
# ファイルを追加してコミット
git add README.md
git commit -m "docs: プロジェクトのREADMEを作成"演習2：基本ファイルの作成と追跡
課題
- HTMLファイル（index.html）を作成する
- CSSファイル（style.css）を作成する
- JavaScriptファイル（app.js）を作成する
- それぞれを別々のコミットで記録する
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
💡 解答例を見る
# HTMLファイルを作成
cat > index.html << 'EOF'
<!DOCTYPE html>
<html>
<head>
<title>ToDo App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My ToDo List</h1>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
EOF
git add index.html
git commit -m "feat: HTMLの基本構造を作成"
# CSSファイルを作成
cat > style.css << 'EOF'
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
EOF
git add style.css
git commit -m "style: 基本的なスタイルを追加"
# JavaScriptファイルを作成
echo "console.log('ToDo App Started');" > app.js
git add app.js
git commit -m "feat: JavaScriptファイルを追加"
# 履歴を確認
git log --oneline演習3：機能の追加と履歴管理
課題
- ToDoアイテムを追加する機能を実装する
- スタイルを改善する
- 各変更を意味のある単位でコミットする
- 履歴を様々な方法で確認する
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
💡 解答例を見る
# ToDo機能を追加
cat > app.js << 'EOF'
const todos = [];
function addTodo(text) {
todos.push({
id: Date.now(),
text: text,
done: false
});
console.log('ToDo added:', text);
}
// テスト
addTodo('Gitを学ぶ');
EOF
git add app.js
git commit -m "feat: ToDo追加機能を実装"
# スタイルを改善
cat >> style.css << 'EOF'
h1 {
color: #333;
border-bottom: 2px solid #4CAF50;
padding-bottom: 10px;
}
.todo-item {
padding: 10px;
margin: 5px 0;
background: #f5f5f5;
border-radius: 5px;
}
EOF
git add style.css
git commit -m "style: 見出しとToDoアイテムのスタイルを追加"
# 履歴を確認
git log --oneline
git log --graph --oneline
git log -p -2演習4：変更の取り消しとステージング操作
課題
- ファイルに間違った変更を加える
- 変更を取り消す
- 複数のファイルを変更して、一部だけステージングする
- ステージングエリアから取り消す
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
💡 解答例を見る
# 間違った変更を加える
echo "間違ったコード" >> app.js
cat app.js
# 状態を確認
git status
git diff
# 変更を取り消す
git restore app.js
cat app.js
# 複数のファイルを変更
echo "/* 新しいスタイル */" >> style.css
echo "// 新しい機能" >> app.js
echo "## 更新情報" >> README.md
# 状態を確認
git status
# 一部だけステージング
git add style.css
git status
# ステージングから取り消す
git restore --staged style.css
git status
# すべての変更を破棄
git restore .
git status演習5：.gitignoreの活用
課題
- 設定ファイル（config.json）を作成する
- ログファイル（debug.log）を作成する
- .gitignoreファイルを作成して、これらを除外する
- 除外が正しく機能しているか確認する
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
💡 解答例を見る
# 設定ファイルとログファイルを作成
echo '{"apiKey": "secret123"}' > config.json
echo "2024-01-01 10:00:00 - App started" > debug.log
# 状態を確認（両方のファイルが表示される）
git status
# .gitignoreを作成
cat > .gitignore << 'EOF'
# 設定ファイル
config.json
# ログファイル
*.log
# 一時ファイル
*.tmp
EOF
# .gitignoreを追加
git add .gitignore
git commit -m "chore: .gitignoreファイルを追加"
# 状態を確認（config.jsonとdebug.logが表示されない）
git status
# 無視されているファイルを確認
git status --ignored演習6：総合演習
最終課題
実際の開発フローを想定して、以下のタスクを実行してください：
- 新機能（ToDoの削除機能）を追加
- バグを発見したと仮定して修正
- READMEを更新
- 作業中に間違えたと仮定して、最後のコミットを修正
- プロジェクトの最終的な履歴を確認
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
💡 解答例を見る
# 削除機能を追加
cat >> app.js << 'EOF'
function deleteTodo(id) {
const index = todos.findIndex(todo => todo.id === id);
if (index > -1) {
todos.splice(index, 1);
console.log('ToDo deleted:', id);
}
}
EOF
git add app.js
git commit -m "feat: ToDo削除機能を追加"
# バグ修正（findIndexの戻り値チェックを改善）
sed -i '' 's/index > -1/index !== -1/g' app.js # Mac
# sed -i 's/index > -1/index !== -1/g' app.js # Linux
git add app.js
git commit -m "fix: 削除機能の条件判定を修正"
# READMEを更新
cat >> README.md << 'EOF'
## 機能
- ToDoの追加
- ToDoの削除
- シンプルなUI
EOF
git add README.md
git commit -m "docs: READMEに機能一覧を追加"
# タイポがあったと仮定して修正
echo "" >> README.md
echo "## 使い方" >> README.md
echo "1. index.htmlをブラウザで開く" >> README.md
git add README.md
git commit --amend -m "docs: READMEに機能一覧と使い方を追加"
# 最終的な履歴を確認
git log --oneline --graph
git log --stat -3
# プロジェクトの統計情報
git shortlog -snまとめ
この中間演習で実践したこと：
- ✅ プロジェクトの初期化から開発まで一連の流れ
- ✅ 意味のある単位でのコミット作成
- ✅ 様々な履歴確認方法
- ✅ 間違いを修正する各種コマンド
- ✅ .gitignoreでの除外設定
🎯 チェックリスト
以下ができるようになっていれば、基礎は完璧です！
-
git initでリポジトリを作成できる -
git addとgit commitで変更を記録できる -
git statusで現在の状態を把握できる -
git logで履歴を確認できる -
git restoreで変更を取り消せる - .gitignoreでファイルを除外できる
- 意味のあるコミットメッセージが書ける
次のレッスンからは、GitHubを使ったリモートリポジトリとの連携を学びます！