Gitのフローをゲームで学んでみよう！Learn Git Branching
Posted by HATTORI on
こんにちは。うっかりチカッパです。
今週は、久しぶりにGitに関係するお話をしようと思います。
ここ最近は、毎日のようにGitを使用しています。以前ブログを書いた時よりもスムーズに操作を行えるようになっているはず…。でも理解の難しい部分もあり、日々調べては試してみたりしています。
Gitについて調べ物をしている最中、ゲーム感覚でGitの仕組みを学べるサイトがあったことを思い出したので土日に遊んでいました。
少し前から公開しているサイトなのでご存知の方もいるかもしれませんが、大変よくできていて面白いので、ご紹介いたします！
Learn Git Branchingはこんなサイト
普段コマンドを打ったり、GUIで操作を行っていますが、実際にどういったフローが行われているのかイマイチよくつかめない事もありますよね。
このLearn Git Branchingは、ブランチの動きがアニメーションとなって、どのようなフローを踏んでいるのか視覚的に理解して学ぶことができるんです。
初級から中級までの様々な課題が用意されているのですが、課題を元に実際にコマンドを打ち込んでいくので、コマンドの勉強にもなります。
（英語サイトだったものを日本語に翻訳して公開しているため、ところどころ説明の言い回しが自然ではありませんが、理解に困らない程度だと思います。）
早速、私が遊んでみた時のキャプチャーを元にお話しますね。
まずはデモをごらんください
デモはこちらから見る事ができます。
デモを見ていただくとわかると思いますが、左側の黒い所にはコマンドが記述されており、右側はそのコマンドの操作によってブランチの構造が変わっていく様子が表示されます。
Learn Git Branchingは、初級から中級の様々なgitコマンドを学ぶ事ができるのですが、現在学べるのはcommit、branch、checkout、cherry-pick、reset、revert、rebase、mergeの8つです。
実際の操作はこんな感じ
例として初級編の「ブランチとマージ」をやってみようと思います。
この課題では作成したブランチをマージするまでの工程を学べます。
まず最初はチュートリアルから。これからどんな操作をするのか教えてくれます。
順を追ってわかりやすく説明をしてくれるところがとっても親切！
さて、実際の操作に移ろうと思います。
↑左側のピンクのイラストが目標の構造です。
この構造にするためにはどんなコマンドを打てばいいのか考えてみましょう。
（このgoalのダイアログは”hide goal”のコマンドを打つ、もしくは左側の赤いボタンで消すことができます。）
画面の左下にコマンドを入力する場所がありますので、早速コマンドを入力してみましょう！
入力したコマンドがアニメーションになります。楽しい！
無事にクリアすることができました！
ちなみに、どのようなコマンドを打っても、最終的に課題と同じ構造にすればクリアできます。
模範解答も用意されていますが、チュートリアルで教えられなかったコマンドを打っても、そのとおりにアニメーションが生成されるという…。なかなかよくできているゲームです。
（課題で使用すると想定されていないコマンドはエラーとして認識されるようです。）
課題は少しずつ難しくなっていくのですが、丁寧に少しずつ説明してくれるので、ひとつずつクリアしていけば今まで頭の中で構造を思い描けなかったコマンドについても理解できそうですよね。
最後に
Gitはひとつの操作を誤ると、予想していなかった構造になってしまうことがあります。
操作自体が間違っていればエラーで教えてくれるのですが、構造が誤ったままそのまま制作を進めるとプロジェクトに影響がでてしまうこともあります。
私もまだまだわからないコマンドが多いのですが、このゲームのおかげで苦手意識を持っていたrebaseのことも理解できた気がします。
ゲームなのでミスをしても怖くない！ぜひ練習がてら遊んでみてくださいね。
今週はGitのゲームのご紹介でした！