Gitの操作を学べるインタラクティブWebアプリケーション
Git Questは、Gitの基本的な操作をブラウザ上で学習できる教育用アプリケーションです。VS Codeのような親しみやすいインターフェースで、実際にGitコマンドを実行しながら学べます。
- 🖥️ VS Codeライクなインターフェース: 使い慣れたエディタ風のUIで学習
- 💻 ターミナル操作: 実際のGitコマンドを入力して学習
- 🖱️ GUI操作: VS Codeのような画面操作でもGitを学習可能
- 📚 ステップバイステップ: 初心者でも段階的に学べるチュートリアル
- ✅ リアルタイムフィードバック: 各ステップで正しい操作をガイド
- 🔄 いつでもリセット: 何度でもやり直せる学習環境
- Node.js: 18.x 以上
- npm: 9.x 以上
-
リポジトリをクローン
git clone https://github.com/yourusername/git-quest-vs-code.git cd git-quest-vs-code -
依存関係をインストール
npm install
-
開発サーバーを起動
npm run dev
-
ブラウザでアクセス
http://localhost:5173ブラウザが自動的に開かない場合は、上記のURLに手動でアクセスしてください。
# 本番用ビルド
npm run build
# ビルドしたアプリをプレビュー
npm run preview
# テストを実行
npm run test
# カバレッジ付きでテスト
npm run test:coverage
# リント（コード品質チェック）
npm run lint- アプリを起動すると、Step 0（初期状態）から始まります
- 右側のペインに表示される指示を読んでください
- 下部のターミナルに、指示に従ってGitコマンドを入力します
- コマンドが正しければ、次のステップに自動的に進みます
- 間違ったコマンドを入力すると、ヒントが表示されます
学習するコマンド:
git clone- リポジトリのクローンgit checkout -b- ブランチの作成と切り替えgit add- 変更のステージングgit commit- コミットの作成git push- リモートへのプッシュ
ターミナルステージをクリアすると、VS Codeのような画面操作で同じことを学習できます：
- 左サイドバー: ファイルの確認やソース管理
- 中央エディタ: ファイルの編集
- ステージング: 変更ファイルの「+」ボタンをクリック
- コミット: メッセージを入力して「コミット」ボタン
- プッシュ: 「プッシュ」ボタンをクリック
- GUIステージの最終ステップでも案内されるとおり、ページをリロードして最初からやり直すこともできます
- React 18 - UIライブラリ
- TypeScript - 型安全な開発
- Vite - 高速ビルドツール
- Tailwind CSS - スタイリング（VS Code Light Modernテーマ）
- Zustand - 状態管理
- isomorphic-git - ブラウザで動作するGit実装
- LightningFS - ブラウザ内の仮想ファイルシステム
- Vitest - ユニット・統合テスト
- React Testing Library - コンポーネントテスト
src/
├── components/ # UIコンポーネント
│ ├── Layout/ # レイアウト関連
│ ├── SourceControl/ # ソース管理ビュー
│ ├── Explorer/ # ファイルエクスプローラー
│ └── Common/ # 共通コンポーネント
├── services/ # ビジネスロジック
│ ├── git/ # Git操作サービス
│ ├── terminal/ # ターミナル・コマンド処理
│ ├── filesystem/ # ファイルシステム
│ └── tutorial/ # チュートリアル管理
├── store/ # Zustand状態管理
├── utils/ # 共通ユーティリティ
├── types/ # TypeScript型定義
├── constants/ # 定数・初期データ
└── styles/ # グローバルスタイル
tests/
├── unit/ # ユニットテスト
├── integration/ # 統合テスト
├── components/ # コンポーネントテスト
├── fixtures/ # テスト用フィクスチャ
└── setup/ # Vitestセットアップ
| ステップ | 内容 | 学ぶこと |
|---|---|---|
| Step 0 | 初期状態 | チュートリアルの説明 |
| Step 1 | git clone |
リポジトリのクローン |
| Step 2 | git checkout -b |
ブランチの作成と切り替え |
| Step 3 | ファイル編集 | エディタの使い方 |
| Step 4 | git add |
変更のステージング |
| Step 5 | git commit |
コミットの作成 |
| Step 6 | git push |
リモートへのプッシュ |
ターミナルステージと同じ操作を、VS Codeのような画面操作で学習します。各アクションの後に確認ステップを挟み、画面の状態をしっかり把握できるようになりました。
| ステップ | 内容 |
|---|---|
| Step 2-1 | GUIで新しいブランチを作成 |
| Step 2-2 | ステータスバーでブランチ変更を確認 |
| Step 3-1 | greeting.txt を編集 |
| Step 3-2 | ソース管理ビューに変更が表示されたことを確認 |
| Step 4-1 | GUIでステージング |
| Step 5-1 | GUIでコミット |
| Step 6-1 | GUIでプッシュ |
| Step 6-2 | リモートブランチ一覧を確認し、完了後はリロードで再挑戦 |
# node_modulesを削除して再インストール
rm -rf node_modules package-lock.json
npm install
npm run dev- ブラウザのコンソール（F12キー）を開いてエラーを確認
- ページをリロード（Ctrl+R / Cmd+R）してみる
- リセットボタンを押してみる
- ブラウザのキャッシュをクリア
- ページをリロード
- 別のブラウザで試す（Chrome、Firefox、Edgeを推奨）
プルリクエストを歓迎します！バグ報告や機能リクエストは、GitHubのIssuesからお願いします。
このプロジェクトはMITライセンスの下で公開されています。
- isomorphic-git - ブラウザで動作するGit実装
- VS Code - UIインスピレーション
- Tailwind CSS - スタイリングフレームワーク
Git Questで、楽しくGitを学びましょう！ 🎉