多くの開発者には、こんな経験があるのではないでしょうか。何年も Git を使ってきたのに、ブランチ操作になると頭が混乱する。git rebase を実行したら何かが壊れて、git reset --hard で元に戻し、「もう rebase には触れない」と心に誓う。思い当たりますか？
実は、Git の根底にあるモデルはとても洗練されています。混乱の原因は、学ぶ順序が逆になっていることにあります。コマンドの構文を覚える前に、そのコマンドがリポジトリに何をしているかを理解できていないのです。Learn Git Branching（https://learngitbranching.js.org）は、このアプローチをまったく逆転させています。アカウントを作る必要はなく、30秒足らずで始められます。
Learn Git Branching とは
サイトを開くと、すぐにインタラクティブなサンドボックスに入ります。左側には本物の Git コマンドを入力できるターミナル、右側にはリポジトリのアニメーショングラフが表示されます。コミットはノード、ブランチは線、HEAD がどこを指しているかは矢印で示されます。git commit と入力すると新しいノードが現れ、git branch feature と入力するとラベルが分岐し、git checkout feature && git commit を2回実行すると、分岐がリアルタイムで形成されていきます。
ここに核心があります。Git の思考モデルは有向非巡回グラフ（DAG）であり、コマンドを入力するたびにそのグラフが即座に更新されるのを見ることで、どれだけ読んでも得られなかった具体的な理解が生まれます。
コンテンツは2つの主要シーケンスに整理されています。Main（コミット、ブランチ、マージ、リベース、HEAD の移動、相対参照、変更の取り消し）と Remote（リモートリポジトリとの push/pull/fetch のワークフロー全体）です。各シーケンスには複数のレベルがあり、各レベルでは「リポジトリをこの目標状態にしてください」という具体的な課題が出されます。
ログインは不要です。進捗はサーバーに同期されません。クリアしたレベルは localStorage に保存されるので、同じマシン上のブラウザセッションをまたいで引き継がれます。思い切って試したいときは、reset コマンドでサンドボックスを初期化し、現在のレベルをやり直せます。
Git の可視化がなぜ重要なのか
git rebase main を2通りの方法で説明してみましょう。
テキストによる説明：リベースは現在のブランチのコミットをターゲットブランチの先端に再適用し、線形の履歴を生成します。
ビジュアルによる説明：feature ブランチのコミットが元の場所から切り離され、新しい SHA ハッシュに書き換えられ、main の先端にきれいな一本の線として接続される様子が、約半秒のアニメーションで表示されます。
どちらも同じことを言っています。しかし、本当に理解できるのはどちらか、一目瞭然です。
これは、ソートやグラフアルゴリズムをアニメーションで可視化する VisuAlgo、Python のコード実行を1行ずつ追って変数の状態を示す Python Tutor と同じ原理です。抽象的な計算プロセスにおいて、可視化は教育の補助手段ではなく、それ自体が説明なのです。
Git は特にこのアプローチに向いています。そのデータモデルが本質的にグラフだからです。すべてのリポジトリは文字通りグラフです。テキストコマンドはそのグラフを操作するテキストインターフェースに過ぎません。グラフが目の前に表示されると、コマンドは呪文ではなく、グラフ操作として見えてきます。
レベルを順に見てみると
入門シーケンスは穏やかに始まります。レベル1は git commit を2回入力するだけです。コミットとは何かの説明があり、グラフには3ノードの線形チェーンが表示されます。それだけです。
レベル5になると、git branch -f を使ってコミットをチェリーピックし、ブランチを移動させる操作をします。Remote セクションに入る頃には、ローカルと origin の間の分岐した履歴を管理し、実際の開発で問題になる状況を解決しています。
特に印象的なエクササイズをいくつか紹介します。
- 「HEAD を切り離せ」 — ブランチ名ではなくコミットの位置（
HEAD~3のような相対参照）でチェックアウトすることを強制することで、相対参照を教えます。この1レベルだけで、謎めいたdetached HEAD state警告の多くが説明できます。 - 「ローカルに積み上がったコミット」 — デバッグ用のコミットと本番機能のコミットが混在していて、デバッグの痕跡を含まずに機能だけをリリースしなければならない現実的なシナリオが出されます。
git rebase -iでもgit cherry-pickでも解けるよう、レベルは両方を受け付けます。 - 「Main をプッシュせよ！」 — Remote セクションの締めくくり。origin が先に進んでいるためにプッシュが拒否される状況をシミュレートします。マージかリベースのどちらかを選んで、リモートの変更を統合してからプッシュする必要があります。
「learngitbranching.js.org の git の解説は、git をただ使うのではなく本当に理解するために読んだ中で最も役に立ったものの一つだ。」 — Git 学習リソースに関する Hacker News のディスカッションで繰り返し見られるコメント
他の Git 学習方法との比較
| アプローチ | 開始までの時間 | インタラクティブ性 | リモートをカバー |
|---|---|---|---|
man git-rebase | すぐ | なし | あり |
| Git ブック（git-scm.com） | 数分 | なし | あり |
| GitHub のインタラクティブチュートリアル | 数分 | 一部 | 一部 |
| Learn Git Branching | すぐ | 完全 | あり |
| 動画コース | 数分 | なし | あり |
man ページや公式ドキュメントは信頼性が高いですが、すでに思考モデルを理解していることを前提としています。動画チュートリアルは受動的な視聴が必要です。GitHub の Try Git は複数回廃止・リダイレクトされています。一方、Learn Git Branching は2013年から継続してメンテナンスされており、「Git ブランチの仕組みをどう学べばいいか」という質問への定番の回答であり続けています。
正直に言うべき制限もあります。Learn Git Branching はリポジトリをシミュレートするものであり、実際のファイルを扱いません。実際のコード上でのマージコンフリクトの解消を練習することはできません。それには実際のリポジトリと Compiler Explorer や手元の開発環境が必要です。Learn Git Branching は「リポジトリの構造に何が起きているか」という疑問に答えてくれますが、実際のコンフリクト解消は別のスキルです。
オープンソースで活発にメンテナンス中
プロジェクトは github.com/pcottle/learnGitBranching で公開されており、29,000 以上の GitHub スターを持ち、10年以上にわたるコントリビューションがあります。コードベースは JavaScript で、可視化は完全にクライアントサイドで動作します。サーバーへのアクセスはなく、コマンドの収集もありません。
プライバシーを気にする学習者には重要なことです。ブラウザの Network タブを開きながらコマンドを入力してレベルをクリアしても、ネットワークリクエストが発生しないことを確認できます。すべてはブラウザの JavaScript エンジン上で動作します。ページが読み込まれたあとは、ローカルの状態だけが操作されます。
翻訳はコミュニティによって提供されており、URL パラメータ（例：?locale=ja）を使って十数か国語に対応しています。同じコードベースが世界中のすべての学習者にサービスを提供し、言語設定によらずサンドボックスの動作は変わりません。
特に恩恵を受けるのは
ジュニア開発者は早いうちに Git に触れますが、使うコマンドは限られがちです。add、commit、push、pull。それで十分なことが多いですが、限界が来るときがあります。リベースが失敗したとき、リリースブランチからフィックスをチェリーピックしなければならないとき、PR レビュー前にコミット履歴の整理を求められたとき。Learn Git Branching は「Git を使っている」から「Git を理解している」へと最短で移行するための手段です。
チームを移った開発者が異なるブランチ戦略（Gitflow vs. トランクベース開発 vs. GitHub flow）に対応しなければならないとき、rebase とマージのセクションを使ってコミット履歴に何が起きているかをすばやく把握できます。
経験豊富な開発者が「怖いから」という理由で git rebase -i を避けてきた場合、インタラクティブリベースのレベルは本当に目からウロコが落ちます。ビジュアルのフィードバックループが「何が起きるか分からない」という不安を取り除いてくれます。
バージョン管理を教える方がブートキャンプや授業でこれを使うのは、ビジュアルフィードバックが議論をしやすくし、アカウント不要なのでワークショップ中のアカウント作成に時間を取られないからです。Learn Git Branching は何年も前からその用途で使われ続けています。
今すぐ始めてみましょう
learngitbranching.js.org にアクセスしてください。「Start」をクリックして、git commit と入力する。これだけがオンボーディングの全工程です。
特定のコンセプトから始めたい場合は、レベル選択ダイアログ（ページ上部のレベル名をクリック）を使ってください。ローカルブランチには慣れていて、リモートワークフローに集中したい場合は、Remote セクションに直接ジャンプするのがおすすめです。
特定のコースや有料ツールを強制せずに Git の知識を標準化したいチームにとって、Learn Git Branching は自然な参考リソースです。無料で、ブラウザベースで、アカウント不要で、日々の現場で最も混乱を生むコンセプトをカバーしています。コードレビューの議論で具体的な指摘をしたいときは、特定のレベルへのリンクを共有することもできます。
このツールは2013年から Git の仕組みを教え続けています。多くの学習ツールが現れては消えていく分野において、この長寿命さは注目に値するシグナルです。