スクラッチプログラミング - けいさんドリル|たしざん・ひきざん

計算(けいさん)問題(もんだい)を学習(がくしゅう)できるドリルを Scratch (スクラッチ)でつくってみましょう。算数(さんすう)をまなびはじめた小学生(しょうがくせい)にオススメのプロジェクトです。

スクラッチプログラミング - けいさんドリル|たしざん・ひきざん

「たしざん」と「ひきざん」のドリル

Scratch (スクラッチ)で計算(けいさん)ドリルをつくる方法(ほうほう)を、3回(かい)にわけて紹介(しょうかい)していきます。今回(こんかい)は、そのパート1です。

  • パート1(このきじ)では、「たしざん」と「ひきざん」の問題(もんだい)をつくります。
  • パート2では、「かけざん」と「わりざん」を追加(ついか)します。
  • パート3では、問題(もんだい)をだすためのボタンを作成(さくせい)します。そして、こたえあわせができるようにして、計算(けいさん)ドリルを完成(かんせい)させます。

サンプルプロジェクト

下(した)にあるのは、計算(けいさん)ドリルのサンプルプロジェクトです。記事(きじ)をよみすすめる前(まえ)に、問題(もんだい)やこたえがどのように表示(ひょうじ)されるのかをみておいてください。

けいさんドリルのサンプルGIF
けいさんドリルのサンプルGIF

数字(すうじ)を用意(ようい)しよう

最初(さいしょ)に、問題(もんだい)につかう数字(すうじ)のスプライトをふたつ用意(ようい)します。

スプライトの名前(なまえ)を「ひとつめの数字(すうじ)」にして、コスチューム「1」〜「9」と「?」をつくりましょう。

ひとつめのすうじのコスチューム
ひとつめのすうじのコスチューム

数字(すうじ)の順番(じゅんばん)は、コスチュームの番号(ばんごう)と一致(いっち)するようにしてください。数字(すうじ)の「1」は「コスチューム1」、数字(すうじ)の「2」は「コスチューム2」という具合(ぐあい)です。 10番目のコスチューム「?」は、まだ数字(すうじ)がえらばれていないときに表示(ひょうじ)するためのコスチュームです。

ひとつめの数字(すうじ)のスプライトを右(みぎ)クリックで複製(ふくせい)して、ふたつめの数字(すうじ)をつくりましょう。

ふたつめのすうじのスプライト
ふたつめのすうじのスプライト

問題(もんだい)につかうふたつの数字(すうじ)を用意(ようい)できました。

さて、Scratch で計算(けいさん)をするときは、変数(へんすう)をつかいます。数字(すうじ)を変数(へんすう)に保存(ほぞん)できるようにするためです。ひとつめのすうじふたつめのすうじこたえ という変数(へんすう)をつくっておいてください。

へんすう「ひとつめのすうじ」「ふたつめのすうじ」「こたえ」
へんすう「ひとつめのすうじ」「ふたつめのすうじ」「こたえ」

演算子(えんざんし)とイコール

つづいて、演算子(えんざんし)とイコールのスプライトを用意(ようい)します。

演算子(えんざんし)とは、計算問題(けいさんもんだい)につかう「+」「−」「×」「÷」のことです。今回(こんかい)つくっていくのは、「たしざん」と「ひきざん」なので、「+」と「−」のコスチュームをつくってください。コスチュームには、それぞれわかりやすいように、「たす」「ひく」と名前(なまえ)をつけておきましょう。

えんざんしのコスチューム
えんざんしのコスチューム

イコール「=」のスプライトもつくってください。

イコールのスプライト
イコールのスプライト

ここまでで、問題(もんだい)につかうスプライトを用意(ようい)できました。

演算子(えんざんし)のスクリプト

ここからは、ブロックをくみあわせてスクリプトをつくっていきます。最初(さいしょ)に、演算子(えんざんし)のスクリプトです。

表示(ひょうじ)する位置(いち)をきめて、「+」「−」のどちらかを表示(ひょうじ)します。

えんざんしをランダムにひょうじする
えんざんしをランダムにひょうじする

ひとつめの数字(すうじ)のスクリプト

次(つぎ)は、ひとつめの数字(すうじ)のスクリプトです。いろいろな問題(もんだい)がでるように、数字(すうじ)をランダムに表示(ひょうじ)しましょう。

  1. 表示(ひょうじ)する位置(いち)をきめます。
  2. はじめのコスチュームは「?」です。
  3. 1〜9までの数字(すうじ)をランダムに表示(ひょうじ)します。
  4. 最後(さいご)に表示(ひょうじ)されたコスチュームの数字(すうじ)を、変数(へんすう) ひとつめのすうじ に保存(ほぞん)します。
ひとつめのすうじをランダムにひょうじする
ひとつめのすうじをランダムにひょうじする

ひとつめの数字(すうじ)を表示(ひょうじ)したら、今度(こんど)はふたつめの数字(すうじ)です。ふたつめの数字(すうじ)を表示(ひょうじ)するよう、メッセージで合図(あいず)をおくりましょう。

メッセージ「ふたつめをひょうじする」をおくる
メッセージ「ふたつめをひょうじする」をおくる

ふたつめの数字(すうじ)のスクリプト

ふたつめの数字(すうじ)もランダムに表示(ひょうじ)しましょう。

  1. 表示(ひょうじ)する位置(いち)と、コスチューム「?」を指定(してい)します。
  2. 表示(ひょうじ)するのは、ひとつめの数字(すうじ)からのメッセージをうけとったときです。
  3. 1〜9までの数字(すうじ)をランダムに表示(ひょうじ)します。
  4. 最後(さいご)に表示(ひょうじ)されたコスチュームの数字(すうじ)を、変数(へんすう) ふたつめのすうじ に保存(ほぞん)します。
ふたつめのすうじをランダムにひょうじする
ふたつめのすうじをランダムにひょうじする

緑(みどり)の旗(はた)をおすと、演算子(えんざんし)とひとつめの数字(すうじ)がランダムに表示(ひょうじ)され、つづけて、ふたつめの数字(すうじ)もランダムに表示(ひょうじ)されるようになりました。

「ひきざん」のこたえがマイナスにならないようにする

今回(こんかい)つくる計算(けいさん)ドリルでは、「ひきざん」のこたえがマイナスにならないようにします。そのために、ふたつめの数字(すうじ)のスクリプトにさらにブロックをつなげていきますよ。

こたえがマイナスになるのは、たとえば「4−7」のように、ひかれる数(かず)よりひく数(かず)のほうがおおきいときですね。これをふせぐために、ふたつめの数字(すうじ)を、ひとつめの数字(すうじ)とおなじ、または、それよりちいさくなるようにします。

例(れい):

  • 4−7 → NG ×
  • 4−4 → OK ◎
  • 4−1 → OK ◎

ふたつめの数字(すうじ)を表示(ひょうじ)したあとに、問題(もんだい)をチェックしましょう。

  1. もし、 ふたつめのすうじひとつめのすうじ よりおおきいなら
  2. さらにもし、演算子(えんざんし)が「−」なら
すうじとえんざんしのじょうけん
すうじとえんざんしのじょうけん

こたえがマイナスになる問題(もんだい)だった場合(ばあい)は、ふたつめの数字(すうじ)を表示(ひょうじ)しなおします。

  1. コスチュームを、1〜ひとつめの数字(すうじ)の間(あいだ)のどれかにします。
  2. コスチュームの数字(すうじ)を、変数(へんすう) ふたつめのすうじ に保存(ほぞん)します。
こたえがマイナスにならないよう、ふたつめのすうじをしていする
こたえがマイナスにならないよう、ふたつめのすうじをしていする

以上(いじょう)で、「たしざん」と「ひきざん」の問題(もんだい)を作成(さくせい)するスクリプトができました。

つづいては、計算(けいさん)です。ふたつめの数字(すうじ)が表示(ひょうじ)されたら、計算(けいさん)する合図(あいず)をメッセージでおくりましょう。このメッセージは、このあと、イコールのスプライトがうけとります。

メッセージ「けいさんする」をおくる
メッセージ「けいさんする」をおくる

イコールのスクリプト

計算(けいさん)するためのスクリプトは、イコールのスプライトにつくっていきます。演算子(えんざんし)におうじて、計算(けいさん)をしましょう。

  1. 表示(ひょうじ)する位置(いち)をきめます。
  2. 計算(けいさん)をはじめるのは、ふたつめの数字(すうじ)からのメッセージをうけとったときです。
  3. 演算子(えんざんし)が「+」なら、ふたつの数字(すうじ)をたした結果(けっか)を こたえ に保存(ほぞん)します。
  4. 演算子(えんざんし)が「−」なら、ひとつめの数字(すうじ)からふたつめの数字(すうじ)をひいた結果(けっか)を こたえ に保存(ほぞん)します。
けいさんけっかをへんすうにほぞんする
けいさんけっかをへんすうにほぞんする

うごきをたしかめよう

緑(みどり)の旗(はた)をおして、ここまでのうごきを確認(かくにん)してみましょう。問題(もんだい)が表示(ひょうじ)されたあと、変数(へんすう)こたえ に計算結果(けいさんけっか)がはいるようになりました。

へんすうにこたえがほぞんされる
へんすうにこたえがほぞんされる

計算(けいさん)できるようになったら、そのこたえをスプライトで表示(ひょうじ)します。こたえを表示(ひょうじ)する合図(あいず)をメッセージでおくりましょう。

メッセージ「こたえをだす」をおくる
メッセージ「こたえをだす」をおくる

こたえの数字(すうじ)を用意(ようい)しよう

ここからは、計算(けいさん)のこたえとなるスプライトとスクリプトをつくっていきます。

まずは、こたえの数字(すうじ)のスプライトを用意(ようい)しましょう。問題(もんだい)につかう数字(すうじ)のスプライトを右(みぎ)クリックで複製(ふくせい)して、スプライトの名前(なまえ)を「一の位(いちのくらい)」にかえます。

いちのくらいのスプライト
いちのくらいのスプライト

コスチューム10 は「?」になっているので、これを「0」にかえましょう。

コスチューム10を0にする
コスチューム10を0にする

つづけて、このスプライトを複製(ふくせい)して、スプライトの名前(なまえ)を「十の位(じゅうのくらい)」にかえます。

じゅうのくらいのスプライト
じゅうのくらいのスプライト

以上(いじょう)で、こたえの数字(すうじ)を用意(ようい)できました。

いちのくらいのスクリプト

スプライトを用意(ようい)できたら、スクリプトをつくっていきましょう。最初(さいしょ)に、こたえの一の位(いちのくらい)です。

  1. 表示(ひょうじ)する位置(いち)をきめて、計算(けいさん)する前(まえ)はみえないようにしておきます。
  2. こたえを表示(ひょうじ)するのは、イコールからのメッセージをうけとったときです。
  3. こたえ が一桁(ひとけた)なら、表示(ひょうじ)する位置(いち)を指定(してい)して、コスチュームを こたえ とおなじにします。
  4. こたえ が二桁(ふたけた)なら、表示(ひょうじ)する位置(いち)を右(みぎ)へずらして、コスチュームを こたえの 2 ばんめのもじ とおなじにします。
こたえのけたすうにおうじて、ひょうじするいちとコスチュームをきめる
こたえのけたすうにおうじて、ひょうじするいちとコスチュームをきめる

こたえが二桁(ふたけた)のときに表示(ひょうじ)する位置(いち)を右(みぎ)へずらすのは、十の位(じゅうのくらい)の数字(すうじ)を表示(ひょうじ)するスペースをつくるためです。

じゅうのくらいのスクリプト

次(つぎ)は、十の位(じゅうのくらい)のスクリプトです。こたえの桁数(けたすう)におうじて、表示(ひょうじ)するかどうかをきめましょう。

  1. 表示(ひょうじ)する位置(いち)をきめて、計算(けいさん)する前(まえ)はみえないようにしておきます。
  2. イコールからのメッセージをうけとったとき、 表示(ひょうじ)するかどうかを判断(はんだん)します。
  3. こたえ が一桁(ひとけた)なら、非表示(ひひょうじ)です。
  4. こたえ が二桁(ふたけた)なら、コスチュームを こたえの 1 ばんめのもじ とおなじにして、表示(ひょうじ)します。
こたえがふたけたのときだけひょうじする
こたえがふたけたのときだけひょうじする

スクリプト完成(かんせい)

以上(いじょう)で、計算(けいさん)ドリルのつくりかたパート1の解説(かいせつ)はおわりです。緑(みどり)の旗(はた)をおすたびに、「たしざん」または「ひきざん」の問題(もんだい)をだして、そのこたえを表示(ひょうじ)するスクリプトができました。

ひとつめのすうじのスクリプト
ひとつめのすうじのスクリプト
ふたつめのすうじのスクリプト
ふたつめのすうじのスクリプト
えんざんしのスクリプト
えんざんしのスクリプト
イコールのスクリプト
イコールのスクリプト
いちのくらいのスクリプト
いちのくらいのスクリプト
じゅうのくらいのスクリプト
じゅうのくらいのスクリプト

Scratch の Pyxofy ページへいって、実際(じっさい)に計算(けいさん)ドリルであそんでみてくださいね。Scratch けいさんドリル by Pyxofy

「きょうからはじめるスクラッチプログラミング入門」Pyxofy (著)

Pyxofy が Scratch の基本をまとめた電子書籍を出版しました。
Kindle・Apple Books からご購入ください。

詳細はこちら

まとめ

今回(こんかい)は、Scratch でつくる計算(けいさん)ドリルを紹介(しょうかい)し、そのパート1として以下(いか)のスクリプトをつくりました。

  • 「たしざん」または「ひきざん」の問題(もんだい)をランダムに作成(さくせい)する
  • こたえを表示(ひょうじ)する

今後(こんご)のパート2では、「かけざん」と「わりざん」を追加(ついか)します。パート3では、ボタンをおして問題(もんだい)をだしたり、こたえをみえないようにするなど工夫(くふう)して、計算(けいさん)ドリルを完成(かんせい)させます。おたのしみに!

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです!

SNS で Pyxofy とつながりましょう! LinkedInThreadsBlueskyMastodon X (Twitter) @pyxofyFacebook

関連記事

スクラッチプログラミング - さんすうゲームのつくりかた
「あなたのなまえはなんですか?ときいてまつ」ブロックをつかって、さんすうゲームをつくってみましょう!スプライトが出すもんだいに、あなたがこえたを入力(にゅうりょく)してあそぶプロジェクトです。
JavaScript - 神経衰弱ゲームの作り方 Part 1 - カードをシャッフルする
カードをめくって数字を揃える神経衰弱ゲームを作ります。今回の Part 1 では、カードを JavaScript で生成する方法と、配列で用意した数字をシャッフルする方法を紹介します。
CSS Art – How to Make a 3D Cube With CSS
Why settle for two dimensions when you can have three? Learn how to make a three-dimensional CSS cube and then rotate it into multiple angles.
CSS Animation – rotate3d() and 3D Cube Transforms
Make 3D cubes spin and rotate! Learn to use CSS rotate3d() function and @keyframes to create exciting animation in this step-by-step article.