CON T E N T S

Vol.123【コラム】プログラミングの面白さを伝えるには…松浦 敏雄【解説】未就学児を対象にしたプログラミング教育─ビスケット（Viscuit）を使った幼稚園の取り組み─…渡辺 勇士【解説】ジェンダーインクルーシブなプログラミング教材の開発─視覚化を通してデータを感じるプログラミング─…吉田 智子・有賀 妙子・真下 武久

COLUMN

基 応
専 般

プログラミングの面白さを伝えるには初等中等教育でのプログラミング教育に注目が集まっています．以下では，主として高校でのプログラミング教育を想定して，プログラミングの面白さを伝えるにはどうしたらよいかについてお話しします．プログラミング教育の目的
は，プログラミングの面白さ・難しさ（思い通りに動かないなど）を体験することを通して，コンピュータの本質に近づくことと考えています．具体的な目標は，自ら簡単なプログラムを組めるようになることです．この目的を少ない授業時間（50 分×10 回程度を想定）で達成するための具体的な方法を提案します．
（1）学習内容を絞る：プログラミング言語の良し悪しはここでは触れません．どの言語であっても，とにかく学習項目を絞ることが重要です．条件分岐と繰り返しさえあれば，（プログラムで書けるなら）どんなプログラムも書けます．
この 2 つの制御構造に変数の使い方を合わせたものが最小限の学習項目でしょう．これに加えて乱数や図形描画などを導入すると生徒のモチベーションを高めるのに役立ちます．授業時間が 50 分×10 回程度なら，これ以上，学習項
目を増やしてはいけません．
（2）授業の方法：例題の説明と，それを応用した演習問題をセットにして，これを繰り返します．多くの演習問題に取り組む方がよいですが，時間がない状況では無理をせず，考える時間を与えることが大切です．早くできた生徒のために，発展課題を用意しておくとよいでしょう．デバッグの難しさを経験することも大切です．これを乗り越えてプ
ログラムが思い通り動いたとき誰もが感動します．この体験を繰り返して面白さを感じてもらうことが大切です．
（3）サポート体制：演習中は適切な助言が必須です．ティーチングアシスタントなどのサポート体制が重要ですが，現
実には担当教員が頑張るしかないかもしれません．
1），3）
10 数年の私たちの経験では，70 〜 80% の学生がプログラミングは面白いと感じてくれています ．今も文献 2）のような授業資料を用いた授業で同様の結果が得られています．授業時間がもっと使える場合は，データ構造やファイ
ル IO などを扱うことになりますが，適切な例題と練習問題を用意して，十分に時間をかけることが大切です．学習項
目を増やすと，学生のモチベーションを維持するのが難しくなります．この点は私たちも四苦八苦しているのが現状です．今後，この状況の改善方法を見出したいと考えています．
参考文献
1） 西田知博 他：初学者用プログラミング学習環境 PEN の実装と評価，情報処理学会論文誌，Vol.48, No.8, pp.2736-2747 (2007).
2） 松浦敏雄：プログラミング基礎（DNCL）授業資料，http://wpen.asl2.net/pp/（2021/08/13 確認）．
3） 松浦敏雄：プログラミング基礎（Python）授業資料，http://wpen.asl2.net/python/（2021/08/13 確認）（Google Colaboratory への登録が必要）．

松浦敏雄（大和大学理工学部）（正会員）

1979 年大阪大学基礎工学部情報工学科助手，1992 年同大学情報処理教育センター助教授，1995 年大阪市立大学学術情報総合センター教授，
2020 年大和大学理工学部教授．大阪市立大学名誉教授．本会フェロー．

ぺた語義は pedagogy（教育学）を元にした造語です．常設の教育コーナーとして教育や人材育成に関する記事を広く掲載しています．
ぺた語義に掲載された記事は，情報処理学会 Web ページの「教育・人材育成」からどなたでもご覧いただけます .

情報処理 Vol.62 No.12 Dec. 2021

661

基 応
専 般

ARTICLE

未就学児を対象にしたプログラミング教育
─ビスケット（Viscuit）を使った幼稚園の取り組み─渡辺勇士

合同会社デジタルポケット／電気通信大学☆2ケット（Viscuit） 用いたプログラミング教室が行わ

未就学児とプログラミング教育

れている．2015 年は有志の園児だけを対象にしたが，情報技術の急速な発展により，ほんの 10 数年前

2016 年からは年長児の定期的なカリキュラムとしてまではガラケーが主流だった携帯電話が，今やス

取入れ，2017 年からは年少児，年中児も不定期にビマートフォンに置き換わり，誰しも複数のアプリを

スケットを使った活動を行っている．

日常的に利用している．また，モノとインターネッ

ビスケットは文字も数字も使わず，絵の配置によっトが繋がる IoT も，IoT 家電の普及により，もはやてプログラムを作成することが可能である．図 -1 はめずらしいものではなくなってきている．2020 年

ビスケットのインタフェースを示している．プログ

度から小学校におけるプログラミング教育が必修化

ラムは以下のように作成する．まず①右端（部品置きされた背景には，子どもがそれらの機器がプログラ場）にある絵をドラッグすると，自動的にコピーされムで動いていることを知り，そして，自分自身でプた絵が生成されるので，それをステージ（左半分のエログラミングをして動かす体験をすることの重要性

リア）に置く．そして②メガネと呼ばれるツールをメもあげられる．また，民間の学習塾や，幼稚園，保ガネ置き場（グレーのエリア）に置く．③そのメガネの育園の現場では未就学児を対象にしたプログラミン

左右の丸それぞれにも絵を配置する．そうすると ③

グ教育を行っている場所も出始めている．本稿では，で配置した左右の絵の座標の差分に基づいて，④の実際にプログラミング教育が行われている幼稚園のようにステージの絵が動く．文字や数字を使わない事例を挙げ，筆者の記した「未就学児を対象にしたプ
1）を基に，未就学
ログラミング教育 についての研究」☆2

  ビスケット viscuit | コンピュータは粘土だ！！，
https://www.viscuit.com/（参照 2021-8-30）．

児とプログラミング教育について解説する．

香川富士見丘幼稚園の事例
ビジュア ル プ ログラミング 言 語ビ ス ケット（Viscuit）の利用☆1

神奈川県茅ヶ崎市にある香川富士見丘幼稚園

では 2015 年からビジュアルプログラミング言語ビス☆1

茅ヶ崎市 香川富士見丘幼稚園 Web サイト，
https://kagawa-fujimigaokayochien.rexw.jp/（参照 2021-8-30）．

図 -1

ビスケットのプログラミングの例-【解説】未就学児を対象にしたプログラミング教育─ビスケット（Viscuit）を使った幼稚園の取り組み─ -662

情報処理 Vol.62 No.12 Dec. 2021

ので，未就学児でもプログラムを作ることができる．

レッスンでは先生がやらせるのではなく，園児自身がやりたくなるような絵を用意している．たとえ年長児のレッスン

ば，図 -2 の（1）に示した絵をまっすぐ動かすプログラ

年長児では 1 回 40 分前後のレッスンを年 13 回

ミング課題の場合は，図 -3 左のように絵の動きの方（月に 2 回程度）実施している．レッスンでは段階的向がはっきり分かる絵を用意したり，図 -2 の（3）に示にプログラミングのテクニックを学ぶ．最初に絵をすような「絵の変化が繰り返し続く」プログラミング

まっすぐ動かすプログラミングを習得する．

課題の場合は，図 -3 右のように時間経過に伴う変化

図 -2 の（1）に示すように，メガネの左右に 1 つずを内包しているような絵を用意したりする．そうす

つ絵を入れることで，絵の座標の差分に基づき，ス

ると，園児は何も指示をされなくても，その絵が内テージ上の絵を動かすことができる．次に図 -2 の（2）包している変化を画面上でプログラムしたくなる．

に示すように，まっすぐ動くメガネを複数使い，ラレッスンは前半が練習パート，後半が自由制作

ンダムに絵を動かすプログラミングを学ぶ．たとえ

パートと分けられており，各 20 分ほどである．前ば，「上に動く」メガネと「下に動く」メガネがある場

半の練習パートでは先生が用意した上述の絵を使っ合，ステージ上の絵は上にいったり，下にいったりて，プログラムを作る．その上で後半では自分で絵する．ビスケットではメガネの命令は，メガネが置を描いて，その練習を踏まえたプログラムを自由制

かれた順序に関係なく実行される．そして，図 -2 の作する．これらのレッスンの内容は，香川富士見丘（3）に示すような絵の変化が繰り返し続くプログラ

幼稚園と筆者の所属する合同会社デジタルポケット

ミングを学ぶ．図 -2 の
（1）
，
（2）
ではメガネの両方にと一緒に，
2015 年から 2016 年に開発したものをベー

同じ絵を入れていたが，違う絵を入れると，左の任スにしている．それ以降は，毎年少しずつ幼稚園の意の絵 A から右の任意の絵 B に変化する，という命

独自の改良を加えて，レッスンを行っている．

令になる．つまり，図 -2 の（3）
メガネは「閉じた口のプログラミングレッスンを行う教室は，園児が普段絵は開いた口の絵になる」，「開いた口の絵は閉じた

使用する教室とは別に用意されている．そこには 1 ク

口の絵になる」
命令を表す．これで口が「パクパク」
すラス 1 人 1 台のタブレットと通信環境が用意されている動きを作成できる．最後に図 -2 の（4）ように，絵る．レッスンの実施方法についてはワークショップのを傾けて回転させる，というプログラミングを学ぶ．

ノウハウが活かされている ．たとえば，レッスン「角度の違う傾いた絵に変化する」という命令は回転実施の際は，園児はタブレットが自分の前にあるとの動きになる．

集中できないので，必ず園児をタブレットから離し，

2）

先生の前に集まってもらうようにする（図 -4 左）．この教授法によって，タブレットが目の前にあると集中できない園児を，先生の話を聞くことに集中させ

図 -2

年長児が習得するプログラミングテクニック

図 -3左）動きの方向がはっきりした絵・右）変化を促す絵

情報処理 Vol.62 No.12 Dec. 2021

663

ることができる．自由制作ではビスケットランドとのかどうか，また，香川富士見丘幼稚園の実践はどいう，自分のプログラムがほかの園児のプログラムのように捉えることができるのだろうか．

と同じスクリーンに現れるビスケットの機能を活用している．1 人で黙々とプログラムを作る，というよ

未就学児の発達段階

りも，お友だちと楽しくプログラミングをしている．

子どもの発達段階に関しては，年少児から年長児の各回で「海の世界」「空の世界」また「おばけやしき」な

年齢にあたる 3 歳から 6 歳は，論理を操作できないとどの世界観をベースにした共同制作に取り組む．レッ

言われている．また，4 歳までには，イメージを使っ

スンの最後は大きいスクリーンで発表会を行う．こて，具体的な何かを別の具体的な何かに見立て（積みの発表会では園児たちは「みてみてー！」「私のがあ

木を電車に見立てる，など），考え，記憶することはるー！」と大盛り上がりだ（図 -4 右）．

できると言われている．また，4 歳から 7 歳では，物事を分類したり，関連付けたりすることはできる．一方で，この時期は数や量という概念が，置き方や見せ未就学児にプログラミング教育をする意義方の違いで同一視できず，知覚的な目立った特徴に左

未就学児にプログラミングは必要？

右され，一貫した論理操作ができないといわれている．

幼稚園でのプログラミング教育の実践事例を紹介

また，自己中心的な考え方から解放され，論理的に物してきたが，改めて未就学児にプログラミング教育

事を考えられるようになるのは，7 歳以降だと考えらは必要なのだろうか？ また，可能なのだろうか？

れている．

早期から子どもを情報機器に触らせることには，情発達には個人差がある．よってすべての児童の思緒・身体の発達を妨げる要因として，反対の立場の考がこのモデルに当てはまるとは言えないが，未就人もいる．一方で，日本学術会議の示す「情報教育学児を対象にしたとき，具体的に目に見えるものを

3）

課程の設計指針─初等教育から高等教育まで」

では，入学前の段階でプログラミングを通して，コン

中心に，学習環境を用意する必要がある．抽象的な数字や文字による表現は適さないと考えられる．

ピュータの原理的なものに触れることは，情報学の興味・関心を育むために良いと書かれている．そこ

未就学児の学びでは未就学児の体験では「コンピュータそのものの平成 29 年改訂幼稚園教育要領では，幼稚園にお特徴的な部分」を体験することを目的にすべきだ，とける教育は「環境を通して行う教育」と位置づけられ書かれている．そのような体験のデザインが可能なており，「環境を通して行う教育」とは，遊びを通し

図 -4左）園児を教室前方に集めて説明する様子・右）自由制作（海の世界）の発表会の様子-【解説】未就学児を対象にしたプログラミング教育─ビスケット（Viscuit）を使った幼稚園の取り組み─ -664

情報処理 Vol.62 No.12 Dec. 2021

ての総合的な指導の中で行われるものだとされてい4）

る ．佐伯胖は，このような環境とのかかわりの中
5）

グラミング教育の歴史を遡って説明したい．子どもに対してのプログラミング教育の議論は，シーモ
6）での学びを以下のように説明している ．乳幼児はア・パパートから始まる ．パパートは構築主義のモノを使って遊ぶとき，そのモノを使ってさまざま学びを提唱した．構築主義では子どもを，知識を組な働き方を試みて「どうすれば，どうなるか」を探求み立てる存在として捉える．子どもはすでに知ってしている．この実践を経て，乳幼児はその対象をいる知識を組み合わせて，新しい知識を組み立てる

味わい，その対象について自分なりに分かるようにべきだという．つまり，子どもは知らないことを教なる．そして，その対象を十分に探求すると，今えられる，容器のような存在ではない．この考えは度はそれを活用した行為を誰かに「見てほしくなる」

幼稚園教育要領や，佐伯の考えとも通じるところがという．モノが道具であれば，乳幼児は直ちにそれある．また，パパートはそのような学びの中で，コを使って面白いものを作ってみたくなる．そのとき，ンピュータやプログラミングが果たす役割は，コン

乳幼児は誰か他者にできあがったものを見てもらっピュータなしでは学ぶことが難しかった抽象的な概たり，それで喜んでもらったりすることを希望し，念が，具体的になり，自分の知っている知識と組み期待する．ここから子どもたちの，社会や文化に向合わせて新しいことを知ることができるようになる

けての参加の意識が芽生える，という．

ことだ，と説明する．

未就学児のプログラミング教育を考えたとき，こ

現在のプログラミング教育では，抽象的な思考法ののように未就学児が自らプログラミングという環境獲得に焦点が置かれることが多い．しかし，実は抽象にコミットし，意味を見いだし，そしてその上で，的な思考ができるようになることよりも，抽象的なこ

他者に対して，その子どもなりのプログラムを使っとがコンピュータで具体的になり，それを用いて子どた表現が起こる環境が必要である．

もが新しい知識を組み立てられることのほうが，コン

最初に紹介したようにビスケットは文字も数字もピュータの出現の意義であったことが分かる．

使わず，具体的に絵で命令を作ることができる．加本ビスケットの実践では園児は順次・分岐・繰り

えて，ビスケットは表現できることの幅が非常に広返しと言われる概念を学んでいるわけではない．しい．たとえば，絵の動きの方向を決めるとき，そのかし，何度もプログラムを作成するプロセスで，自配置によって 360 度，どの方向にも動かせる．絵の分の作りたいものを考え，自分の知っている知識と動きの速さも，絵のズレの大きさによって微妙な速ビスケットで実現できることの間を行ったり来たりさまで表現できる．また，お絵かきのパレットでは，しながら試行錯誤し，プログラムすることを繰り返コンピュータが扱うすべての色を表現することがでしている．その中で「コンピュータは命令で動く」「コ

きる．これらすべてが数字・文字なしで操作できる．

ンピュータは間違わない．おかしい動作は人間がそこのように園児は自らが持つ考えやイメージを直感

ういう命令をしているからである」「1 つの命令で複的にプログラムで表現することができるため，コン数の絵が同時に動く」などの，コンピュータの特徴的ピュータに命令することの意味を探究する学びとしな部分に親しんでいる．

て，ビスケットは最適なツールであるといえる．

具体的なプログラミングでの学び
それでは，ビスケットのプログラミングで子どもたちは何を学んでいるのだろうか．ここで少しプロ

豊かな情報社会へ
未就学児も参加する情報社会
幼稚園でのビスケットを使ったプログラミング教

情報処理 Vol.62 No.12 Dec. 2021665

育の例を紹介し，未就学児の発達段階と，未就学児におけるプログラム）で動いてるんだね」と指摘したに求められる学びを確認してきた．その上で，ビスということである．この指摘だけを根拠に結論づけ

ケットは具体的であり，表現力が高いため，未就学児

ることはできないが，プログラミングの体験は，ソのプログラミングに最適であることを確認した．ここ

フトウェアの後ろには造り手がいて，そして，そので，もう一度幼稚園の活動を振り返ってみる．図 -5 は

人は自分の体験したようなプログラミングをしてい13 回のレッスンの最後のレッスンで園児が作った作品

る，という視点を養うことに通ずる，と考えられる．

の例である．図 -5 左の作品は図 -2 のテクニックの中

つまり，批評性を持ってソフトウェアを見る，といの（2）を応用して，船がゆらゆらしている状況を表現しう視点の早期の獲得につながる可能性が考えられる．

ている．図 -5 右の作品の上の 2 つのメガネは（3）のテ

未就学児が情報社会において，表現し，批評できクニックを応用して，雲のようなキャラクタが息を吹るようになることは，未就学児の情報社会への参加

いている様子を表現している．これらが特別に優れたを受け入れることである．筆者はここに，未就学児

例というわけではなく，すべての園児が最後のレッスのプログラミング教育の意義があると考えている．

ンでは，ビスケットを使って自分のアイディアを表現

また，早期から子どもが情報社会に参加することに1）

していることが分かっている ．

よって，情報社会全体をより豊かなものにすること

佐伯は探求している対象が自分に馴染んだとき，自分なりに「こういう使い方しようよ」「こういう風
に遊ぼうよ」と自ずと提案したくなり，提案すること
5）

を通して社会に参加していく，と述べている ．また，この参加によって，社会自体を他者の意味付けではなく，自分なりの意味付けで見られるようになるという．その意味付けは価値観の固まった保育者，教育者，大人の持っている意味付けは違う場合も多い．通年のレッスンでは著者自身も，幼稚園の先生達も園児が作るプログラムを見て，その発想の豊かさや柔軟さに驚かされた．私たち大人は子どもに教につながると考えられる．
参考文献
1） 渡辺勇士：未就学児を対象としてプログラミング教育に関する研究，電気通信大学博士学位論文（2021）．
2） 原田康徳，渡辺勇士：ビスケットプログラミングワークショッ
プ─なぜワークショップなのか─，情報処理 , Vol.58, No.10,
pp.891-893 (Oct. 2017).
3） 日本学術会議情報学委員会情報学教育分科会：報告情報教育課程の設計指針─初等教育から高等教育まで，http://www.scj.
go.jp/ja/info/kohyo/pdf/kohyo-24-h200925.pdf（参照 2021-8-30）．
4） 文部科学省：幼稚園教育要領，http://www.mext.go.jp/a_menu/
shotou/new-cs/youryou/you/index.htm（参照 2021-8-30）．
5） 佐伯 胖：幼児教育へのいざない円熟した保育者になるために，
東京大学出版会，pp.84-86 (2014).
6） シーモア・パパート：マインドストーム─子供，コンピューター─，
そして強力なアイデア，未来社（1995）．
（2021 年 9 月 6 日受付）

えるだけでなく，大人として子どもから学ぶことも必要であろう．
また，幼稚園で本活動を行ったあとに，年長組はデジタルメディアを使った展示を見に行ったそうである．そこで複数の園児が「あれはメガネ（ビスケット図 -5渡辺勇士（正会員） watanabe@viscuit.com
合同会社デジタルポケットチーフファシリテータ．
電気通信大学客員研究員．博士（工学）．未就学児を対象にしたプログラミング教育の実践研究を行っている．造形教育センター，
日本教育工学会，
ACM 各会員．

園児が作ったプログラミング作品の例-【解説】未就学児を対象にしたプログラミング教育─ビスケット（Viscuit）を使った幼稚園の取り組み─ -666

情報処理 Vol.62 No.12 Dec. 2021

基 応
専 般

ARTICLE

ジェンダーインクルーシブなプログラミング教材の開発

─視覚化を通してデータを感じるプログラミング─
吉田智子

有賀妙子

京都ノートルダム女子大学

同志社女子大学

IT 分野における男女の偏りを考える

真下武久

成安造形大学会の状況がアンコンシャス・バイアス（無意識のバイアス）となり，IT 分野への関心の差に繋がっている

プログラミングに関係した学習機会への参加者のと考えられる．そのため，女子がプログラミングの

男女比を調べてみると，概して男子の割合が高い．

学習は自分の学びや研究，興味とは関係ないと思っ

たとえば，総務省がプログラミング教室などの教育てしまうケースがあることも要因の 1 つであろう．

団体に対して行った調査では，男子が女子より多い

小中高でプログラミング体験・学習が必修となると答えた団体が 84% を占め，男子比率が 8 割を超え

中で，理数系科目に関心がある生徒が興味を持ちや☆1るという回答も約 4 割であった．

すい，たとえばロボットや電子制御，数学的処理を

この状況は日本だけではない．オランダの論文に扱うプログラミング教材に触れることで，この偏りは，アフタースクールのプログラミング教室の教をさらに固定化してしまうことを危惧する．情報教員 98 人への調査で女子の受講者が平均 30% である

育の内容がジェンダーレスだからと，実際の不均衡1）

ことが記載されている ．さらに，ジェンダー平等に目を向けないでいると，その実態が教育現場におが進み，教育現場で男女を同じように扱うことを強いて追認されることもあろう．その結果として「それく推奨する北欧でさえも，2016 年から 3 年間実施

は私の分野ではない」という認識を，プログラミング

された 140 校の中学校でのプログラミング教育のパ

学習が無意識のうちに強化しかねない．かといって，イロット実践において，プログラミングクラスに参プログラミングの教材に「フェミニンな」内容を取り加した女子生徒の割合が平均 16% と，日本と同様

入れればいいというわけではなく，ジェンダーイン

2）の偏りが起こっている ．つまり，プログラミング

クルーシブな，つまりジェンダーを包括する教材の科目の成績やプログラミング力に関する多くの研究導入という視点が必要であろう．

が，男女の差はないと報告している一方で，情報技術（IT）の事柄へのかかわりには差が存在する．
ではなぜ，このような偏りが起こるのであろうか．

さらに，ロボットや数学分野に関心がなかったり，
苦手意識を持つ学習者にもプログラミングに関心を持ってもらうためには，何が必要であろうか？ プ

情報教育の内容そのものはジェンダーに無関係であログラミング学習に限らず，学習者が課題に積極的るが，情報サービス産業では IT エンジニアの女性に取り組むための要素として，次のような点が考え3）の割合の少なさが課題となっており ，こうした社
☆1

  総務省
「プログラミング⼈材育成の在り⽅に関する調査研究報告書」（平成 27 年 6 月）．

られる．
• 学ぶ必要性が実感できること• 自分や他人，さらに社会に役立つこと

情報処理 Vol.62 No.12 Dec. 2021

667

• デザイン力，創造性が発揮できることいたとしても，プログラミングを学ぶ意欲へと繋が

本稿ではこのような視点から，プログラミングへ

る．自分や他人さらに社会の問題解決に役立つものの関心を高めるために著者らが開発を進めているプを目指して，そこにデザインの要素，人の情緒や感

ログラミング学習教材について紹介する．

性に訴える表現性を考案し，プログラム制作を通して，創造性を発揮する学びのプロセスとなる．それ

理系・芸術・文系を融合した
プログラミング教育の提案

を Web コンテンツとして容易に公開できれば，意これまで筆者らは，数学や工学的な題材が中心のにアップロードして人に見てもらうような感覚で，従来のプログラミング教材に，LED やモータを制御制作したプログラムを「こんなもの作ったよ」と見せすることでアートや手芸の作品を生み出す要素を加て自慢するような姿も想定する．

欲はさらに強化されるだろう．撮影した写真を SNS

4）えるなどの工夫を試み，成果を報告してきた ．こ

劇作家で大学教授，学長でもある平田オリザ氏は，れらの教材では，プログラムの結果が物理的なモノ

理系・芸術・文系を融合した人材育成の重要性を説として見られるという点が，学習者のプログラミン

いている．筆者らの意図するところはそれと重なるグへの興味を喚起するのに有効に働いた．しかし，もので，平田氏は「演劇を作る」学習でそれを行うの一方で，LED やマイコンボード，工作素材を用意す

に対し，筆者らは「プログラムを作る」学習を通してる必要があり，電子工学の知識も必要で，どの教室

理系・芸術・文系を融合した教育を目論む．

でも実施可能というわけではない．
ビッグデータが溢れる現在，それを読み解き，問プログラムでデータ視覚化を行う意図

題解決に役立てることが重要視され，大学においてはデータサイエンス教育強化の取り組みがなされて一口にデータ視覚化といっても，それには大きくいる．このような点を背景に，筆者らはデータを画

3 つの段階があると考える．図 -1 は，世界でのモ面上でいつもとは違う視点で「見られる，触れるもの

バイルとデスクトップとタブレットの利用者の割合

とする」
，つまり
「データの視覚化」を行うプログラムに関するデータを 3 つの段階で視覚化したものであを中心に，教材を開発することとした．

る．データは文字や数値情報の列としてまとめられ自分の収集したデータやさまざまな組織が公表しることが多く，表はそのようなデータの第一段階のているデータを感性に訴えるユニークな手法で表現

視覚化と言える（図 -1 Step1）．次に表データをグラするという動機は，どのような分野に興味を持ってフとして表すことで，より見やすくデータを捉えら（単位：%）

Step1：表図 -1

Step2：グラフ

Step3：データの視覚化（たとえばアニメーション，
https://test.mashimolab.com/p5/devices/ww/）データ視覚化の 3 つの段階 - Desktop vs. Mobile vs. Tablet Market Share（https://gs.statcounter.com）-【解説】ジェンダーインクルーシブなプログラミング教材の開発─視覚化を通してデータを感じるプログラミング─ -668

情報処理 Vol.62 No.12 Dec. 2021

れる表現になる（図 -1 Step2）．そのために Excel の☆2

プログラミング環境としては，グラフィック描

や Google Data

画用関数群の充実，Web ブラウザ上でただちに結といった高度な視覚化ツールが存在する．

果が見られ，発信できる点を考慮し，Processing

ここまでは，データをあるがままにシンプルに表（Processing Foundation） を 元 に 開 発 さ れ た持つグラフ化機能に加え，
Infogram
Studio☆3

現したにすぎない．一般的なグラフとは違うかたち
でデータを見せる，人の感性を刺激する創意でデー
タの持つ意味を伝える，つまりインフォグラフィク☆4

スとしての表現が最後にくる（図 -1 Step3） ．
Step2 は，使うツールの機能の範囲内での工夫にJavaScript のライブラリ p5.js を採用する．
データ視覚化のサンプルプログラムの例として，• 気象情報（気温，湿度，風速など）を視覚化• SNS のアクセスデータを視覚化などを考えている．

なり，今までと違う新しい視点で情報をデザインして美しく見せたり，動きやインタラクションを組み学習のステップ

込んだりすることができない．ここでいよいよプロ

学習教材では，ステップを踏んで学習を進めら

グラミングを学ぶ必要性が実感できる．情報の意味れるように構成する．簡単なプログラム例として，

をインパクトのあるかたちで伝え，データをどう感

図 -2 のようなシンプルなインフォグラフィクス

じさせるか，ユニークな視覚化を探る点が学習動機の描画がある．このプログラムは，人口や小学生，の向上につながると考える．

大学生，衆議院議員などの男女比を順次円の塗り分けで表示し，個数の違いでその意味を考えることを意図している．さらに，マウスで触ると円のプログラミング学習教材の構想

大きさがブルブルと変化する動きを加え，「データ開発を進めているプログラミング学習教材は，大を感じる」効果を狙った．

きく 3 つの部分からなる：（1）プログラミング基礎

はじめからこのような描画を目指すのではなく，の学習（2）視覚化を助けるミドルウェアライブラリ

そこへ至るまでに，表 -1 に示すように，1 個の円を

☆5

などの動

描くところから始め，順番に目に見える表現や機能

きの効果）（3）実際のサンプルプログラム（触ると動を加えながら，対応するプログラミングの基礎的要

くインフォグラフィクスを描くプログラム，図 -2 参

素の学習を進める．

（たとえば，データ正規化，イージング

照）．扱うデータは，幅広い分野から選択し，学習者

さらに，表 -1 に示した学習後の次のステップとしが元々興味のあった分野に限らず，新規な視点を発見できるようする．
これらを組み合わせて，授業を構成することで，学習者の興味分野やレベルに合わせた授業の展開が可能となる．学習者はプログラミングを学ぶことで，自分の表現力，創造力を駆使した「作品」を公開する
ことを目指す．
☆2

  https://infogram.com/
  https://supermetrics.com/product/data-studio☆4
  https://test.mashimolab.com/p5/devices/ww/（図 -1「データ視覚化の 3
つの段階」の Step3）．
☆5
  イージング (Easing) とは速度に緩急をつけること．
☆3

図 -2 データ視覚化のシンプルな例（女子黄色，男子緑色で，マウスで触ると円が揺れる仕様）

情報処理 Vol.62 No.12 Dec. 2021

669

て，学習者の独自の着眼点を取り入れたプロジェク

ログラミング学習のモチベーションを高める 1 つト（課題制作）を行うことを想定している．どのようの要素として期待できる．しかし，これを実現すなデータを選択するか，どう表現するか，どうプロ

るには，プログラミングの基礎的な技術のほかに，グラムとして実現するかなど，主体的な学びを誘発

ファイル入出力やデータの構文解析，3D グラフィする．そして，結果を共有することで，「演習問題」クス，アニメーションなど複数の知識・技能の習を解くのとは異なる効果が期待できる．

得が必要となり，学習の量とそれにかかる時間が高校の情報科では「プログラミング」と「情報デザ増大してしまう．

イン」
は別の単元で構成されているが，それらを融合

そこで本プロジェクトでは，少ない学習量でデーする学習内容とすることで，プログラミング学習へ

タ視覚化を実現できるライブラリを用意し，興味のの意欲が高められると考える．

ある範囲に集中してプログラミングできるよう検討している．

学習効率を念頭においたライブラリの開発
高度で美しいデータの視覚化は，それ自体がプ
表 -1

たとえば，図 -3 のサンプルは，statcounter.com
から提供される CSV データを元に，10 年間のソー

学びのステップ

作成するプログラムの動き

プログラミングの学びの要素

1．円を 1 つ描く

定数，変数，関数呼び出し

2．円を 10 個横に並べて描く

繰り返し (for)3．10 行 10 列に並べて円を描く

繰り返しの入れ子

4．1 列だけ色を変える

条件分岐 (if)5．データに応じて，円の色を変える

数値計算，数値の標準化

6．マウス操作で，表示するデータを切り替える

イベント処理，関数の定義

7．マウスで触ると円が揺れる

クラス定義による機能のモジュール化

図 -3

10 年間の SNS のユーザ獲得率データを視覚化した例（実際はアニメーション）
https://test.mashimolab.com/p5/sns/ww/-【解説】ジェンダーインクルーシブなプログラミング教材の開発─視覚化を通してデータを感じるプログラミング─ -670

情報処理 Vol.62 No.12 Dec. 2021

シャルメディアのユーザ獲得率を視覚化したものである☆6．2010 年から 2020 年までのソーシャルメ

提案する教材への期待

ディアのユーザ数の変遷の様子が，飛び交う粒子

数学が得意でなくても，ゲーム好きでなくても，文の密度の変化から直感的に分かる．図左は視覚化系科目が向いていると思っていても，プログラミンしたアニメーションから切り出したもので 2010 年

グを学びたいという意欲が湧く教材の開発を目指し

1 月の様子を表す．右下の Facebook（青）や左上のている．
「面白かった！」と思う学びの先に，広く IT

StumbleUpon（橙）が優勢で，右上の YouTube（赤）分野での女子の活躍，参画が高まることを期待する．

が伸び始めている．図右は 2020 年 1 月のもので，参考文献
1） Aivaloglou, E. and Hermans, F. : How is Programming Taught in
Code Clubs? Exploring the Experiences and Gender Perceptionsof Code Club Teachers, Proceedings of the 19th Koli Calling
International Conference on Computing Education Research
Article No.: 22, 1-10 (2019).
2） Corneliussen, H. and Tveranger, F. : Programming in Secondary
Schools in Norway : A Wasted Opportunity for Inclusion,
GenderIT, 175-182 (2018).
3） 情報サービス産業 基本統計調査，情報サービス産業協会（2021），https://www.jisa.or.jp/Portals/0/report/basic2020.pdf
4） 吉田智子：手芸制作を通して楽しくプログラミング学習，情報処理，Vol.57, No.10, pp.1024-1027 (Oct. 2016), https://www.
ipsj.or.jp/magazine/9faeag0000005al5-att/5710peta.pdf（2021 年 8 月 18 日受付）

右下の Facebook（青）, 左上の Twitter（水色）,
Pinterest（薄赤）, 下側の Instagram（紫）が優勢であることが分かる．
このサンプルでは，複数の CSV データファイルの入力と構文解析，データの正規化，物理運動の計
算，データと描画オブジェクトの紐付け，アニメー
ションをプログラムによって実現している．これらの各過程をライブラリモジュールとしてまとめ，それを利用することで，視覚表現やデータ解析などそれぞれ関心のある部分に集中してプログラミングできるよう目指す．

この教材開発は，基盤研究（Ｃ）：ジェンダーインクルーシブなプログラミ
ング教育教材の開発と普及 [ 課題番号：21K0279，代表者：有賀妙子 ] の助成を受けています．

ファイル入出力やデータ構文解析，物理演算などのライブラリは，インターネット上にも広く存在する．
しかし，多くの場合，汎用性を念頭においているため，
パラメータの数が多く，初心者は全容を理解しにくく，どう使うのかを把握するための学習時間が長くなりがちである．本教材では，プログラミング学習の入門段階においても高度なデータ視覚化が容易に可能となる
よう，少ない学習時間で各過程を連携し理解できることを第一義に，開発を進めている．
☆6

  https://test.mashimolab.com/p5/sns/ww/，https://test.mashimolab.com/
p5/sns/jp/，図 -3「10 年間の SNS のユーザ獲得率データを視覚化」の世界版と日本版のアニメーションを公開中．

吉田智子（正会員） tyoshida@notredame.ac.jp
京都ノートルダム女子大学教授．オムロン（株），テクニカルライ
ターなどを経て，2000 年から現所属に．立命館大学大学院修了．情報教育に従事．
有賀妙子（正会員） tariga@dwc.doshisha.ac.jp
同志社女子大学学芸学部メディア創造学科特任教授．大阪大学大学院博士課程修了．博士（情報科学）．情報デザイン，プログラミングの教材開発研究を行ってきた．
真下武久

mashimo@seian.jp

成安造形大学芸術学部芸術学科准教授．情報科学芸術大学院大学メディア表現研究科修了．インタラクティブアートの分野を中心に研究，作品発表等を行う．

情報処理 Vol.62 No.12 Dec. 2021

671