事例181
情報Ⅰにむけて、個人的な「商業科のプログラミング」の振り返りと実践報告
川崎市立幸高校 天明大輔先生
検定試験の関係でVBAのマクロ言語を使用
商業科と情報科の兼任という私の特長を生かし、今回は商業科のプログラミングについて振り返りを行い、実践報告をさせていただきます。本校の商業科のプログラミングは、2年次に選択科目として3単位で授業を行っています。商業科目は検定試験との関連があり、検定試験でJavaとVBAのマクロ言語が採用されていることから、本校ではVBAのマクロ言語で実習等を行っています。
私なりに商業科のプログラミングを考えたときに、COBOLが土台の考え方をいまだに採用しているという点で、オブジェクト指向とは言い難いところが気になっていました。
生徒は「プログラミング」というと、ゲームやアプリ開発をイメージするのではないかと思いますが、GUI(Graphical User Interface)ではなくCUIでの作業、また出力結果も地味という点などから、生徒の期待に応えきれてないのではないかという不安もあります。そして、商業科のプログラミングが情報科では使えないのか? という疑問を抱えていました。
下図は商業科のプログラミング実習などで出題されがちな問題例です。入力データはCSVなどで用意されたファイルを読み込み、最終的にプログラムで処理をして結果を導き出すということを目指します。本校では約2か月で実習ができるよう到達したい内容になります。
商業科のプログラミング～年間の流れ
売上金額計算のためのプログラミングが目的ですが、まず生徒に理解してほしいのは明細行の表示で、まずはシンプルに商品コード、単価、数量の部分を読み込み、画面に表示することです。
その後、自分のプログラムの中で売上金額を計算し、ループを繰り返して総合計の金額を計算します。そして、最後に総合計額を出力するという点が重要です。合計と合わせて件数のカウントも行い、場合によっては平均金額等も算出したいところです。
そして、備考欄を使い、条件分岐if文で、例えば「数量15個以下の場合には△を付けましょう」という形でifの考え方も習得します。最終的には配列の考え方から、線形探索等がプログラムとして実行できるようになる、というのが、商業科で学習するプログラミングの1年間の流れになります。
生徒が躓きやすい点
今までこういった形で授業をしてきましたが、その中で、生徒が躓きやすい点がわかってきました。
一つ目は、初期値の設定についてです。これはCOBOLの考え方の延長ということもあり、流れ図の設問に「売上の合計」や「件数のカウント」といった変数には、初期値としてゼロを入れなければいけないというものが出てきます。またその後の単元では最小値の算出の際に、999を初期値として設定する必要がありますが、何に0で、何には999なのかが混乱してなかなか理解できない、そして最後まで初期値設定の意味がわからないままの生徒がおります。
二つ目に、入力データから処理結果を導き出せない、というところです。単価と数量を掛ければ売上金額になるという辺りは問題ありませんが、処理が複雑になってくると、どうしてこの入力データから、どのような処理を行えばこのような結果が導き出せるのか、というイメージが作れない生徒も出てきます。
三つ目は、比較演算子が使いこなせない点です。例えば、先ほども出ましたが数量が15個以下のときは備考欄に△を表示するという場合に、15個以下の小なりイコール(≦)、こちらの記号が導き出せないという生徒も本校では一定数いるのです。
四つ目は、添え字と配列の対応についてです。添え字、配列の考え方自体は理解できるのですが、配列を操作するにあたって、添え字をどのように活用していけばうまく処理結果が導き出せるのかというところが、なかなか理解しきれないようでした。
この辺りの問題が生じるのは毎年のことなので、私も対応をとらなければいけないと思っていました。今年度は、理解できる生徒にはどんどん実習をしてもらい、普通のクラスの生徒には説明と実習のバランスを取るコースを作りました。そして、ゆっくりのコースでは実習の時間を少し削り、説明を手厚くして理解を深めてもらうという形で進めました。
最終的には、やはりどうしても理解ができないという生徒10名程度をもう一度編成して、手取り足取りでようやく多くの生徒が設問を解けるようになってきた、という手応えが出てきています。いっぽう理解できているコースの生徒たちは、自主的に取り組んでくれるので、私は机間巡視をしながらピンポイントでその生徒の質問に答えられる、というのがとても有効であったと考えています。
商業科のプログラミングでの要点
商業科のプログラミングで身につける、ループ、カウント、条件分岐、配列という基本的なプログラムの考え方を、教科「情報」で普通科の生徒たちが学習するために、今回はProcessingをJavaScriptに移植したp5.js(※1)を使って実践を行いました。
(※1)https://p5js.org/
p5.jsのポイントは、必要な部分のソースコードを理解して使えるようになれば、そのプログラム全体の意味がわからなくても、取りあえずの結果が得られるというところです。
とにかく導入が簡単で、生徒のモチベーションを維持したまま授業が進行できるという点は、大きかったと思います。
また、命令も行単位でわかりやすく、その点も生徒にとってはよかったのではないかと思いました。
実際に、このような画面で生徒に指示を出します。簡単な図形を作ろうという課題も、生徒が興味を持って最後まで取り組めた一つの理由だったのではないかと思います。
描画に関しては、この真ん中の1行「rect(120,100,60,140)」さえソースコードの中に入力できれば、すぐに四角の図形が出てくるという点で、非常にとりかかりやすいといえます。
ループについても、こちらのソースコードの真ん中から少し上にある「function draw()」という段落で「1秒間に60回自動でループしているんだよ」と触れることができ、コンピュータは繰り返しが得意なのだ、ということも伝えます。
また、カウントについては、x軸の値を変数に置き換えてその変数をインクリメントで増やせばx軸の位置が移動することになり、その結果図形が移動するアニメーションになることがわかります。こちらも生徒は「図形が動くこと」で一段と興味を持ってくれました。
最終的には条件分岐を使って、x軸の座標が0から500まで移動したら、今度は500からカウントを減らしていくことでデクリメントになり、図形が左右に往復運動を繰り返すことになります。この辺りまでは、3、4時間で理解できるのではないかという感触があります。
有効だったp5.jsの実習
商業科でこの段階まで授業を進めるには1か月以上かかりますが、シンプルに授業を進められるという点では、p5.jsの実習は有効だったと思います。そして「自分のイメージした図形の組み合わせがどうすれば実現するのか」に脳みそを使い、自分の意図がコンピュータにきちんと反映されることは大きな喜びと苦手意識の克服につながります。その一方で、流れ図やソースコードの穴埋めという形の設問であれば生徒の評価も定量的に行うことができますが、こういった作品の提出となると、なかなか定量的な評価を行うのは難しい、ということをあらためて思いました。
評価という点で考えると、商業科のプログラミングは検定試験を含め実績があるところでもありますが、情報科としてはそこまでの時間を割くことはできず、今後、プログラミングの指導をどのように行っていけばよりよいのかということは、みなさまからアドバイスをいただきながら考えていきたいと思っています。
神奈川県高等学校教科研究会情報部会 情報科実践事例報告会2020オンライン 実践事例報告