4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Gitを教えることになったのでWebアプリ作ってみた

Posted at

はじめに

この記事は DENSO アドベントカレンダー 2025 の1日目の記事です。

今年から大学で非常勤講師を始めることとなり、その中でアジャイル開発・チーム開発を教えることになりました。チーム開発で欠かせないのがGitとGitHubです。これまでも社内の研修でGitやGitHubの使い方を教えたこともあったのですが、なかなかうまく伝わらないことも多く悩んでいました。

そこで、今回はGitとGitHubの基本的な説明資料と、その内容を手軽に実践できるWebアプリ「Git Quest」を作成したお話です。

これまで感じていたこと

GitやGitHubの使い方を教える際に、以下のような課題を感じていました。

1. 各操作が何をしているのかが理解しづらい

Gitの各コマンドが実際にどのような動作をしているのか、初心者にはイメージしづらいことが多いです。例えば、git addgit commitgit pushの違いが分からなかったり、ブランチの概念が理解しづらかったりします。

資料でなるべくわかりやすく説明するようにはしていますが、ターミナルと資料を受講生が行き来するのは負担が大きく、今どのページの作業をしているのかがわかりづらいこともありました。

2. 気軽に試せる環境がない

GitやGitHubの操作を学ぶためには、実際に手を動かして試すことが重要です。
しかし、Gitの操作を試す環境を整えるのもハードルが高いことがあります。
また、誤った操作をしてしまった場合、講師に質問し復旧することになるのですが、結果的に通常の開発ではどのような操作が必要になるかを理解できないまま終わってしまうということもあったりしました。

3. 何度も繰り返し練習できない

GitやGitHubの操作は一度学んだだけではなかなか身につかないことが多いです。繰り返し練習することで理解が深まります。
しかし、git cloneなど一部の操作は、最初の1回しかしないことが多くなかなか練習の機会が得られないことがあります。

4. GUIを教えるべきか?CLIを教えるべきか?

これまでGUIでGitの操作を教えたり、CLIでGitの操作を教えたりしてきましたが、どちらが良いのか悩むことがありました。GUIは直感的でわかりやすい反面、細かい操作ができなかったり、CLIは柔軟性が高い反面、初心者には敷居が高く感じられることがあります。

正直どちらがいいかは人によるような気がしていますが、両方を教えるには時間が足りないことも多く、悩ましいところです。

なければ作ればいいじゃない

昨今の生成AIの進化は凄まじいですよね。

生成AIによって様々な変化が起きていますが、今のところ個人的に一番共感しているのがt-wadaさんの以下のツイートです。

ということで、Gitを学ぶ良い教材がないなら、自分で作ってしまえばいいじゃない、と思い立って作成したのが「Git Quest」です。

普段の業務でも生成AIは積極的に活用していますが、生成AIが書いたコードは全て目を通していますし、結構口出ししながら開発しているので、Vibe Codingはやったことがありませんでした。今回は、Vibe Codingにトライするいい機会だと思い、生成AIが書いたコードはほとんどチェックせず、動作確認だけを行いながら開発を進めました。

Git QuestとGitの基礎資料

Git Questは、GitHub Pagesで公開しているため、どなたでもアクセスできます。

また、Gitの基礎資料もあわせて作成しました。

Git Questの特徴

1. 各ステップで資料の説明が画面に表示されるため、ターミナルと資料を行き来する必要がない

こんな感じで、資料の図をそのまま画面に差し込んでいるので画面だけみて操作すればOK
Image from Gyazo

2. ブラウザ上でGitの操作を試せるため、環境構築が不要

ブラウザ上で完結するため、ローカルでGit環境を構築する必要がありません。また、誤った操作をしてしまった場合でも、画面をリロードすれば初期状態に戻るため、気軽に試すことができます。

3. 何度も繰り返し練習できる

Git Questはアクセスするたびに初期化されるため、何度でも繰り返し練習できます。

4. GUIとCLIの両方で操作できる

Git Questでは、GUIとCLIの両方でGitの操作を体験できます。どちらも試したうえで、自分に合った方法を選ぶことができます。

学生からの反応

非常勤講師として教えた学生からは、以下のような反応がありました。

  • Gitの詳細をあらためてしることができて勉強になった。Git勉強アプリがすごいクオリティだった。このレベルのアプリを作れるようになりたい。
  • Gitの使い方講座の演習に使用したGit Questについて、CUI上の操作とGUI上の操作を両方体験できるような演習設計が良かったです!特に、CUI上の操作のときにGUI操作ができないように禁止アイコンで操作させないようなUIづくりが良かったです!
  • これまでGitの使い方を理解できなかったが、今回のチュートリアルで手を動かしながら学ぶことができ、理解できた。
  • Git Questに関して、サークルや研究室などであるツールがあったときの教育に困っていたので、ちょっと真似をさしていただきたいなと感じました。
  • Git講座では、PBLでのソースコード管理の流れをわかりやすい図付きでStepごとに説明していただいたので、実際の開発の中でどのような場面でどの操作を行うのかが具体的にイメージできるようになりました。

やっぱり、これだけいい反応をもえると嬉しいですね!

おわりに

今回Git Questを作成してみていくつか感じたことがありました。

  • 生成AIのおかげで、自分が欲しいものを手軽に作れるようになったと実感
  • 自分が作ったアプリを眼の前で動かしている人を見るのは嬉しい
  • Vibe Codingだと中身が把握できていないので、やはり業務でやるのは抵抗がある

今後も、自分が欲しいものはサクッと作っていければと思ってます!

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?