わさっきhb

大学(教育研究)とか ,親馬鹿とか,和歌山とか,とか,とか.

一部を隠すことができる九九の表

 動作を説明します(以下は静止画像です).初期状態は,九九の表です.

f:id:takehikom:20190816064013p:plain

 表の下の「□×□」のところには,数を入力できます.左の□をクリックし,日本語入力をオフにしてから,「3」を打ってみます.
 すると,九九の3の段以外の答えが,灰色になりました.

f:id:takehikom:20190816064029p:plain

 このときカーソルは,右の□に移動しています.そのまま「4」を打ってみます.

f:id:takehikom:20190816064039p:plain

 「3×4」の答えは12,なのが一目でわかります.
 なおこの時点で,「リセット」ボタンにフォーカスが移っていまして,Enterキーを押せば(もちろんマウスでリセットボタンを押すのでも),2つの□に書いた値が消え,九九の表の灰色がなくなります.
 左の□は空欄にし,右の□だけに値を入れることも可能です.以下のとおり,該当する(かける数の)列以外が灰色になってくれます.

f:id:takehikom:20190816064050p:plain

 このアプリケーションをつくるきっかけとなったのは,『小学校学習指導要領(平成29年告示)解説算数』の第3学年,除法のところです.

 例えば,12個のものを3個ずつ分けて,分けられた回数を求める場合(包含除)は,分けられた回数を□とすると,3×□=12の□を求めることと同じである。また,12個のものを3人で分けて,一人分の数を求める場合(等分除)は,一人分の数を□とすると,□×3=12の□を求めることと同じである。先に述べたように,等分除の操作は包含除の操作としてもみることができるので,どちらの場合も,12÷3の計算が3の段の乗法九九を用いて能率的に求めることができる。このようなことを考えることができるようにすることがねらいとなる。

 このうち「12÷3の計算が3の段の乗法九九を用いて能率的に求めることができる」を視覚化してみようと思ったのでした.九九の表全体から,わる数の3の段をクローズアップできれば,いいのですが,該当行だけを大写しするのは,ちょっと容易ではありません.そこで表の配置は初期状態から変えず,指定した数以外の行を,灰色にすることを,試みたのでした.
 上記の「能率的」は,「累減(12-3=9,9-3=6,6-3=3,3-3=0)」や「乗数固定(1×3≠12,2×3≠12,3×3≠12,4×3=12)」と比較して,より少ない手間で商が求められる*1ことと,将来的にあまりのあるわり算にも,適用できる*2ことを含んでいます.
 プログラムの内部構造について,少し,書いておくと,HTMLのところに九九の表は記述しておらず,JavaScriptのsetupTable関数を呼び出すことで生成しています.
 灰色指定の仕組みですが,表生成時に,81個の積それぞれに異なる(スタイルシート指定のための)classを設定しています.3×4のセルの場合,「<td class="mnd3 mer4">12</th>」としており,「mnd3」と「mer4」がクラス名となります*3.□の左に「3」が入力されたら,mnd1からmnd9までのうち,mnd3以外のクラスのセルを灰色にしています.入力値は,「1」から「9」までのいずれかのみ有効,そうでない場合(空欄,2文字以上,また「1」などの非ASCII文字も)には無効扱いとしています.列指定も考慮して,セルの塗りつぶし色をどちらにするかは,関数mask内の変数dispに格納しています.
 表全体とセルの幅は,スタイルシートで固定値にしています.具体的には370pxと36pxです.列の数は表側を含めて10列なので,セルの幅が36pxなら表はその10倍(360px),としてみると,かける数が1の列のセル幅について,列の値がいずれも1桁ということもあり,他よりも小さくなってしまうのでした.
 積の表示については,「12」だけでなく,「3×4=12」や「三四12」のように変えられればと思いつつ,表の幅が大きくなってしまうため,今回取り入れられませんでした.

*1:『小学校学習指導要領(平成29年告示)解説算数』や,教科書では,被乗数固定,より正確に言うと,除数の九九の段を用いています.12÷4=□または□×3=12を満たす□は,「さんいちが3,さんにが6,さざんが9,さんし12!」で求められます.参照する九九の段が1つだけであるため,「いちさんが3,にさんが6,さざんが9,しさん12!」と,乗数固定で九九の段を切り替えていく手続きよりも,効率的と言えます.

*2:「12÷4の答えは,九九の表から見つかるじゃないか」という考え方に対しては,「27÷7」を,3の段を用いて求めるわけにいかないとなります.関連:https://takehikom.hateblo.jp/entry/2019/07/18/062308

*3:「multiplicandが3」「multiplierが4」という意味です.変数名も,「nd」を含むものはかけられる数,「er」を含むものはかける数に関するものとなっています.