オンライン・オープンソースを活用した
プログラミング x 数学 x アートの学び中島さち子*1
Email: sachiko.nakajima@steam21.com*1: 東京理科大学理数教育研究センター数学体験館副館長◎Key Words

1.

オンライン教育，オープンソース，プログラミング，デジタルアート，数学，GIGA

はじめに
(1)

2020 年度から全面実施された学習指導要領 において，小学校プログラミング教育が必修化された。また，2022 年度より高等学校で開始した学習指導要領(2)では情報科関連の内容が大きく改訂され，2025 年度から大学入試共通テストとして「情報 I」の科目が出題される。また，2020年より始まった COVID-19 パンデミックによりオンライン教育の比重は世界的にも一気に高まった。2019 年 12 月に文部科学省より発表された「GIGA スクール構想」(3)は全般前倒しとなり，全国の多くの小中学校では一人一台PC やタブレットなどの端末が準備される，など，日本の学校における ICT 環境は近年劇的に変化している。しかし，どのように学校でプログラミング教育や ICT の活用を行っていけば良いかわからない，や地域格差などの教育現場の課題も多い(4)。
一方，世界では，さまざまな知を人々が開いて共有し知の格差を是正していこうとするオープンラーニングの流れが急速に進んでいる。1998 年オープンソースソフトウ
ェア（Open Source Software：OSS, 以下 OSS とする。OSS：
ソースコードが入手でき、目的を問わず利用、修正、頒布できることの明示的な許可および、それを利用する個人や団体の努力、利益を遮ることがないライセンスを適用したコンピューターソフトウェアと、そのソフトウェア開発の手法）という用語が正式に提唱され，組織 OSI（Open Source Initiative）が立ち上げられた。また，2001 年にマサチューセッツ工科大学（Massachusetts Institute ofTechnology：MIT，以下 MIT とする）が大学における全授業を無償公開すると宣言し，オープンコースウェア（OpenCourse-Ware：OCW，以下 OCW とする）の流れを生み出した。MIT における OCW の成功を受けて，ハーバード大学やコロンビア大学などが Coursera, Udemy, edX といった MOOCs（Massive Open Online Courses，インターネットを通じて有名大学が無料で講座を展開）を開始した(5)。
2008 年には GitHub が立ち上がり，世界中のエンジニアの間でオープンソースコミュニティが生まれ，イノベーションや教育も飛躍的に推進されている。英語圏中国圏の情報教育では，このように OSS を活用した OER（OpenEducational Resources，開かれた教育リソース）が多く生まれており，それは教育格差是正やイノベーション創出にも繋がっていると考えられている(6)。
一方，日本語圏の人口が少ないこともあり，日本ではこうしたオープンラーニングの勢いは英語圏中国圏に比べて弱い。文部科学省はプログラミング教育の指導案や授業実践事例なども一部公開している(7)が，プログラミング的思考としての事例が多く，ソースコードまで公開されて実際にリテラシーとしてプログラミングを用いて何か作品やプロトタイプを制作させることを促進するものはほぼない。その中，筆者は経済産業省「未来の教室」にて2020 年度より STEAM ライブラリーを開設し，企業や大学，学校が主体となったさまざまな学際的な STEAM プ
ログラムの動画・ワークシート・指導ガイドを開発し無償公開している(8)。筆者らは，中でも，21 世紀の STEAM リ
テラシー “Playful steAm シリーズ” を展開し，“PlayfulCoding” (9)プログラムでは，世界のオープンソースプロジ
ェクトの中で最もよく利用されているプログラミング言語の一つである JavaScript を簡単にライブラリ化した
p5.js を用いている。ここでは，使い方の動画やワークシート，指導ガイドとともに必要なソースコードを OSS ライセンスで公開しており，英語圏におけるニューヨーク大学ダニエル・シフマン教授の YouTube “Coding Train”の簡易日本語版となっている。p5.js は，元々アーティストやデザイナーのために開発されたプログラミング言語
Processing をさらに簡素化したものであり，言語の中身は日本の学習指導要領上では中学・高校の数学科（座標平面，座標平面の移動，図形と方程式，関数，変数他）に近い。
また，アーティストのために開発された言語であるため，コードの基本が「キャンバス」に「スケッチ」を描く，など，絵画の視点で作られており，多様な作品制作に向いた言語となっている。つまり，数学・科学・アートなどと絡みあう学際的なSTEAM 教育の一環としてp5.js は有効と言える。
p5.js は JavaScript であるため，ウェブエディタを利用した場合は，URL にて互いの作品を共有したり，校正・協働することが容易である。そこで，筆者らはソースコードの共有・無料公開やOERの開発・無償提供を開始した。
また，関連研修やワークショップ，メンタリングなどを，主にオンラインにて開発し，有償提供を開始した。
本稿では実際に COVID-19 パンデミックの中で OSS やOER：STEAM ライブラリー“Playful Coding”を活用して実施した特徴的なオンライン学習事例のうち，カンボジアの方々の事例を紹介する。なお，彼らのデジタルアート作品はさまざまな数学やプログラミングの理解と活用に基づいており，数学やプログラミングが多様なアートの表現の幅を広げることを実証する好事例ともなっている。
将来は原則として学習素材や事例作品が無償公開され，OSS 定義のライセンスで共有・編集可能となることで，日本語をベースとした情報教育が飛躍的に促進していくこと，および情報教育が数学やアートと密接に結びついて発展していくことを目指している。

2. OSS・OER を活用した実証事例の基本情報
2.1 OSS としての p5.js 概要
p5.js は，JavaScript のライブラリであり，アーティストやデザイナー，教育者，プログラミング初学者にとって容易に始めることができる創造的なプログラミング言語であり，無料のオープンソースソフトウェアとして誰でも利用することができる。ジェンダーや人種，セクターや文化などが多様な人々によって協働開発されており，Processing Foundation やニューヨーク大学芸術学部ITP 大学院などのサポートを受けている。また，ウェブエディタも無償公開されており，自分の作品をクラウド上で保存し，URL で作品をやりとりすることが可能である。実際に絵で描くアートと異なり，アニメーションや html5 をベースとしたインタラクティブな表現を生み出すことが可能である。言語としては，英語・スペイン語・中国語・韓国語・ヒンディ語に対応している（一部日本語も対応）。

2.2

p5.js を利用した OER としての “Coding Train”
および “Playful Coding”“Coding Train” は，2006 年よりニューヨーク大学 ITP 大学院シフマン教授が展開する YouTube チャンネルであり，2022 年 6 月現在，登録者数は 144 万人にのぼる。動画によるチュートリアルで，シフマン教授がコードとホワイトボードなどを行き来しながら楽しく展開している。基本的にチュートリアル内で扱われるコードは全て OSS の定義に基づき公開されている。内容は，プログラミング初
心者向けのプログラミング言語の基本からデジタルアート全般，さらには “Coding Challenge” として機械学習，自然科学のシミュレーション，応用数学の視覚化など幅広いテーマを扱っており，累計数百本の動画は世界中で計 1億回以上視聴されている。数理科学・生命科学などとの学問的・学際的な連携が見られる点も特徴的である。
一方，“Playful Coding” は経済産業省「未来の教室」
STEAM ライブラリーで 2021 年 3 月に株式会社 steAm がリリースしたプログラムであり，日本語にて動画チュートリアルとともに，ワークシートや指導ガイド，コードを展開している。以下の 9 コマ（Module）から成り立つ。
表 1 “Playful Coding” の 9 コマの流れコマ(Module)
ポイント
1

全体の概要 / 環境の準備

2

21 世紀の図工！プログラミングで絵を描こう Part 1 （RGB の考え方，２進法）

3

21 世紀の図工！プログラミングで絵を7

アニメーション Part 4 美しい幾何学模様を描こう (座標平面の移動)

8

インタラクションとは （クリック他）・
たくさん繰り返す (ループ)921 世紀メディア
コンセプトを作り形にする

また，別途，“Playful Coding” のウェブサイトも立ち上げ，用語のリファレンスが日本語で準備されている。
http://playfulcoding.jp/

2.3 実証事例概要：カンボジアの方々との実証
今回は，カンボジアの山本日本語学校卒業生の方々（カンボジア人であるが，普段は現地の旅行会社で日本語ガイドとして活動するため日本語での会話が可能）を対象としたオンラインプログラミング学習の様子を報告する。
対象は，20 代から 30 代のカンボジア人 6 名，日本人コーディネーター１名であり，パソコンやインターネット環境は現地旅行会社から一人一人に支給されたノートパソコンと有線・Wi-Fi インターネット環境を用いて，オフィスおよび自宅で作業を自由に行った。また，彼らは普段は日本語ガイドの仕事をしているが，パンデミックの中2021 年度は仕事が激減しており，時間がある状態でプログラミング学習を開始した。
2021 年 8 月時点では全員プログラミングの経験は皆無であり，慣れない日本語でのやりとりとなったため難しい点もあったと想定されるが，週 2 回の大学生メンターとの勉強会（交流会）と共に日々オンライン上で“Playful Coding”の動画・ワークシート・指導ガイド・例となるコードを活用し，数回のオンライン研修などを通して学習を進めていった。オンライン交流では遠隔会議ツールである Zoom を利用した。学習の際の言語としては主に日本語を用いたが，カンボジア側でも現地のクメール語で互いに学びを深めた。
なお，週 2 回のオンライン勉強会は，やはりプログラミング初心者である四国大学などの大学生を中心に，原則各々が作ってきた作品を見せ合い，感想や助言を言い合うという形とし，誰かが何かを「教える」のではなく部活のように交流し学び合う場として設計した。

3.

カンボジアにおける OSS・OER を活用したプ
ログラミング教育事例報告および簡単な考察

2.3 の結果，日常の学習では “Playful Coding”を活用し，以下のように，各々飛躍的な成長が見られた。

描こう Part 2 （座標平面，楕円他）
4

アニメーション Part 1 お絵かきツールをつくる （マウスの座標をとる）

5

アニメーション Part 2
変数とは？・ボールを動かそう

6

アニメーション Part 3 条件 if 文を学び、 跳ね返るボールを描こう
図 1：「カンボジアの国旗」（カンボジア A さん，2021 年 9 月）

図 1 のように，8・9 月頃は座標平面や，図形の座標平面上での表現を理解し，動かないが精緻なアート作品を作り始めた。この時点で数名がプログラミングに没頭しはじめ，「朝から晩まで描いている」状態となった。ただし，図 2 のように，図１のソースコードの中身ではまだ変数も使われておらず，長方形も三角形も全て手動で座標を微調整しながら都度数字を書き込んでおり，まだComputational（計算論的，数理的）な側面は少ない。簡単な顔やパンダを作る人もいれば，図 1 のように徐々にカンボジアらしい作品を作る人が出てきた。

図 2：図 1 のソースコードの一部
その後，図 3 は実は画面の左から右へ牛車が動いている作品となる。10・11 月頃には 4 – 6 コマ目に入り，変数の概念を理解し，画像を動かし始めた。また，この頃は日本の大学生とカンボジアのメンバーが勉強会を通じてコミュニティ化し，ここでカンボジアの牛車になぜか日本の大学生が描いたサンタクロースが乗る，などといったウェブ上での協働が生まれた。

どを用いて，アニメーションを生み出すことができるようになった。数学概念の理解やテクノロジーを扱う技能が深まれば深まるほど，作品が動きや変換を含むものに成長したり，表現したいアートの幅が広がり，オンライン上での文化交流も深まっていく様子が観察された。このように，“Playful Coding”などの OER やオンライン上でのコミュニケーションを通じて，数学やプログラミングの力が育成され，結果として多様な幅のアート表現や文化交流がオンライン上で行われ得ることが実証された。

図 5：「トンレサップ湖の巨大水上集落」（カンボジア D さん，2022 年 1 月）

図 6：
「水祭り：ボートレース」（カンボジア E さん，2022 年 1 月）

図 3：
「牛車とサンタクロース」（カンボジア B さん＋日本の大学生 C さん，2021 年 11 月）

図 7：図 6 のソースコードの一部
図 4：図 3 のソースコードの一部
なお，この牛車が右まで通り抜けると景色は夜となり蛍が舞う状態となる。このように，図 4 のように条件文 ifを用いてシーンを切り替えることもできるようになった。
また，この頃から，オンラインを通じて，より深い文化交流も生まれはじめ，カンボジアの文化を日本人に伝えたいという想いが芽生えていることが見てとれる。
また，図 4 にあるように，11 月頃には日本側・カンボジア側共に座標平面の平行移動や回転移動，関数，変数な

図 5・図 6 で見てとれるように，8・9 月の頃はあまり深く考えずに「遊び」としてさまざまな作品に取り組んでいたが，1 月頃には描きたいものや描きたい理由としての「コンセプト」が形成されていることがわかる。今回のカンボジアでの実証事例では，最終的に「見て魅てカンボジア！」というプロジェクトとなり，カンボジアの文化を写真だけではなく彼ら自身が試行錯誤して作ったデジタルアートとして表現し紹介したい，という情熱やコンセプトが生まれた。実際，日本側は，トンレサップ湖の巨大水上集落の様子や水祭りのボートレースの様子などはこうしたデジタルアートを通じて生き生きと，初めて知ることとなった。もちろん写真や動画を通じても文化に出会うことはできるが，こうしたデジタルアートの文化発信の可能性を改めて感じるに至った。アート表現の多様化や深化の背後には，やはり数学やプログラミングの知識・技能の向上がある。実際，図 7 に見られるように，1 月頃には while 文を使って「変数が一定の数値を超えるまでは〜〜を繰り返す」といった繰り返し構文を変数や座標平面の移動と合わせて理解し活用するようになっており，徐々にコードも必要に応じて短縮されたり，より複雑に重層化した変数・関数の利用がされている。また，音楽や画像素材の取り込みも行われ，マウスのインタラクションによって場面や音量が変わる，などの指示も数学概念を用いたテキストプログラミングによって行われている。
何よりも，元々プログラミングを全く知らなかったカンボジアの方々が，国境や時間・場所の限界を越えたオンライン教育や OSS，OER を活用して劇的にプログラミン
グのスキルを身につけ，喜びを感じ，「寝食を忘れるほど夢中に」なったことを見て，プログラミング教育におけるオンライン・オープンソース活用の大きな可能性を感じた。なお，コロナ禍にあって，彼らはプログラミングを「未来へのチャレンジ」ととらえ，プログラミングを通じて希望を見出した。コロナ禍で「成長」できたレアケースだと語っている。
また，本ソースコードの中には先に記載の通り，座標平面をはじめとする多くの数学が使われている。徐々に数学概念の理解としても，座標平面，座標平面の移動，関数，変数，ループの考え方（図 7 では while と変数を用いた構文）などの理解が深まっていることがわかる。こうした概念は，日本では大学入学共通テストの数学などで扱われる考え方である。しかし，テストにて問われるより，デジタルアート作品を創るプロセスの中で応用されることで，より深い概念理解に至るのではないかと推測される。このような「応用」は，ブルームの認知的領域(10)のスキルのステージでは，知識・理解・応用・分析・統合・評価の 3ステージ目であり，高度な認知領域に属している。プログ
ラミングのデバギングの際には分析，全体設計に際しては統合・評価・創造的な力も養われると考えられる。

4.

おわりに

世界では，21 世紀に入り，OSS や OER の活用が広がり，教育格差是正やイノベーション創出が加速している。
一方，日本では情報教育の大幅変革が始まり，小学校からプログラミング教育が開始し，GIGA スクール構想による学校教育における ICT の活用も急務となっている。
今回，日本からカンボジアに提供したプログラミング
教育は主に OSS や OER を活用し，全てオンラインにて行っており，パンデミックの中でも実施することができた。また，OSS や OER を活用すれば，プログラミングを全く知らない方々であっても，オンライン教育のみで一定のプログラミングを用いたデジタルアートアニメーションやインタラクティブなデジタルアートを制作することができることがわかった。
本事例は，オンラインやオープンソースを活用することで，プログラミング・数学・アートといった領域を横断する学際的な学びを，構築主義的に創作を通じて行うことができることを証明するものであると言える。

また，
OSS やOER，オンライン教育を活用することで，例えば本事例ではカンボジアまでの渡航費用を一切使っておらず，その点においても格段に費用を押し下げている。
今後も原則日本発信の OSS や OER を用いることで，今後も，カンボジアにおけるプログラミング教育を継続的に安価に推進していくことができることがわかる。
このように，オンラインやオープンソースを活用した学びは，場所や時間の制約を超えて，継続的に社会全体が情報教育を創造的に推進していく上では非常に大きな意義や可能性を持つことが示唆されている。
なお，本論文では扱わないが，カンボジアの事例以外でも，ウェブ上での OSS や OER をベースとした学び方で，プログラミング初学者から，多くのインタラクティブで創造的なデジタルアート作品が生まれている。例えば日本の中学校や高等学校など学校教育への導入方法は，「3時間のリアルワークショップと数回の放課後オンラインメンタリング」「情報や探究の週 2 時間の授業を活用した3 ヶ月程度の学習と数回のオンラインメンタリング」などさまざまである。これらの事例は，国内の学校における情報教育や学際的な探究学習へのプログラミングの活用においても，OSS や OER が重要な役割を果たすであろうことが示唆されている。また，カンボジアの事例をはじめ，多くの場合，プログラミングの学習を通して「コンセプトを作る力」「アイディアを形にする力」「試行錯誤する力」など，創造性とイノベーション，批判的思考や問題解決，メタ認知などの 21 世紀型スキル(11)に関わる力において著しい成長が見られた。また，国際文化交流の一環としても，こうしたプログラミングを用いることができることがわかり，今後日本国内の情報教育のみならず，日本から国外への教育輸出の観点からも情報や数学，アートを絡めた発信が期待できることを本事例は示している。

参考文献
(1)

文部科学省：“小学校学習指導要領解説 総則編”
，東洋館出版社，東京（2018）．
(2) 文部科学省：“高等学校学習指導要領<平成 30 年告示>解説情報編”，開隆堂出版，東京（2017）．
(3) 文部科学省：“GIGA スクール構想の最新の状況について”，文部科学省教育課程部会（第 124 回），東京（2021）．
(4) 登本洋子，高橋純： “初等中等教育における情報端末の整備と活用に関する教員の意識”，日本教育工学会，45 巻，3 号，pp. 365-373（2021）．
(5) Robert A. Rhoads : “MOOCs, High Technology, and HigherLearning”, JHU Press, Baltimore (2015).
(6) Fahad Sherwani, Muhammad Mujtaba Asad, Prathamesh Churi,Razali Bin Hassan: “Innovative Education Technologies for 21stCentury Teaching and Learning”, CRC Press, Florida (2021).
(7) 文部科学省：“小学校プログラミング教育の手引”, 初等中等教育局学校デジタル化プロジェクトチーム，東京（2020）(8) 経済産業省「未来の教室」事務局：“STEAM ライブラリーご紹介”，経済産業省教育産業室（2021）(9) 株式会社 steAm，“Playful Coding”，経済産業省「未来の教室」https://www.steam-library.go.jp/content/37(accessed: 2022-623).
(10) Bloom, B.S.: “Taxonomy of educational objectives: Theclassification of educational goals”, NY: Longmans, Green, NewYork (1956).
(11) Patrick Griffin, Barry McGaw, Esther Care (eds.): “Assessmentand Teaching of 21st Century Skills”, Springer, New York (2012).