プログラミング教育を通じて子どもたちの「作りたい」を伸ばす

2019年1月28日、福岡市早良区の西南学院小学校でビジュアルプログラミングアプリ「Springin'（スプリンギン）」を使ったプログラミング授業を実施した。参加したのは正課クラブ活動で「ITクラブ」に所属する4～6年生の19名。普段からScratchを用いたプログラミングに取り組む子どもたちにSpringin'はどのように映ったのか。授業の流れに沿って紹介する。

Springin'を使った授業の様子

絵を描き、その性質と関係性を考えるSpringin'でのビジュアルプログラミング

Springin'はiOS向けのビジュアルプログラミングアプリで、AppStoreから無料でダウンロードできる。課金が必要な追加機能などもないので、iOS端末を持っている方であれば誰でも簡単にスタートすることができる。

ビジュアルプログラミングに分類されるプログラミング教育教材は数多く存在するが、Springin'は自分で描いた絵（アイテム）にどのような性質をもたせるかを考え、そのアイテム同士の関係性を定義することでデジタル作品（ワーク）を制作する点が特徴だ。すべての操作はタッチ操作で完結し、重力や衝突などの物理演算も最初から組み込まれているから、子どもたちは「作りたいものを実現するにはどうすればいいか」を考えながら試行錯誤することに集中できる。ユーザーが自身のワークをアップロードしたり、他のユーザーのワークをダウンロードして遊んだり、分析することができるマーケット機能も2018年7月に追加された。まだ触ったことのない読者にはぜひ一度触れてみてほしい。最初はアプリ内のチュートリアルに沿って「コロコロゲーム」を作ってみるところからスタートすることをおすすめしたい。

Springin'を使ったプログラミング授業の3ステップ

Springin'を使ったプログラミング授業はこれまでに学校や公共施設、イベントなどで何度も開催されてきた。対象者や会場の規模などによって多少のアレンジはあるものの、授業やワークショップは下記の3ステップで進む。

STEP3：プレゼンテーション、講評

自分が作った作品を全参加者の前でプレゼンし、講師は適宜講評やコメントをする。プレゼンした作品はアプリ内クラウドにアップロードし、QRコードを読み込めば、自宅のiOSデバイスに持ち帰ることができる。家で続きを作ることも可能。

今回の西南学院小学校の授業も基本的に上記のステップに準じた。ただし実施時間は50分と、通常のワークショップより短い時間での実施となったため、自由制作時間はチュートリアルで作ったサンプルを自分なりにアレンジする時間とした。これは正課クラブ活動の時間内で完結させるという制限があったためだ。

普段のワークショップでは一緒に作るサンプルゲームとして「コロコロゲーム」を題材にすることが多いが、今回は普段からプログラミングに触れている子どもたちが受講者であることを踏まえ、難易度を少しあげた「豆まきゲーム」を題材とした。

豆まきゲームはこのようなゲームだ。

・鬼が動きながら出現する
・枡にはいった豆まき豆を鬼に向かってスワイプ操作で投げる
・鬼に豆が当てるとクリア画面を表示する

サンプルの豆まきゲームはこちらからダウンロードして動かしてみることができる。

自分が描いた絵をプログラミング教育に使うメリット

豆まきゲームは簡単なゲームだが、このゲームを「実現」するには、その要素を細かく分解し、その一つ一つをプログラミングして実現する必要がある。

・鬼や枡、豆の素材を作る
・プレイ画面とクリア画面の2つの画面を準備する
・鬼や枡、豆を画面上に配置する
・鬼を動かす
・豆を投げる
・鬼と豆の当たり判定
・鬼と豆が当たったときの画面遷移

Springin'でのプログラミングは、まずアプリ内蔵のお絵かきツールを使ってオリジナルのキャラクターやボタンなどのアイテムを描くところからスタートする。これは現代のものづくりに不可欠な「キャラクターやユーザーインターフェース（UI）をどう作るか」ということを考えるプロセスそのもので、このプロセスをプログラミング教育に取り入れることができるのがSpringin’の大きなアドバンテージと感じている。さらに自分でキャラクターを考える過程は「自分はこうしたい」というアイデアが生まれるきっかけとなる。自由制作時間があることは子どもたちに事前に伝えているため、頭の中で構想を膨らませながら基本操作を覚えることができる。そしてなんといっても「自分の描いた絵が動く」というのは子どもにとって非常に面白い体験であるし、取り組む姿勢や集中度にポジティブな影響を与える。

自分でキャラクターやボタンなどのアイテムを描く

アイテムを作成した後は、そのアイテムに「ピン」（アイテムを固定する）「接触」（当たり判定）「移動」（アイテムを動かす）「シーンチェンジ」（画面遷移）などの属性を当てはめ、ゲームとしての機能を実現していく。この作業を通じて論理的思考やプログラミング的思考を育てることができる。

今回は豆まきゲームを講師と一緒に作るチュートリアルに20分を割り当て、予定どおりに完了した

試行錯誤のプロセスを取り入れる

チュートリアルが終わると、自由制作時間に入る。今回はチュートリアルで制作した豆まきゲームをベースとして、その上に子どもたちがそれぞれが自由にアレンジを行う時間とした。

自由時間に入る段階で、子どもたちのSpringin'には講師と一緒に作った豆まきゲームがある。豆まきゲームの動くしくみは全員共通だが、キャラクターの絵や画面のデザインなどにはすでに子どもたちのオリジナリティが発揮されている。もくもくと没頭したり、隣の参加者と話したりなど、進め方は子どもたちそれぞれだが、思い思いのアレンジがiPadのなかに組み立てられていった。

Springin'にはチュートリアルで紹介した以外にも多くの「属性」が存在する。それらの属性は機能をわかりやすく示すピクトグラムによって表されているため、子どもたち自身で試行錯誤しながら作品作りを進めることができる。また、今回の授業ではA4サイズ1枚の「属性ガイド」も用意し、プログラミング中にそれを参照できるようにした。これによって、「ドキュメントを参照しながらプログラムを設計する」というプログラミング学習のプロセスを体験させるとともに、講師やサポートスタッフへの質問を最小限にすることにもつながっている。

今回のワークショップでは自由制作時間に20分を割り当てた

子どもたちの作品から見えるプログラミング的思考のエッセンス

自由制作時間のあとは参加者自身が自分の作品を紹介する発表時間とした。今回は残り時間（10分）の関係で4人の作品紹介となった。子どもたちのプログラミングの過程を観察すると、今回のワークショップでは大きく4つのアレンジの傾向が見られた。

一番多かった工夫は豆を増やすもの。単純なように思えるが、豆を増やすには2つのアプローチが存在する。1つは新たに豆を増やして、そのそれぞれに鬼との関係性（豆が鬼に当たるとイベントが起きる）を一つ一つ設定すること。そしてもう1つは鬼との関係性を設定した豆をコピーして増やすこと。どちらの方法でも同じ機能が実現できるが、後者のアプローチのほうが圧倒的に楽に実現することができる。また、このアプローチはプログラミング的思考の基本的なエッセンスである「オブジェクト指向」につながっている。

豆を増やした作品の例

次に多かったのは鬼を増やすもの。単純に鬼をコピーすれば済むように思えるが、これではシューティングゲーム的には物足りない。例えば鬼をコピーして4匹に増やしても、そのままコピーしただけでは鬼を1匹退治しただけでクリア画面が表示されてしまう。ゲームとしては「4匹全部を倒したらクリア画面を表示する」としたい。このためには当たり判定だけでなく、4匹の鬼それぞれの状況を把握し、4匹全部が退治されたときにクリア画面を出すという工夫が必要だ。Springin'では「フラグ」を用いてこれを実現できる。

鬼を増やした作品の例

鬼の動き方を調整したものも多かった。これによって難易度を調整し、ゲーム性を高めることができる。鬼を増やして、それぞれ別の動かし方を設定することも可能だ。また鬼を守るお邪魔キャラを増やす工夫も多かった。

Springin’では指で軌跡を描くことでアイテムを動かすことができる

どんなゲームなのかの説明を入れたり、クリア画面に「戻る」ボタンを配置したりするなど、UIの整備に力を入れる子どもも多かった。これは「自分以外の誰かにこのゲームをやってほしい」という気持ちが現れているものだろう。

UIを工夫した例

Springin’でのプログラミングを通じて伝えたい「作りたいものは学べば作れる」

授業が終わったあとに参加者の子どもたちから感想を聞くことができた。冒頭で述べたとおり、西南学院小学校のITクラブでは普段からScratchなどを用いてプログラミングに触れる機会を設けている。そのような子どもたちにとってSpringin'でのプログラミング経験は新鮮に映ったようだ。「ブロックを組み合わせて決められたものを作り続けるより、Springin'で作りたいものを作ったほうが楽しい」という意見も多かった。Scratchに慣れた高学年の子どもには「Scratchと違う」という戸惑いが当初あったようだが、作り続ける中で十分理解でき、最初に構想したものを作り上げられたようだ。

この「作りたいものを作れた」という経験は、プログラミング教育に限らず、技能を身につける上で重要なこと。なぜなら「自分が本当に作りたいもの」なんて人生でいつ出会えるかわからないからだ。

避けたいのは「自分が本当に作りたいもの」に出会ったときに「それは無理だ」と感じてしまうこと。そう感じてしまった瞬間にクリエイティビティはしぼんでしまう。そうではなく「あぁ、それなら学べば作れるな」と思えると前に進むことができる。プログラミング教育は情報技術を活用した問題解決を通じて、「作りたいものは学べば作れる」という自信をつけることが目的であるはずだ。

私たちはプログラミング教育を通して⼦どもたちの「作れる！」という⾃信を伸ばしたいと考えており、Springin'はそのためのビジュアルプログラミングアプリを⽬指して開発を続けている。

すでにScratchなどのプログラミング教育ツールを使って学んでいる⼦どもたちはもちろん、はじめてのプログラミング教育ツールとしてもSpringin'を使うことができる。チュートリアル動画やマニュアルもウェブサイトに準備しており、指導者や先⽣からの声に応えたSpringin'を⽤いたプログラミング教育カリキュラムも整備している。また実際のプログラミング⾔語への橋渡しとして、Springin'上でRubyを動かすことができるバージョンの開発も進めている。ぜひ使ってみてほしい。