「滝」「線香花火」のアニメーションをIchigoJamBASICでつくろう

前原小学校前校長の松田孝氏が、前回納得しそして確信に至った小学校プログラミング教育の目標について話しました。今回はその目標に向かう、最初の一歩となるサイバー空間におけるテキストプログラミングの導入について、その実践を紹介します。

サイバー空間のプログラミング導入はアニメーションづくりから

プログラミングに限らず、「学び」の動機は「おもしろい!」「やってみたい!」「どうして?」というような興味・関心、疑問を抱くことにあると考えます。

より多くの子どもたちに、そんな意欲を沸き立たせるにはどうしたら良いかを考え続けて、思い至ったのがアニメーションです。動きは注意をひきますし、おもしろくなって自分でも再現したくなります。そしてIchigoJamBASICの静的なプログラムをRUN実行すれば、それが動きとして表現できることのギャップが、プログラムに関心をもたせることになってそのコマンドの意味とフローを考えるようになります。

それがアニメーションによるサイバー空間のプログラミング導入につながっていきました。

アニメーション1ー滝

上記は、筆者が前原小学校の校長職時代に、子どもたちとサイバー空間でのプログラミングを実施したときに示した最初のアニメーションプログラムです。たった5行のプログラムですが、RUN実行したときの子どもたちの反応を見て、「いける」と直感しましたことは前回も紹介しました。

10 CLS
20 PRINT”@”
30 PRINT”@@”
40 PRINT”@@@”
50 GOTO20

ここで紹介するIchigoJamBASICのプログラミングは、開発者の福野泰介氏のWebサイトでシミュレーションできますので、ぜひお試しください。

RUN実行すると、モニターに表示された”@”が画面下に流れていくように見えることから、このアニメーションプログラムを「滝」とでも名付けようと思います。皆さんだったら、このプログラムにどのようなタイトルをつけるでしょうか。ぜひ、お子さんと一緒に考えてみてください。

アニメーションプログラムのタイトルを考える、ということは「見立て」るということです。「見立て」は、「あるものを他のものになぞらえる」「似たもので表現する」ことです。

「見立て」ることで、子どもたちはイメージを膨らませます。単に記号 ” @ ” の表示であるアニメーションにタイトルを考えることは、子どもたちのクリエイティビティを刺激するきっかけとなります。

IchigoJamBASICのプログラム表示は、その画面がモノクロであるがゆえに子どもたちの創造力や発想力を活性化するとともに、「見立て」ようとするモノを観る力を育みます。

アニメーション2ー線香花火

「おもしろい」「やてみたい」「表現してみたい」という動機と意欲こそが、IchigoJamBASICのコーディングの知識と技能を子どもたちに習得させていきます。

以下のプログラムを示して、それがどんなアニメーションとなるのかを考えさせます。「CLS」「PRINT」「GOTO」のコマンドは最初の「滝」のプログラムで学びました。「LOCATE」「X=(変数)」「:(コロン)」「WAIT」は初出ですので、想像がつきません。

10 CLS
20 LOCATE16,12:PRINT”@”
30 X=RND(31):Y=RND(23)
40 LOCATEX,Y
50 PRINT”*”:WAIT5
60 LOCATEX,Y
70 PRINT” “:WAIT5
80 GOTO30

RUN実行してみます。真ん中に「@」が表示され、「*」が画面のあちらこちらに点滅表示されます。

ESCキーを押してアニメーションを止め、「LIST」でプログラムを表示して行番号ごとにコマンドとそのプログラムの「意味」を説明し、確認していきます。

行番号20 のプログラムは、「LOCATE」で位置(座標)を指定して、「:(コロン)」でつながったプログラム「PRINT ” @ ” 」を実行します。IchigoJamは左上をX、Y座標ともに0として、X座標(横軸)が0〜31 、Y座標(縦軸)が0〜23 となっていますから、画面のほぼ真ん中に “ @ “ が表示されることを説明します。

次に、行番号30のプログラムの「X=RND(31)」を説明します。これはXという変数(数字や文字を入れることができる箱を用意してその箱にXという名前をつける)を指定して、そこにRND(31)(31より小さい任意の数字)を代入する(=)というプログラムであることを話します。

変数は、プログラミングにおいて極めて大切な考え方ですので、この導入段階でしっかりと子どもたちに習得させたいコマンドです。筆者は現行小学校学習指導要領におけるプログラミング体験の最も大きな課題の一つに、この変数を扱う場面がないことを常々指摘しています。

そしてこの変数プログラムの良いところは、「=」コマンドを違和感をもたずにすんなりと理解できることにあります。「X=RND(31)」は、31より小さい任意の数字をXという箱に代入するということが実感できれば、今後「X=X+1」というプログラムが出てきたときに頭を悩まさずに済むからです。

「=」は等号で、左辺と右辺が等しいという算数の概念で頭が固定されていれば、「X=X+1」のプログラムは理解できません。筆者は、このことで1週間頭を悩ませた経験があることを正直に告白します。このアニメーションプログラムで、子どもたちは「=」コマンドが「代入する」という意味であることを理解できるのです。

行番号40のプログラムは、行番号30で任意に指定された変数XとYの値をもって座標を決めます。そして定められた座標に行番号50 のプログラムで、” * “ を0.0833…秒表示します。さらに行番号60、70で表示した “ * “ を0.0833…秒消すのです。(WAIT60=1秒ですから、WAIT5=5/60秒=0.833…秒となります)

行番号80でこのプログラムを行番号30に戻って、繰り返し実行するアニメーションプログラムを筆者は、「線香花火」に見立てました。

線香花火をよく見る

しかしこのプログラムでは、線香花火の火花が飛び散る範囲が広すぎるように感じました。ですからその範囲を狭め、もう少し中心に近いところで “ * “ を点滅表示させたいと思ったのです。それが下の図に示した範囲です。

さて先に紹介した「線香花火」に「見立て」たプログラムをどのように修正すればいいのでしょうか。お子さんと一緒に考えてみてください。ヒントは行番号30のプログラムの修正です。

30 X=RND(31):Y=RND(23)

30 X=◯+RND(◯):Y=◯+RND(◯)

◯にどんな数字を入れれば、思い描いたアニメーションを表示できるでしょうか。ぜひ、試行錯誤を楽しんでいただきたいと思います。

「思ったこと」「考えたこと」「やってみたいこと」などの表現したいことを、情報の動きとして考え、それをプログラムする思考、技術、そして態度こそがこれからの新しい社会であるSociety5.0を生きる子どもたちが培うべき必須の資質・能力であり、コンピュータサイエンスの「学び」そのものであると考えています。