はじめに

なぜブラウザでJSゲームをつくるかというと、

実行環境がブラウザだけで良いこと、
すぐに手元で動かして直せるからです

いちばんてっとり早く 「アプリを自分でつくりきる体験」 ができることも利点だと考えています。JSの基本文法がある程度書けるようになったら以下を実施して、プログラマに欠かせない要素である論理的思考力を鍛えましょう！

たくさんJSゲームをつくるとコードをたくさん書けるので、タイピング速度も上がっていき、一石二鳥です。

やりかた

いたってシンプルですが、

要件を満たすプログラムを書いてもらう
ペアレビューしながらロジックを説明してもらう

です。

まずはMVPを決めて、要件を満たすプログラムを書いてもらいます。
以下は、カウンターアプリのコード例。

Counter.js

const plus = document.createElement("button");
const minus = document.createElement("button");
const reset = document.createElement("button");

plus.innerHTML = "+";
minus.innerHTML = "-";
reset.innerHTML = "Reset";

plus.addEventListener("click", () => {
  if (counter < 9) {
    counter++;
    number.innerText = counter;
  } else {
    console.log("おしまい");
  }
});

minus.addEventListener("click", () => {
  if (counter > 0) {
    counter--;
    number.innerText = counter;
  } else {
    console.log("おしまい");
  }
});

reset.addEventListener("click", () => {
  counter = 0;
  number.innerText = counter;
});

let counter = 0;
const app = document.querySelector("#app");
const number = document.createElement("div");

number.innerText = counter;

app.appendChild(number);
app.appendChild(plus);
app.appendChild(minus);
app.appendChild(reset);

次にペアレビューをおこないます。
1行目からコードの説明してもらい説明がおわったらレビュアーは気になる部分について質問していきます。
ロジックについての説明があいまいだった点は本人も理解が完全にできていない可能性があるので、その部分の確認をしてもよいです。

このアクティビティの目的は、論理的思考力を働かせながらプログラムを書けているか？を知ることです。

要件通りに動かない、説明できない
要件通りに動くが、コードをすべて説明できない
要件通りに動き、コードをすべて説明ができる
要件通りに動き、コードをすべて説明ができる、（＋α）

＋αの部分に入る観点

DRYなコード
リーダブルなコード
冗長なものがない短いコード
変更しやすいコード

その他のゲームアプリのバリエーション

実際に作ってもらったJSゲームの種類は以下です。

カウンター
バルーンゲーム
カウントダウンタイマー
クイズ
占い
ビンゴゲーム
TODOアプリ
パスワードジェネレータ
カレンダー
スネークゲーム
ブロック崩し

お題は、ほとんどドットインストールを参考にしていますが、いまだとChatGPTにお題のアプリの要件を考えてもらうアプローチもあるかもしれません。

慣れてきたら

アプリを作ってはプルリクを投げてもらって、ビシバシとレビューをしていきます。最初だからといって手加減をせずに「すべての行にコメントする」くらいの気構えで行きましょう。

はじめの頃はレビューがたくさんついて大変ですが、論理的思考力が伸びてくるにつれ良いコードが書けている実感が持てだすので大丈夫。

実際このカリキュラムのなかで、GitHubでのプルリク→コメント→フィードバック対応のサイクルが100周くらいできるのでGitコマンドやGitHubでの開発が染み付いてくるという副次的効果もありました。