計算ゲーム
「あわせて10」を作った

以前、「たしざんフレンド」という、シンプルなたし算ゲームアプリを作りました。
画面に式を出し、数字を入力して答える、いわゆる基本的な計算練習アプリです。

しばらく使ってみて、次の段階として何を作るべきかを考えました。
そこで意識したのが、算数でよく出てくる 「さくらんぼ計算」 です。

• あわせて10
  （https://app.chiilabo.jp/awasete10/）

1. 「あわせて10」でやりたかったこと

「さくらんぼ計算」とは、数を分けて考える方法です¹。
たとえば「7 + 5」の場合、

• 5 を 3 と 2 に分ける
• 7 + 3 = 10
• 10 + 2 = 12

という流れで考えます。
これは 繰り上がりの足し算の前段階として、とても大事な考え方です²。

ここから、「たしざんフレンド」の続編として
「あわせて10」 を作ることにしました。

このアプリでやりたかったのは、10 という数を、分解して考える感覚を身につけること。

• 10 は、7 と 3 に分けられる
• 10 は、6 と 4 に分けられる

という「数の構造」を、見た目で理解できるようにしたいと考えました。

1.1. 技術構成

• HTML / CSS / Vanilla JavaScript³
• Web Audio API（効果音用）⁴
• PWA（manifest.json + Service Worker）⁵

1.2. 最初の実装：シンプルな「10 − a」

ロジック自体はとても単純です。

• 左に出す数を baseNumber
• 正解は 10 - baseNumber

JavaScript では、次のようになります。

const TARGET_SUM = 10;

correctAnswer = TARGET_SUM - baseNumber;Code language: JavaScript (javascript)

入力された数と correctAnswer を比較して、正解かどうかを判定します。
この時点では、問題表示はまだ普通の式でした。

7 + [ ] = 10

2. 出題方法の改善：1〜9 を必ず使う

次に見直したのは、問題の出し方です。

完全ランダムにすると、

• 同じ数字が何度も出る
• 出ない数字がある

という状態になります。
練習としては、あまり気持ちがよくありません。

そこで、1〜9 を一度ずつ必ず出す方式に変えました。

2.1. 1〜9 をシャッフルするコード

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

function initQuestionList() {
  questionList = [1,2,3,4,5,6,7,8,9];
  shuffle(questionList);
}Code language: PHP (php)

この配列を順番に使うことで、

• 1〜9 が必ず1回ずつ出る
• 順序だけが毎回変わる

という出題になります。

3. 式をやめて「図」にする

ここが、このアプリの一番のポイントです。

「7 + [ ] = 10」という式表示を、

• 上に「10」の箱
• 下に「7」と「空欄」の箱
• それらをつなぐ線

という構造にしました。

3.1. HTML 側の構造（抜粋）

<div class="node node-top" id="target-box">10</div>

<div class="node-row">
  <div class="node node-bottom" id="base-box">7</div>
  <div class="node node-bottom node-answer">
    <div id="answer-display"></div>
  </div>
</div>Code language: HTML, XML (xml)

「どの箱にどの数を入れるか」を考えるだけです。

document.getElementById('target-box').textContent = TARGET_SUM;
document.getElementById('base-box').textContent = baseNumber;Code language: JavaScript (javascript)

4. おわりに

今回は、繰り上がりの足し算に進む前の一段階として、見せ方を変えると、理解の入口がどう変わるかを考えました。

式だけでも計算はできます。
でも、図で見せると、考え方が変わります。

1. さくらんぼ計算は、1つの数字を2つに分解して10のかたまりを作って計算する方法で、小学校1年生の算数で繰り上がりの足し算や繰り下がりの引き算を学習する際に用いられます。 – さくらんぼ計算とは？やり方を大学教員が解説！｜北海道科学大学
2. さくらんぼ計算は、繰り上がりのある足し算や繰り下がりのある引き算で用いられ、算数に必要な考え方を養う効果が期待できるとされています。 – さくらんぼ計算 | ぷりんときっず
3. Vanilla JavaScriptとは、フレームワークやライブラリを使わない、素のJavaScriptのことを指します。
4. Web Audio APIは、ウェブアプリケーションで音声を処理および合成するための高レベルJavaScript APIです。音声の再生、加工、エフェクト適用、空間音響などの高度な音声操作が可能です。 – ウェブオーディオ API – Web API | MDN
5. PWA（Progressive Web Apps）は、Webサイトをネイティブアプリのように利用できるようにする技術です。オフライン動作、ホーム画面へのインストール、プッシュ通知などの機能を提供します。manifest.jsonでアプリ情報を定義し、Service Workerでキャッシュやオフライン対応を実現します。 – プログレッシブウェブアプリ (PWA) | MDN