【無料公開】本物のターミナルでGitを学べる学習アプリを作りました
Claude Code を使っていると、「git でコミットしておいて」「変更を元に戻して」とお願いするだけで、AI がバージョン管理をやってくれます。とても便利です。
でも、ふとこう思ったことはありませんか？
> AI に任せているけど、自分は git を分かっていない。本当にこの操作で合っているのか、確認できない。
これは多くの Claude Code ユーザーがぶつかる壁です。AI に正しく指示し、その作業をチェックするには、結局のところ 自分自身が git を理解している必要があります。
そこで、手を動かして git を学べる学習アプリを作り、GitHub で 無料公開 しました。この記事ではその紹介と、使い方をお伝えします。
👉 公開先：github.com/maahh/git-learning-app
このアプリの特徴：「本物の git」が動く
世の中の git 学習サービスの多くは、画面上で「git を動かしているフリ」をする疑似シミュレーターです。学びやすい一方で、本物との細かな挙動の違いに後で戸惑うことがあります。
このアプリは違います。ブラウザの中で、本物のターミナル（bash）と本物の git がそのまま動きます。
- あなたが入力したコマンドは、実際の `git` に届きます
- 表示される結果も、本物のリポジトリの状態です
- だから、ここで覚えたことは **そのまま実務で通用します**
中身：解説9章 ＋ 実践ドリル100問
📚 解説つき9章（はじめての人向け）
1. リポジトリを作る
2. コミットしてみる
3. 変更を確認する（diff）
4. ブランチを作る
5. マージする
6. やり直す（restore）
7. .gitignore で不要なファイルを除外する
8. コンフリクト（衝突）を解決する
9. 実践演習：機能開発の一連の流れ
各章には「中学生でも分かる解説」と「なぜそのコマンドを打つのか」という理由付きの手順がついています。読んでから、実際にターミナルで打って、達成条件をクリアすると次に進めます。
🥋 実践ドリル100問（手を動かして反復）
解説を一通り終えたら、実務でよく使う git 操作を 100本ノック形式 で反復練習できます。コミットの修正、ブランチ操作、マージ、`stash`（作業の一時退避）、`reflog`（やらかしからの復旧）、リモート操作まで、現場で必要な技を網羅しています。
各問には ヒント と 模範解答 が付いているので、詰まっても安心です。
🎨 「今どうなっているか」が一目で分かる
git の挫折ポイントは「自分のファイルが今どういう状態なのか分からない」ことです。このアプリでは、ファイルの状態（未追跡 / 変更 / ステージ済み / コミット済み / 無視）を 色分けで可視化 しています。手を動かすたびに画面が変わるので、git の仕組みが直感的に頭に入ります。
動かし方（Mac / Linux）
本物のターミナルを動かす都合上、自分のパソコンで起動する形になっています。手順はかんたんです。
# 1. ダウンロード
git clone https://github.com/maahh/git-learning-app.git
cd git-learning-app
# 2. 準備（最初の一回だけ）
npm install
# 3. 起動
npm run dev
あとはブラウザで `http://127.0.0.1:3000` を開くだけ。
> ※ 動かすには Node.js（バージョン20以上）と git が入っている必要があります。Claude Code を使っている方なら、たいてい両方そろっているはずです。
なぜ無料で公開したのか
「本物のターミナルを動かすアプリ」は、仕組み上、自分のパソコンで動かすのが一番安全で快適です。サーバーを用意して有料で運営するよりも、ソースコードごと無料で公開して、みんなが自由に使える ほうがずっと健全だと考えました。
中身を改造するのも、自分の学習教材に作り変えるのも自由です（MIT ライセンス）。
今後の予定：ブラウザだけで動く学習アプリ
git や本物のターミナルは「自分のパソコンで動かす」のが前提ですが、Python のような言語学習は、ブラウザだけで本物が動かせます。インストール不要で、リンクを開くだけで学べる学習アプリも準備中です。こちらは公開しだい、またブログでお知らせします。
まとめ
- Claude Code に git を任せるなら、**自分も git を理解しておく** と指示が的確になります
- そのための学習アプリを **本物の git で動く形** で作り、GitHub に無料公開しました
- **解説9章 ＋ 実践ドリル100問**、ファイル状態の可視化つき
- Mac / Linux で `git clone` → `npm install` → `npm run dev` ですぐ試せます
ぜひ実際に手を動かして、git を「読めて・打てて・直せる」状態を目指してみてください。
👉 github.com/maahh/git-learning-app
