メインコンテンツへスキップ
CommandAcademy
レッスン 14 / 15推定時間: 30分

実践：個人プロジェクトの管理

学んだことを総動員！実際のプロジェクトでGitを使う一連の流れを体験しましょう

このレッスンの学習目標

  • 実際のプロジェクトでのGit活用方法を体得する
  • 初期設定から公開までの流れを理解する
  • ベストプラクティスを身につける

今日から始める個人プロジェクト

これまで学んだことを使って、実際に「ポートフォリオサイト」を作る流れを体験しましょう！

ステップ1：プロジェクトの初期設定

1.1 ローカルでプロジェクトを開始

# プロジェクトディレクトリを作成
mkdir my-portfolio
cd my-portfolio

# Gitリポジトリを初期化
git init

# 最初のファイルを作成
echo "# My Portfolio" > README.md
echo "<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
</head>
<body>
    <h1>Welcome to My Portfolio</h1>
</body>
</html>" > index.html

1.2 .gitignoreを設定

# .gitignoreを作成
cat > .gitignore << 'EOF'
# OS生成ファイル
.DS_Store
Thumbs.db

# エディタ設定
.vscode/
.idea/
*.swp

# ログファイル
*.log

# 一時ファイル
*.tmp
*.temp

# 環境設定
.env
EOF

# 確認
cat .gitignore

1.3 初回コミット

# 現在の状態を確認
git status

# すべてのファイルをステージング
git add .

# 初回コミット
git commit -m "初回コミット：ポートフォリオサイトの基本構造を作成"

# 履歴を確認
git log --oneline

ステップ2：GitHubにリポジトリを作成

2.1 GitHubで新規リポジトリ作成

  1. GitHubにログイン
  2. 「New repository」をクリック
  3. 以下を設定：
    • Repository name: my-portfolio
    • Description: 「私のポートフォリオサイト」
    • Publicを選択
    • READMEや.gitignoreは追加しない（既に作成済み）

2.2 リモートリポジトリを連携

# リモートを追加（your-usernameを変更）
git remote add origin git@github.com:your-username/my-portfolio.git

# 確認
git remote -v

# mainブランチにプッシュ
git push -u origin main

ステップ3：機能開発のフロー

3.1 新機能用のブランチを作成

# スタイル追加用のブランチを作成
git checkout -b feature/add-styles

# CSSファイルを作成
echo "body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

h1 {
    color: #333;
    text-align: center;
}" > style.css

# HTMLにスタイルシートをリンク
sed -i '' 's|</title>|</title>\n    <link rel="stylesheet" href="style.css">|' index.html

# 変更を確認
git status
git diff

3.2 変更をコミット

# ステージングとコミット
git add .
git commit -m "feat: 基本的なスタイルを追加"

# さらに機能を追加
echo "
.container {
    max-width: 800px;
    margin: 0 auto;
}" >> style.css

git add style.css
git commit -m "feat: コンテナスタイルを追加"

3.3 mainブランチにマージ

# mainブランチに切り替え
git checkout main

# マージ
git merge feature/add-styles

# ブランチを削除
git branch -d feature/add-styles

# リモートにプッシュ
git push origin main

ステップ4：日常的な更新フロー

4.1 朝の作業開始

# 最新の状態を取得
git pull origin main

# 現在の状態を確認
git status
git log --oneline -5

4.2 コンテンツの追加

# コンテンツ追加用ブランチ
git checkout -b feature/add-about

# Aboutセクションを追加
echo "<!DOCTYPE html>
<html>
<head>
    <title>About - My Portfolio</title>
    <link rel=\"stylesheet\" href=\"style.css\">
</head>
<body>
    <div class=\"container\">
        <h1>About Me</h1>
        <p>Hi! I'm learning Git and web development.</p>
        <a href=\"index.html\">ホームに戻る</a>
    </div>
</body>
</html>" > about.html

# ホームページにリンクを追加
sed -i '' 's|</h1>|</h1>\n    <nav><a href="about.html">About</a></nav>|' index.html

git add .
git commit -m "feat: Aboutページを追加"

4.3 レビューとマージ

# 変更内容を確認
git diff main

# mainにマージ
git checkout main
git merge feature/add-about

# プッシュ
git push origin main

# ブランチを削除
git branch -d feature/add-about

ステップ5：トラブルシューティング

5.1 間違えてコミットした場合

# 間違えた変更をシミュレーション
echo "<!-- TODO: これはテスト -->" >> index.html
git add index.html
git commit -m "テストコミット"

# しまった！直前のコミットを修正
git commit --amend -m "fix: コメントを追加（一時的）"

# または、変更を取り消す
git reset HEAD~1
git restore index.html

5.2 コンフリクトが発生した場合

# コンフリクトをシミュレーション
# (実際には、複数人で同じファイルを編集した場合に発生)

# コンフリクトが発生したら：
# 1. ファイルを開いてコンフリクトマーカーを探す
# 2. 手動で修正
# 3. git addとgit commitで解決

echo "コンフリクトの解決方法：
1. <<<<<<< HEAD から ======= までが現在の変更
2. ======= から >>>>>>> までが取り込もうとした変更
3. どちらか、または両方を組み合わせて保存"

ステップ6：プロジェクトの公開

GitHub Pagesで公開

  1. GitHubのリポジトリページへ
  2. Settings → Pages
  3. Source: Deploy from a branch
  4. Branch: main, / (root)
  5. Save

数分待つと、https://your-username.github.io/my-portfolio/で公開！

ベストプラクティスまとめ

1. コミットメッセージのルール

# 良いコミットメッセージの例
echo "プレフィックスを使う：
- feat: 新機能
- fix: バグ修正
- docs: ドキュメント
- style: スタイル調整
- refactor: リファクタリング
- test: テスト
- chore: 雑務"

2. ブランチ戦略

main/master：常に動作する状態
│
├─ feature/*：新機能開発
├─ bugfix/*：バグ修正
└─ hotfix/*：緊急修正

3. 日常のワークフロー

# 朝のルーティン
echo "🌅 朝のルーティン：
1. git pull origin main
2. git status
3. 今日の作業を開始

🌆 夕方のルーティン：
1. git add .
2. git commit -m '今日の作業'
3. git push origin main
4. git status (確認)"

4. READMEを充実させる

cat > README.md << 'EOF'
# My Portfolio

私のポートフォリオサイトです。

## 🚀 機能

- レスポンシブデザイン
- シンプルで美しいUI
- 高速なパフォーマンス

## 🔧 使用技術

- HTML5
- CSS3
- JavaScript

## 📝 ライセンス

MIT License
EOF

git add README.md
git commit -m "docs: READMEを更新"

まとめ

実際のプロジェクトでGitを使う流れを体験しました！

  • ✅ プロジェクトの初期設定から公開まで
  • ✅ ブランチを使った安全な開発
  • ✅ 日常的なワークフロー
  • ✅ トラブルシューティング

次のレッスンでは、最新のトレンドであるAIペアプログラミングでのGit活用法を学びます！

【実践演習】ポートフォリオサイトの構築

実際にポートフォリオサイトを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. 基本構造の実装

    • HTML、CSS、JavaScriptの基本ファイルを作成
    • 意味のある単位でコミット

  2. GitHubとの連携

    • GitHubでリポジトリを作成
    • リモートを設定してプッシュ

  3. 機能追加フロー

    • ブランチを使って新機能を追加
    • マージしてmainブランチを更新

  4. GitHub Pagesで公開

    • SettingsからPagesを設定
    • 公開URLを確認
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

🎯 チェックリスト

  • ローカルリポジトリを作成
  • GitHubにリモートリポジトリを作成
  • ブランチを使った開発
  • GitHub Pagesで公開
  • READMEを充実させる

これらを完了すれば、あなたもGitマスターです！

さらに学習を続けるには

素晴らしい学習ペースです！次のレッスンに進むには、無料会員登録をお願いします。無料会員では各コース3レッスンまで学習できます。

無料で続きを学ぶ

各コース3レッスンまで学習可能

学習進捗の自動保存

コース修了証明書の発行