まっさらな新人研修コーチAdvent Calendar 2024

【JS】論理的思考力up＋コードをたくさん書く＝JSでゲームをたくさんつくるが最高だった

研修

Posted at 2024-12-03

はじめに

なぜブラウザで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);