Git Learning App

ブラウザの中で 本物の bash と本物の git を動かしながら Git を学べる、ローカル実行の学習アプリです。 画面に入力したコマンドはホスト OS の実際の git に届き、結果も実際のリポジトリ状態を表示します。疑似コマンドではありません。

• 🖥️ 本物のターミナル: xterm.js + node-pty で実際の bash を操作
• 🧩 実 git で判定: 達成条件は実際のファイル・git 状態・入力履歴から自動判定
• 📚 解説つき9章: リポジトリ作成 → コミット → diff → ブランチ → マージ → やり直し → .gitignore → コンフリクト解決 → 実践演習
• 🥋 実践ドリル100問: 解説なしの「100本ノック」。ヒント＋模範解答つき
• 🎨 状態の可視化: ファイルの状態（未追跡 / 変更 / ステージ済 / コミット済 / 無視）を色分け表示

⚠️ このアプリはサーバー側で本物の bash を実行します。ローカルの自分専用環境でのみ動かしてください（後述のセキュリティ警告）。

---

必要環境

• OS: macOS / Linux（Windows は node-pty と shell 前提が異なるため非対応）
• Node.js: 20 LTS 以上
• ホストに git がインストールされていること

起動方法

git clone <this-repo-url>
cd claude-git-app-v5
npm install
npm run dev

ブラウザで http://127.0.0.1:3000 を開きます。

ポートが使用中（EADDRINUSE）のときは、前のサーバーが残っています。 lsof -ti:3000 | xargs kill で解放してから npm run dev し直してください。

使い方

• トップページから 章（解説つき学習） または 実践ドリル（100問） を選びます。
• 各章は「解説を読む → 練習問題に進む」の順。中央のターミナルにコマンドを入力すると、右の状態パネルがリアルタイムで更新され、達成条件が満たされると緑のチェックが付きます。
• ドリルは解説なし。詰まったら「ヒント」「答えを見る」を開けます。
• 進捗はブラウザの localStorage に保存されます（個人情報は保存しません）。

コンテンツ

章（全9章・解説つき）

1. リポジトリを作る（init / status）
2. コミットしてみる（add / commit / log）
3. 変更を確認する（diff）
4. ブランチを作る
5. マージする（Fast-Forward）
6. やり直す（restore）
7. .gitignore で除外する
8. コンフリクトを解決する
9. 実践演習（機能開発の一連の流れ）

実践ドリル（全100問・解説なし）

基礎コミット / diff・log / ブランチ操作 / マージ / 取り消し・復旧（restore・reset・revert・reflog）/ stash / tag / リモート操作（push・pull・fetch）/ cherry-pick / rebase / 総合実務フロー など、実務で使う Git コマンドを反復練習できます。

開発・テスト

npm run dev        # 開発サーバー（http://127.0.0.1:3000）
npm run lint       # ESLint（--max-warnings=0）
npm run typecheck  # tsc --noEmit
npm test           # vitest（実 git を使う達成条件テストを含む）
npm run build      # 本番ビルド

技術スタック

レイヤ	採用技術
フロント	Next.js 15 (App Router) / React 19 / TypeScript strict / Tailwind CSS 3
ターミナル	xterm.js + @xterm/addon-fit
サーバー	カスタム Node サーバー（server.mjs）+ ws（WebSocket）
疑似ターミナル	node-pty（実際の bash プロセス）
Git エンジン	ホスト OS の本物の git（child_process 経由）
テスト	vitest + happy-dom（実 git を使った判定テストを含む）

アーキテクチャ概要

[ ブラウザ ]                         [ Node サーバー (127.0.0.1:3000) ]
 Next.js UI                          Next.js handler
 xterm.js  ── WebSocket /pty ──────  node-pty（bash プロセス）
 状態パネル ── REST /api/state ─────  実 git の状態を読んで達成条件を判定
                                            │
                                            ▼
                                     ~/.claude-git-app-v5/sandbox/<track><N>/
                                     （章・ドリルごとに独立したサンドボックス）

達成条件はサーバー側で evaluate*.mjs に集約され、server.mjs とテストが同じ判定関数を共有します。

⚠️ セキュリティ警告（重要）

このアプリは WebSocket 経由でサーバー上の本物の bash を実行します。

• ローカルの自分専用環境でのみ動かしてください。
• 公開デプロイ・共有サーバー・社内ネットワークへの公開は絶対に行わないでください。 任意のシェルコマンドが実行可能になり、重大なセキュリティリスクになります。
• サーバーは 127.0.0.1 のみで待ち受けます。
• ターミナルは学習用サンドボックス内で起動し、サンドボックス外へ cd するとプロンプト表示時に自動で戻す best-effort ガードを入れていますが、完全な隔離ではありません。実験はサンドボックス内で行ってください。

本物の git との差分

このアプリはホスト OS の git をそのまま使うため挙動は本物ですが、学習用に一部のコマンドのみを題材にしています。rebase / cherry-pick / リモート操作なども実際に動作します（ドリルで扱います）。

ライセンス

MIT License。詳細は LICENSE を参照してください。商用利用・改変・再配布が可能です（著作権表示とライセンス全文の同梱が必要）。

貢献

変更前に npm run lint / npm run typecheck / npm test がすべて通ることを確認してください。 ユーザー向けの挙動を変える場合は、該当する unit テスト（特に達成条件の判定）を追加・更新してください。