GitHubをはじめよう

なぜ作ったか

Git と GitHub を初めて使う人が、アカウントの登録から Pull Request で変更を取り込むところまで、日本語で迷わずにたどれる教材として作った。2026 年 9 月 24 日には全 8 章とトップを「今日はじめてパソコンを触る人」に向けて書き直していて、想定している読み手はそこまで初めての人だ。

作り方の判断と経緯

最初は、操作させる教材だった

最初のコミットは 2026 年 9 月 10 日で、その日に「Gitのとびら」という名前で、模擬の画面を自分で操作して進める教材を公開した。Windows / Mac と、ターミナル・VS Code・AI の組み合わせで 6 つのコースに分け、全部で 27 レッスンある。

ところが、実際の画面の再現が汎用の枠とボタンで済まされていて、GitHub や VS Code の本物の画面とは似ていなかった。差し戻して、本物の画面の配置・ラベル・アイコン・操作の後の変化まで写すやり直しに入ったが、利用者に操作させる以上、確かめる対象が「すべての画面 × すべての操作 × すべての状態」に膨らむ。受け入れの検証は 8 件が通って 6 件が落ちたまま止まり、9 月 17 日に凍結した。

操作させず、見せる教材に作り直した

9 月 22 日に公開した v2 は、利用者に操作させない。スクロールすると GitHub の画面の上でカーソルが動き、ボタンが押されて次の画面へ切り替わる。確かめる対象が「止まった画面が本物に忠実か」と「手順が正しく進むか」の 2 つに縮み、どちらもスクリーンショットで測れる。初めての人には、模擬の画面を触るより「次に何が起きるか」を見るほうが早い、という判断でもある。v1 のコードは引き継がず、到達点と反省だけを文書で残した。

スクロールに合わせて動かす方法は 3 つを比べた。CSS のスクロール連動のアニメーションは、9 月 18 日に測った時点で Firefox が対応していなかった。スクロールの位置を自分で読んで動かす方法は、巻き戻しとカーソルの補間を自前で書くことになり、v1 と同じ「自作した分だけ確かめる手間が増える」形に戻る。そこで、巻き戻しが標準で効く GSAP の ScrollTrigger を選び、土台は JavaScript を最小限しか出さない Astro にした。

本物と何で照らし合わせたかを、画面ごとに残す

v1 の反省から、模式図の画面ごとに、本物と何で照らし合わせたかを記録している。実際のページを取得して照合した、公開アーカイブの保存版で照合した、公式ドキュメントの画像で照合した、公式の文章だけ、手元で実行した出力を写した、などの区分で、照合していない部分は忠実だとは書かない。ログインしないと見られない画面の中身は、推測で描かずに無地のままにしてある。

章を 3 つの進め方に分けた

第 3 章からは、ターミナル・VS Code・AI エージェントの 3 つから進め方を選べる。9 月 24 日には、Git を入れて名前とメールを設定する章を第 2 章として Windows / Mac 別に差し込み、以降の章を 1 つずつ繰り下げた。古い章の URL は新しい章へ転送している。

数字で見る今

教材のリポジトリは公開していないので、2026 年 10 月 12 日に数えた数字だけを載せる（最後のコミットは 9 月 30 日）。

項目	値
開発した期間	9 月 10 日〜9 月 30 日（v2 は 9 月 22 日から）
コミット（main）	23。うち Claude との共著が 10
Issue	20 件。閉じたものは 18 件
章	8 章。第 3 章からは 3 つの進め方ごとに手順がある
手順の例	第 1 章は 13 ステップ、第 3 章はターミナル 12・VS Code 13・AI エージェント 16
v1	27 レッスン × 6 コース。受け入れ検証 8 件合格・6 件不合格で凍結

これから

教材の中身の Issue はすべて閉じていて、残っているのは実機での確認だ。iPhone・Android・iPad で、ブラウザのツールバーが出入りしたときや画面を回したときの見え方は、まだ Playwright の端末の設定でしか測っていない。Windows の実機で、Claude Code を入れたあとにパスを通す 1 行を打ち、開き直して動くことも確かめていない。この先は、GitHub のいろいろな機能の章を足していきたいと考えている。チームを運営・マネジメントするときの GitHub の使い方も扱いたい。

関連リンク

• 第 4 章 変更を記録する … 3 つの進め方ごとに 10〜11 ステップ
• 第 8 章 他の人の変更を受け取る … 最後の章