プログラミング教室 予告

【9月26日 実践コース】タイピング練習アプリをみんなで育てます!

前回はGitHubを使ったチーム開発として、レトロゲームセンターのプロジェクトにみんなでゲームを追加しました。今回は同じ流れで、新しいプロジェクト「TypingSuite(タイピングスイート)」に取り組んでもらいます。

今回使用するプロジェクト

TypingSuiteは、教室のために作っている「タイピング練習アプリ」です。

  • 練習した記録がサーバーに残り、自分がどれだけ上達したかグラフで見られる
  • 先生はクラス全員の練習状況を一覧で確認できる
  • 「タイピング検定」を受けて、級を認定してもらうこともできる

つまり、みなさんが普段パソコンの練習で使っているような「タイピング練習ソフト」を、みんなでゼロから作っているということです。

リポジトリはこちらです。

https://github.com/saitokodomopg/TypingSuite

GitHubって何だっけ?(おさらい)

前回学んだ内容のおさらいです。

GitHub(ギットハブ)は、プログラムやファイルをインターネット上で管理し、複数の人で共有できるサービスです。そしてGit(ギット)は、ファイルの変更履歴を記録するソフトウェアです。

この2つのおかげで、

  • 誰が・いつ・どこを変更したかが記録される
  • 複数人が同時に別の場所を編集しても、あとでひとつにまとめられる

ということができます。今回もこの仕組みを使って、みんなで1つのアプリを育てていきます。

最初にGitを準備します

前回インストールしたGitがそのまま使えるか、念のため確認しておきましょう。

git --version

バージョンが表示されればOKです。表示されない人は先生に声をかけてください。

リポジトリをクローンします

まだ手元にない人は、TypingSuiteのリポジトリをクローン(自分のパソコンにコピー)します。

git clone https://github.com/saitokodomopg/TypingSuite

今回の課題を1つ選びます

今回は「打つ練習パターン(課題)」を1人1つ担当してもらいます。メニューは以下の9つです。迷ったときはリポジトリのdocs/backlog.mdを見て、他の人がすでに選んでいないか確認してから決めてください。

  1. 数字・記号打ち — 電話番号やパスワードのような、数字と記号を打つ練習(例:090-1234-5678
  2. プログラミング用語打ち — 教室で習う単語や短いコードを打つ練習(例:for const console.log()
  3. ことわざ・四字熟語打ち — 日本語のことわざ・四字熟語をローマ字で打つ練習(例:「石の上にも三年」)
  4. 英文(短い文)打ち — 英語の短い文章を打つ練習(例:The quick brown fox jumps.
  5. 都道府県名打ち — 47都道府県の名前をローマ字で打つ練習
  6. 慣用句・早口言葉打ち — リズムよく打てる言い回しを打つ練習(例:「生麦生米生卵」)
  7. 好きなジャンル語句打ち — 自分の好きなアニメ・ゲーム・スポーツ選手名などを打つ練習
  8. 記号多めのコード風打ち — カッコやセミコロンなど記号を多く含む短いコード片を打つ練習
  9. オリジナル課題 — 上のどれにも当てはまらない、自分で考えたテーマ

どれを選んでも、完成の基準は同じです。

出題パターンを用意し、自分の作業ブランチをpushして、そこで発行されるプレビューURLをブラウザで開き、実際に動くことを確認できれば完成です。mainへのマージは含みません(先生がまとめて取り込みます)。

具体的な作り方(フォルダの作り方・コードの書き方)は、リポジトリのsrc/tasks/README.mdにテンプレート付きでまとまっているので、それを見ながら進めてください。

Claude Codeも活用します

前回同様、コードを書くときはClaude Codeを頼ってかまいません。「〇〇を打つ課題を追加したい」と伝えれば、テンプレートに沿ったコードを一緒に考えてくれます。ただし、できあがったコードが本当に動くかは、必ず自分の目と手で確認しましょう。

自分の変更を記録します

課題ができたら、自分のブランチを作って変更を記録(コミット)し、GitHubにpushします。

git checkout -b feature/task-自分の課題名
git add src/tasks/自分の課題名 src/tasks/index.ts
git commit -m "feat: 課題「〇〇」を追加"
git push -u origin feature/task-自分の課題名

pushするとGitHub上に「Compare & pull request」という案内が出るので、そこからPull Request(プルリクエスト)を作成してください。レビューとmainへの取り込みは先生が行うので、マージされるのを待たなくて大丈夫です。

PR画面、またはCloudflareのプレビューデプロイ一覧からプレビューURLを開き、ブラウザで自分の課題を選んで、最後まで打てることを確認できれば完成です。

今回体験してほしいこと

コマンドを丸暗記することが目的ではありません。自分が担当した小さな機能が、みんなで使う1つのアプリの一部になるという体験をしてほしいと思っています。

自分の書いたコードが動くだけでなく、「誰かが実際に使うかもしれないもの」として仕上げること。それが、実際のチーム開発に近い経験になります。

-プログラミング教室, 予告