Compare commits

...

2 Commits

Author SHA1 Message Date
97d0606a16 TODOアプリ開発カリキュラムを大幅に充実
- 開発環境セットアップセクションを追加(Node.js、VS Code、Git)
- 各Phaseに詳細な解説と日本語参考文献を追加
- コード例を充実させ、「なぜそう書くのか」の説明を追加
- よくあるエラーと対処法、FAQ(よくある質問)セクションを追加
- 段階的な学習目標と確認ポイントを明確化
- トラブルシューティングとデバッグ方法を充実
- パフォーマンス最適化とベストプラクティスまで網羅
2025-07-08 16:11:22 +09:00
c017844b9d ドキュメント更新 2025-07-08 16:11:22 +09:00
2 changed files with 2186 additions and 89 deletions

View File

@@ -102,6 +102,35 @@ git init
git status git status
``` ```
**💡 コマンドの詳細説明:**
**git initとは**
- 現在のディレクトリをGitリポジトリにします
- `.git`という隠しフォルダが作られ、そこに変更履歴が保存されます
- 一度だけ実行すればOK
**git statusとは**
```bash
# 実行例
$ git status
On branch main
No commits yet # まだコミットがない
Untracked files: # Gitが追跡していないファイル
(use "git add <file>..." to include in what will be committed)
README.md
index.html
```
**状態の読み方:**
- 赤色 = 変更されたがステージングされていない
- 緑色 = ステージングされたコミット準備OK
- Untracked = Gitがまだ追跡していない新しいファイル
VSCodeでの確認: VSCodeでの確認:
- 左サイドバーの「ソース管理」アイコンをクリック - 左サイドバーの「ソース管理」アイコンをクリック
@@ -122,6 +151,44 @@ git status
git commit -m "初回コミット: プロジェクトのセットアップ" git commit -m "初回コミット: プロジェクトのセットアップ"
``` ```
**💡 コマンドの詳細説明:**
**git addとは**
```bash
# 全てのファイルをステージングエリアに追加
git add .
# 特定のファイルだけ追加
git add README.md
# 特定の種類のファイルを追加
git add *.js
```
**ステージングエリアとは?**
- コミット前の「準備エリア」のようなもの
- ここに追加したファイルだけがコミットされる
- 間違えてaddした場合は`git reset`で取り消せる
**git commitとは**
```bash
# 基本形
git commit -m "メッセージ"
# 詳細なメッセージを書きたい場合
git commit # エディタが開く
```
**良いコミットメッセージの例:**
-`feat: TODO追加機能を実装`
-`fix: 空のTODOを追加できるバグを修正`
-`更新` (何を更新したか不明)
-`aaa` (意味がわからない)
##### VSCode GUI方式 ##### VSCode GUI方式
1. ソース管理パネルを開くCtrl+Shift+G 1. ソース管理パネルを開くCtrl+Shift+G
@@ -142,6 +209,37 @@ git log --oneline
git log --graph --oneline --all git log --graph --oneline --all
``` ```
**💡 コマンドの詳細説明:**
**git logの様々な表示方法**
```bash
# 詳細表示(デフォルト)
$ git log
commit a1b2c3d4e5f6... # コミットIDSHA-1ハッシュ
Author: Your Name <email@example.com>
Date: Mon Jan 15 10:30:00 2024 +0900
feat: TODO追加機能を実装
# 1行表示簡潔
$ git log --oneline
a1b2c3d feat: TODO追加機能を実装
9876543 fix: バグ修正
# グラフ表示(ブランチが見える)
$ git log --graph --oneline
* a1b2c3d (HEAD -> main) feat: TODO追加機能を実装
* 9876543 fix: バグ修正
```
**便利なオプション:**
- `-n 5` - 最新の5件だけ表示
- `--since="2 weeks ago"` - 2週間以内のコミット
- `--author="Your Name"` - 特定の人のコミット
- `--grep="fix"` - メッセージに"fix"を含む
VSCode: VSCode:
- Git Graph拡張機能でビジュアル表示 - Git Graph拡張機能でビジュアル表示
@@ -169,6 +267,42 @@ git branch
git checkout -b feature/add-todo-edit git checkout -b feature/add-todo-edit
``` ```
**💡 コマンドの詳細説明:**
**ブランチとは?**
- 開発の「枝分かれ」を作る機能
- mainブランチを安全に保ちながら、新機能を開発できる
- 失敗しても元に戻せる
**git branchの表示**
```bash
$ git branch
* main # *がついているのが現在のブランチ
feature/todo-list
feature/styling
```
**git checkoutの使い方**
```bash
# 新しいブランチを作成して切り替え(一番よく使う)
git checkout -b feature/new-feature
# 既存のブランチに切り替え
git checkout main
# ブランチを作成だけ(切り替えない)
git branch feature/test
```
**ブランチ名のルール(例):**
- `feature/機能名` - 新機能開発
- `fix/バグ名` - バグ修正
- `refactor/内容` - コード整理
VSCode: VSCode:
- ステータスバー左下のブランチ名をクリック - ステータスバー左下のブランチ名をクリック
@@ -186,6 +320,44 @@ git checkout main
git merge feature/add-todo-edit git merge feature/add-todo-edit
``` ```
**💡 コマンドの詳細説明:**
**マージとは?**
- 別ブランチの変更を現在のブランチに統合すること
- 枝分かれした開発を一つにまとめる
**マージの流れ:**
```bash
# 1. 現在のブランチを確認
git branch
feature/add-todo-edit
* main
# 2. マージ実行
git merge feature/add-todo-edit
Updating a1b2c3d..e5f6g7h
Fast-forward # 早送りマージ(コンフリクトなし)
src/app/page.tsx | 20 ++++++++++++++++++++
1 file changed, 20 insertions(+)
# 3. マージ後の確認
git log --oneline --graph -5
```
**Fast-forwardマージとは**
- コンフリクトがないシンプルなマージ
- mainブランチがただ「進む」だけ
**マージ後のブランチ削除:**
```bash
# 不要になったブランチを削除
git branch -d feature/add-todo-edit
```
VSCodeでのマージ: VSCodeでのマージ:
1. Git Graphで視覚的にブランチを確認 1. Git Graphで視覚的にブランチを確認
@@ -356,11 +528,76 @@ git config --global alias.lg "log --graph --oneline --all"
- **問題**: Windows側のパスとWSL側のパスの混同 - **問題**: Windows側のパスとWSL側のパスの混同
- **対策**: 常にWSL側で作業、`pwd`でパス確認 - **対策**: 常にWSL側で作業、`pwd`でパス確認
**💡 具体的な例と解決法:**
```bash
# パスの確認方法
$ pwd
/mnt/c/Users/... # ❌ Windows側遅い
/home/username/... # ✅ WSL側速い
# ホームディレクトリに移動
cd ~
# Windows側からWSL側にファイルをコピー
cp -r /mnt/c/Users/yourname/projects/todo-app ~/projects/
```
**VSCodeでの確認方法**
- 左下に`WSL: Ubuntu`と表示されているか確認
- ターミナルで`pwd`を実行してパスを確認
### 2. 改行コードの不一致 ### 2. 改行コードの不一致
- **問題**: WindowsのCRLFとLinuxのLFの混在 - **問題**: WindowsのCRLFとLinuxのLFの混在
- **対策**: `.gitattributes`で統一、VSCodeの設定で`LF`に固定 - **対策**: `.gitattributes`で統一、VSCodeの設定で`LF`に固定
**💡 詳細な解決方法:**
**エラーの例:**
```bash
$ git add .
$ git status
warning: LF will be replaced by CRLF in src/app/page.tsx.
The file will have its original line endings in your working directory
```
**解決手順:**
1. **Gitの設定を変更**
```bash
# WSL側で実行
git config --global core.autocrlf input
```
2. **`.gitattributes`ファイルを作成**
```bash
echo "* text=auto eol=lf" > .gitattributes
git add .gitattributes
git commit -m "fix: 改行コードをLFに統一"
```
3. **既存ファイルの改行コードを修正**
```bash
# 全ファイルの改行コードをリセット
git rm --cached -r .
git reset --hard
```
4. **VSCodeの設定を変更**
```json
// .vscode/settings.json
{
"files.eol": "\n" // LFに固定
}
```
### 3. VSCodeが重い ### 3. VSCodeが重い
- **問題**: Windows側のファイルをWSL経由で編集 - **問題**: Windows側のファイルをWSL経由で編集
@@ -371,6 +608,88 @@ git config --global alias.lg "log --graph --oneline --all"
- **問題**: HTTPSでのpush時に認証失敗 - **問題**: HTTPSでのpush時に認証失敗
- **対策**: SSH接続の使用、または認証トークンの設定 - **対策**: SSH接続の使用、または認証トークンの設定
**💡 詳細な解決方法:**
**エラーの例:**
```bash
$ git push origin main
Username for 'https://gitea.example.com': yourname
Password for 'https://yourname@gitea.example.com':
remote: Invalid username or password.
fatal: Authentication failed
```
**解決方法1SSHに切り替える推奨**
```bash
# 1. 現在のリモートURLを確認
git remote -v
# 2. HTTPSからSSHに変更
git remote set-url origin git@gitea.example.com:username/todo-app.git
# 3. SSH鍵が設定されているか確認
ssh -T git@gitea.example.com
```
**解決方法2アクセストークンを使う**
1. Giteaでアクセストークンを生成
- 設定 → アプリケーション → アクセストークンを生成
2. 認証情報を保存
```bash
# 認証情報ヘルパーを設定
git config --global credential.helper store
# 次回のpush時にユーザー名とトークンを入力
# パスワードの代わりにアクセストークンを使用
```
### 5. ファイルが表示されない/消えた
**💡 よくあるシナリオと解決法:**
**ケース1.gitignoreに追加されている**
```bash
# .gitignoreの内容を確認
cat .gitignore
# 特定のファイルがgitに追跡されているか確認
git ls-files | grep "filename"
# .gitignoreされているファイルを強制的に追加
git add -f filename
```
**ケース2間違えて削除した**
```bash
# 削除したファイルを復元
git checkout HEAD -- filename
# または、特定のコミットから復元
git checkout abc123 -- filename
```
### 6. コミットメッセージを間違えた
**💡 修正方法:**
```bash
# 直前のコミットメッセージを修正
git commit --amend -m "新しいメッセージ"
# エディタで編集
git commit --amend
# 注意すでにpushした場合は強制pushが必要推奨しない
# git push --force-with-lease origin main
```
## 実践演習 ## 実践演習
### 演習1: TODOアプリの履歴管理 ### 演習1: TODOアプリの履歴管理
@@ -411,6 +730,34 @@ feat: TODO編集機能を追加
変更 変更
``` ```
### 💡 コミットメッセージのフォーマット
**基本形:**
```
<タイプ>: <概要>
<詳細説明(オプション)>
```
**タイプの種類:**
- `feat`: 新機能
- `fix`: バグ修正
- `docs`: ドキュメント
- `style`: コードの意味に影響しない変更
- `refactor`: コードの改善
- `test`: テスト追加・修正
- `chore`: ビルドプロセスや補助ツールの変更
**例:**
```bash
git commit -m "feat: TODOのフィルタリング機能を追加"
git commit -m "fix: 空のTODOを追加できるバグを修正"
git commit -m "docs: READMEにインストール手順を追加"
```
## VSCode ショートカット集 ## VSCode ショートカット集
| 操作 | ショートカット | | 操作 | ショートカット |
@@ -433,12 +780,73 @@ wsl --list --verbose
cd ~/projects # Windows側ではなくWSL側で作業 cd ~/projects # Windows側ではなくWSL側で作業
``` ```
**💡 詳細な解決方法:**
**原因:** Windows側のファイルをWSL経由でアクセスすると遅い
```bash
# ❌ 遅いパスWindows側
cd /mnt/c/Users/yourname/projects/
# ✅ 速いパスWSL側
cd ~/projects/
# パフォーマンス比較
time git status # 実行時間を計測
```
**他の改善策:**
1. Windows Defenderの除外フォルダにWSLを追加
2. `.gitconfig`に以下を追加:
```
[core]
preloadindex = true
fscache = true
```
### VSCodeがWSLに接続できない ### VSCodeがWSLに接続できない
1. WSL拡張機能の再インストール 1. WSL拡張機能の再インストール
2. WSLの再起動: `wsl --shutdown` 2. WSLの再起動: `wsl --shutdown`
3. VSCodeの再起動 3. VSCodeの再起動
**💡 詳細な解決手順:**
**ステップ1拡張機能の確認**
```bash
# VSCodeで拡張機能を確認
# Ctrl+Shift+X で拡張機能パネルを開く
# "WSL" を検索してインストール済みか確認
```
**ステップ2WSLの再起動**
```powershell
# PowerShellで実行管理者権限
wsl --shutdown
# 再度WSLを起動
wsl
```
**ステップ3コマンドラインからVSCodeを起動**
```bash
# WSL内から実行
cd ~/projects/todo-app
code .
```
**それでも動かない場合:**
```bash
# WSL内でVSCode Serverを手動インストール
wget -O- https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64 | tar -xz
```
## 発展学習 ## 発展学習
1. **Git Flow**の理解と実践 1. **Git Flow**の理解と実践
@@ -449,15 +857,138 @@ cd ~/projects # Windows側ではなくWSL側で作業
## 推奨リソース ## 推奨リソース
### 📚 公式ドキュメント
- [Pro Git Book日本語](https://git-scm.com/book/ja/v2) - [Pro Git Book日本語](https://git-scm.com/book/ja/v2)
- [Gitea公式ドキュメント](https://docs.gitea.io/) - [Gitea公式ドキュメント](https://docs.gitea.io/)
- [VSCode公式ドキュメント - WSL](https://code.visualstudio.com/docs/remote/wsl) - [VSCode公式ドキュメント - WSL](https://code.visualstudio.com/docs/remote/wsl)
- [Learn Git Branchingインタラクティブ学習](https://learngitbranching.js.org/?locale=ja) - [Learn Git Branchingインタラクティブ学習](https://learngitbranching.js.org/?locale=ja)
### 🎥 日本語の動画教材
- [【Git入門】Gitの基本からGitHubの使い方まで完全解説](https://www.youtube.com/watch?v=LDOR5HfI_sQ)
- [【2024年版】VSCodeでGitを使う方法](https://www.youtube.com/watch?v=vMZ0C06soxA)
- [WSL2環境での開発環境構築](https://www.youtube.com/watch?v=CULr6fEUvAo)
- [Gitコマンド入門 - サルでもわかるGit入門](https://backlog.com/ja/git-tutorial/)
### 📖 日本語の参考記事・書籍
- [サルでもわかるGit入門](https://backlog.com/ja/git-tutorial/) - バックログの無料チュートリアル
- [Gitのしくみを図解で理解する](https://qiita.com/rana_kualu/items/4d2d75c6813c05034765)
- [いまさら聞けないGit入門](https://www.slideshare.net/matsukaz/git-28304397)
- 書籍:「Gitが、おもしろいほどわかる本」MdN
- 書籍:「エンジニアのためのGitの教科書」翔泳社
### 🛠️ 実践的な学習リソース
- [GitHub Skills](https://skills.github.com/) - GitHubのインタラクティブコース
- [Git Cheat Sheet (日本語)](https://training.github.com/downloads/ja/github-git-cheat-sheet/) - コマンド一覧
- [Gitea Demo](https://try.gitea.io/) - Giteaを試せるデモサイト
### 💻 WSL関連リソース
- [Microsoft WSL公式ドキュメント](https://learn.microsoft.com/ja-jp/windows/wsl/)
- [WSL2で作るWindows開発環境](https://zenn.dev/ryuu/articles/wsl2-dev-setup)
- [Windows Terminalの使い方](https://forest.watch.impress.co.jp/docs/serial/yajiuma/1265263.html)
## 📦 よくあるGitシナリオ集
### シナリオ1変更を元に戻したい
```bash
# まだコミットしていない変更を全て取り消す
git checkout -- .
# 特定のファイルだけ元に戻す
git checkout -- src/app/page.tsx
# ステージングした変更を取り消す
git reset HEAD filename
```
### シナリオ2コミット履歴をきれいにしたい
```bash
# 直前のコミットと統合(コミットをまとめる)
git reset --soft HEAD~1
git commit -m "整理されたメッセージ"
# 注意すでにpushした場合は他の人に影響するため避ける
```
### シナリオ3作業中に別の作業が必要になった
```bash
# 現在の作業を一時保存
git stash save "途中のTODO編集機能"
# 別のブランチで緊急作業
git checkout -b hotfix/urgent-bug
# ... 作業 ...
git commit -m "fix: 緊急バグ修正"
# 元のブランチに戻って作業再開
git checkout feature/todo-edit
git stash pop
```
## 👨‍🏫 学習のアドバイス
### Git初心者が陥りやすい罠
1. **いきなりmainブランチで作業**
- 必ずブランチを作成してから作業
- mainブランチは「完成品」を置く場所
2. **コミットメッセージが適当**
- 「あとで見る自分」のために丁寧に書く
- 「何を」「なぜ」変更したかを記載
3. **pushしてからミスに気づく**
- push前に`git log`で確認
- `git diff origin/main`で差分を確認
### 効率的な学習方法
1. **コマンドとGUIを両方使う**
- 基本はVSCodeのGUIでOK
- 複雑な操作はコマンドを学ぶ
2. **小さなコミットを心がける**
- 1機能1コミット
- 後から振り返りやすい
3. **エラーを恐れない**
- Gitは「元に戻す」が得意
- 大抵のミスは修復可能
### 次のステップ
1. **ブランチ戦略を学ぶ**
- Git Flow
- GitHub Flow
- GitLab Flow
2. **チーム開発のルール**
- コードレビュー
- コミットメッセージ規約
- ブランチ保護
3. **自動化を学ぶ**
- Git Hooks
- CI/CDパイプライン
## まとめ ## まとめ
WSL+VSCode環境でのGit/Gitea学習は、Windows環境でLinuxライクな開発を可能にします。VSCodeの強力なGit統合機能を活用しながら、コマンドラインでの操作も習得することで、柔軟な開発スタイルを身につけることができます。 WSL+VSCode環境でのGit/Gitea学習は、Windows環境でLinuxライクな開発を可能にします。VSCodeの強力なGit統合機能を活用しながら、コマンドラインでの操作も習得することで、柔軟な開発スタイルを身につけることができます。
**大切なのは:**
- 🔄 失敗を恐れず、何度も試す
- 📝 学んだことをメモする
- 🤝 わからないことは質問する
- 🎯 小さな目標から始める
--- ---
このカリキュラムは、TODOアプリ開発カリキュラムと連携して使用することを想定しています。 このカリキュラムは、TODOアプリ開発カリキュラムと連携して使用することを想定しています。

File diff suppressed because it is too large Load Diff