情報処理学会 インタラクション 2020
IPSJ Interaction 2020

1B-21
2020/3/9

Puppy: プログラムの直感的理解を目指した
新しいプログラミング入門環境
多田 拓1

秋信 有花2

坂根 万琴2

倉光 君郎2,a)

概要：プログラミング初学者がプログラムを理解するにはどうすればよいのか? 従来のプログラミング教
材はソースコードに対する出力結果を提示するような，入出力からプログラムの理解を促す手法が一般的であった．しかし，入出力のみでプログラムを理解することは難しいため，教材や教員がプログラムの説明をすることがほとんどである．我々は，ブラックボックス化されてしまうプログラムの動作を可視化することでプログラムの理解を助けるプログラミング入門環境 Puppy を開発している．Puppy では，ハードウェア（実体のあるモノ）はソフトウェアより理解しやすい点に着目して，物理シミュレーションとプログラムの時間変化を対応づけることによるプログラム動作の可視化手法を実装している．本発表では，Puppy によるプログラム動作の可視化手法と Puppy の開発状況について報告する．

1. はじめにによるビジュアルプログラミングを，兼宗らのドリトル [3]は，英語に不慣れな日本人学生向けに日本語プログラミン（背景）近年，ネットワーク技術や人工知能の急激な発展グを提案し，対象にあわせた困難さの解消を図っている．

により，我々の日常生活が大きく変化しつつある．このよ

これらは，プログラムの入力インターフェイスを学生向けうな現代社会の基礎素養として，「プログラミング教育」にに扱いやすくする取り組みであったが，本研究では，小学関心が集まるのは自然な流れといえる．特に，米国「Hour生より少し学年が進んだ高校生程度の学力がある学生を対of Code」が始まり，コンピュータ科学の教育の機運が全象に，「プログラム理解の困難さ」に着目する．

世界的に高まった．我が国でも，2020 年度からは小学校，従来のプログラミング教材はプログラムの入出力を提示

その後，順次，中学校，高等学校の授業でプログラミングし，そのプログラムの詳細な動作は教材や教員が説明する必修化が進む予定である．という方式がほとんどである．そのため，学生がプログラ（問題）従来，プログラミングはコンピュータ科学や情ムを理解するためには，質の高い説明を必要とし，誤解を報工学を専攻する学生，さらにサイエンスやエンジニアリ招くような表現に配慮する必要があった．我々は，ハードングを学ぶ理工系の学生に対して，専門教育を行なってきウェア (実体のあるモノ) はソフトウェアより理解しやすいた．しかし，プログラミング教育の裾野が広がることで，点に着目し，プログラム理解をより直感的にする方法を提必ずしもモチベーションの高い学生だけが対象とならな案する．

い．そこで，プログラム理解の本質的な困難さを解明し，（目的）Puppy は，物理世界の直感理解を可能にする統ソフトウェア技術を活用し，プログラム理解を促進するこ合プログラミング入門環境である．次のような特徴を持つ．とが重要となる．

• 物理シミュレーション – プログラムは，物理シミュ先駆的研究の例として，MIT メディアラボ の Scratch[1],レーション上で物理法則に影響を受けながら動作する．

[2] は，キーボード操作に不慣れな小学生に対し，ブロック• 簡易 Python 言語 – 本格的なプログラミングにステップアップしやすいように，プログラミング教育で定評

12a)

横浜国立大学大学院理工学府
Graduate School of Engineering, Yokohama National University, 79-1 Tokiwadai, Hodogaya-ku, Yokohama, Kanagawa 240–8501, Japan
日本女子大学理学部数物科学科
Department of Mathematical and Physical Sciences, Japan
Women’s University, 2-8-1 Mejirodai, Bunkyo-ku, Tokyo112–8681, Japan
kuramitsuk@fc.jwu.ac.jp© 2020 Information Processing Society of Japanのある Python の簡易版を用いる• 統合 Web 開発環境 – 教員や学生がインストールや設定作業なしに Web ブラウザひとつで利用可能なプログラム実行環境とする

Puppy プロジェクトの最終的な目標は，高校教員と高校生に対して，プログラミングを教えやすく学びやすいソフ258

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

トウェアを提供することである．本研究で開発した Puppy

1B-21
2020/3/9

フィジカル・プログラミング

物理シミュレーション

は，オープンソースとして研究成果を公開するするだけでなく，以下のサイトから利用可能な状態になっている．

https://playpuppy.github.io/
本稿の残りの構成は以下の通りである．2 節では，Puppy開発となった背景と動機，さらに Puppy の裏側にあるアイディアについて述べる．3 節では，Puppy Playground!
を紹介する．4 節では，Puppy Playground!によるプログ
ラム動作の可視化について述べる．5 節では，関連研究をまとめる．6 節では，本論文を総括する．

機材、スペースが必要
センサー類の不具合

PCひとつで演習できる
ハードウェアの不具合も少ない

図 1 仮想的なフィジカル・プログラミングの実現

2. プログラムの理解はなぜ難しいのか？
本節では，Puppy 開発に至った背景と動機，その背後にあるアイディア（着想）について述べる．
対応つける

2.1 経緯著者の一人は，情報処理学会「プログラミングシンポジウム 2018 (1 月)」で，「高校生向けのプログラミング」というパネルの座長を担当した．プログラミング必修を前に，物理シミュレーション
重力、質量、弾性力のある動き

100 人を超える大学教員がパネルに参加し，各自の高大連

図 2

プログラム

Puppy コンセプト

携プログラムの経験を交え，白熱した議論となった．その議論の中，以下の共通認識を得ることができた．

• ゲームのような題材，ロボット制御などの題材は扱いやすい• アルゴリズムなど抽象的な題材は理解されにくい

2.3 プログラム動作の可視化
最後に，Puppy によるプログラム動作の可視化について述べる．
図 2 は，プログラム動作の可視化のアイディアを図示し• そもそも有限状態機械モデルが難しいたものである．プログラム動作は実体を体感できないが，このような議論を通して，ロボット制御などのフィジカ物理シミュレーションと対応づけることによってプログラ

ル・プログラミングは，一見するとオモチャで遊んでいるム動作を可視化する．例えば，円を繰り返し出現させるよように見えるが，「時系列にしたがって変化する物理感覚」

うなプログラムを実行したときには，円が段階的に出現すから理解を高めるという点で，プログラミング教育としてる様子をシミュレーションする．この段階的というのはデのある程度の妥当性があるが確認できた．

バッガのステップ実行のようなものであり，プログラムをあえてゆっくりと実行することで人間がプログラムの動作

2.2 フィジカル・プログラミングを視覚的に追えるようにする．

現在，フィジカル・プログラミング [4] は，ロボット制御プログラムの動作を可視化し理解させることができれなどを題材として人気の教材になっている．実際にロボッば，自身でバグを発見したり，さらに発展的なプログラムトが動くというだけでなく，プログラムによる動作が予想への修正などの自発的な行動を促すことができると期待ししやすく，理解しやすいためといえる．一方，フィジカル・ている．

プログラミングを導入するには，スペースや設備の面で負担が少なくない．また，アクチュエータ（モーター）が期

3. Puppy Playground!

待どおりに動作しない，センサーの読み込んだ値が環境にPuppy Playground!は，プログラミング入門教育向けの依存するなど，組込みプログラミング特有の難しさがある．

統合演習環境である．物理シミュレーションと統合された

また，フィジカル・プログラミングは，在宅学習などの演ビジュアル環境をベースにしており，プログラム動作を直習量が確保できず，プログラムは理解しやすいが必ずしも感的に理解しやすくなるように設計されている．

プログラミング力の向上に望ましくないという研究 [5] もある．

3.1 システム概要

Puppy は，フィジカル・プログラミングを仮想的に実現

Puppy Playground!は，Web ブラウザでユーザインタすることで，直感的な理解と PC ひとつによる演習環境をフェースを提供する．利用者は，Web ブラウザを開いて実現することをゴールの１つとしている．

コードを書き，同じ画面でプログラムの実行を行うことが© 2020 Information Processing Society of Japan259

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

1B-21
2020/3/9

図 3

Puppy Playground!

できる．図 3 は，Puppy Playground!を示している．右側

数の値を簡単に物体上に投影して表示可能になっている．

で編集したコードは，左側で実行し動作を確認することがprint() 文などの表示も Matter.js のレンダリング機能で行できる．

なっている．

図 4 は，Puppy Playground!のシステム構成図を示している．Puppy Playground!は，Web ブラウザを用いるが，物理エンジンの動作中は 60[fps] の速度で描画を繰り返し，物理シミュレーションを表示する．

サーバーレスなアーキテクチャになっており，一旦ページを開くとオフラインでも利用することができる．エディタ

3.3 トランスコンパイラで編集されたソースコードは，トランスパイラ技法により，Puppy 言 語 処 理 系 は ，Puppy ソ ー ス コ ー ド か ら

物理エンジンライブラリ Matter.js を用いた JavaScript にJavaScript ソースコードへの変換器，トランスコンパイラ変換される．

として開発されている．

Puppy のシンタックスは，TPEG [6] で与えられる．
3.2 ユーザインターフェース

TPEG は，解析表現文法の一種であり，宣言的な構文木構

Puppy Playground!のユーザインターフェイスには 2 つ築やシンボルテーブルによる状態管理の拡張が追加されての主要な要素がある．一つは Puppy 言語を記述するソーいる．これらの機能により，Python スタイルのインデンスコードエディタである．シンタックスハイライトや入力ト依存のブロックの構文解析が可能となっている．

候補の表示などの一般的な統合開発環境で提供されている

また，Puppy トランスパイラは，型推論による静的な機能や，全角文字のハイライトやコンパイルエラーを背景型検査をサポートし，簡単な型エラーを検出することがで色の変化でフィードバックするなどのするなどの入門者をきる．

サポートする機能を実装している．また，プログラムの実行と同期して，ソースコードの対応している行がハイライ

3.4 物理エンジン

トされる．ソースコードエディタは Monaco Editor ライブ

Puppy Playground!は，抽象的なプログラム動作を物理ラリを使用しており，API を利用してコーディング支援機現象にマッピングすることで，プログラミング理解を助け能を実現している．

る．これは言い換えると，「時刻 t が変化すると，物体の状もう一つの要素はプログラムの実行結果を視覚的に表示する領域である．HTML5 から導入された 2D グラフィッ
クスを描くことができる canvas タグによって実装されている．Puppy Playground!は，軽量な物理エンジンである態が変わる」という物理モデルの上でプログラムを実行する点である．
物理モデルを実現する手段として，物理エンジンを用いる．

Matter.js*1 を採用している．ソースコードエディタに記物理エンジンを用いれば，物体は，物理法則に基づいて述されたソースコードはトランスコンパイラによっての位置や形状が計算され，刻々と表示されるようになる．つMatter.js API を呼ぶ Javascript へと変換され，実行されまり，何のプログラム記述がなくとも落下するなどの動作

る. Matter.js のレンダリング機能は独自の拡張を加え，変が可能になり，少ない記述量で自然な動きが実現できる．

*1

https://brm.io/matter-js/© 2020 Information Processing Society of Japan260

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

1B-21
2020/3/9

Monaco Editor
UXフレームワーク
オープンソース
Facebook 開発

物理エンジン
オープンソース
Libau氏開発

コードエディタ
オープンソース
Microsoft 開発

PEGPY

JavaScript

Puppy

トランスコンパイラ

解析表現文法パーサ
オープンソース

図 4 Puppy Playground!システム構成図

4. Puppy Playground!によるプログラム動作の可視化
Puppy Playground!では Puppy 言語が Matter.js を用いた JavaScript に変換されることによって Puppy プログラムによる物理シミュレーションを実現している．本節では，Puppy 言語の仕様の一部を紹介するとともに，物理シミュレーションとの連携を用いたプログラム動作の可視化
手法について述べる．

Circle(x,y, **options)

円形の物体を生成する

Rectangle(x,y, **options) 長方形の物体を生成する
物体の物理的な特性は，**options において与える．次の例は，ボールの幅 width=50, 色 color=”red”のボールを生成し，座標 (500,500) に置くことを意味する．
Ball = Circle (500 , 500 , width =50 ,color = " red " )オプションは，オブジェクト生成後，フィールドアクセ
スを通して変更することができる．

4.1 Puppy 言語
Puppy 言語は，人工知能開発の標準言語となった Python

Ball . fillStyle = " blue "Ball . setPosition (x , y )言語の簡易版（サブセット）として設計する．これにより，このような物体操作を通してオブジェクト指向プログラ

Puppy 言語を学ぶことで大学進学後のより専門性の高いプミングの基礎（メソッド呼び出し，プロパティ）を学ぶこ

ログラミング教育にスムーズに連携できる．一方，Pythonとができるようになっている．の簡易版であるが，高校生向けの情報オリンピックの問題を回答できる記述力は持つようにする．これにより，アルゴリズムなどのコンピュータ科学の世界に関心が広がるよ

4.2 プログラム動作の可視化
Puppy ではプログラムの実行と物理エンジンが統合さうにしたい．

れている．この統合を実現するため，図 5 に示すとおり，4.1.1 言語設計

Puppy ではプログラムをいくつかのコード片に分割していPuppy 言語は，限られた学習時間内でコーディングが可る．これらのコード片を時分割された物理エンジンのイベ

能なように，Python の文法やデータ構造，利用可能なラントループ内で実行することによってプログラムと物理シイブラリを制限し，学習負担を軽くしている．

ミュレーションの同期を実現している．

• 制御構造は，if 文と for 文のみである．無限ループを避けるため，while 文をサポートしない．

• データ構造は，論理値，数値，文字列とオブジェクト（物体），それらのリストである.

• 関数定義は，再帰関数やラムダ式を認める
詳細な言語仕様については付録を参照していただきたい．

4.1.2 物体操作によるオブジェクトプログラミング
Puppy 言語は，物理エンジンと統合されたビジュアルプログラミングである．matter.js のライブラリを通して，物さらに，Puppy Playground!ではプログラムの実行中の行がハイライトされるため，実行された行とその実行結果を視覚的に捉えることが可能である．

5. 関連研究
プログラミング教育の重要性が世界的に高まっている
中，子どもたちがプログラミングをスムーズに学ぶことができるように，様々なタイプの教育用プログラミング言語の開発が盛んに行われている．

理エンジン上の物体を直接操作することができる．物体オ

Scratch[1], [2] は，MIT メディアラボが開発した，ビジュブジェクトはコンストラクタで生成し，それと同時に (x,y)

アルプログラミングアプリケーションである．特に 8 歳か座標を与えて配置を行う．

ら 16 歳向けにデザインされており，Web 上で UI が提供© 2020 Information Processing Society of Japan261

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

1B-21
2020/3/9

物理エンジンは、1秒間に60フレームの動画を計算するプログラムは、1秒間に2コード（チャンク）実行される

500 ms

16 ms‥

時刻 t

図 5 物理エンジンとプログラム実行
右側で編集したコードは，左側で実行し動作を確認することができる．

されている．Scratch の特徴は，ブロックを組み立てるこ

Puppy の開発は始まったばかりである．Puppy 言語のとでプログラムを記述するブロックベースの言語という点プログラミング学習に適した言語仕様化，ライブプログラである．マウス操作によって直感的にプログラムが記述でミング等を導入した Puppy Playground!機能の拡張，自然きるため，キーボード操作に慣れていない子どもたちでも言語処理によるコーディング支援など，プログラミング教簡単にプログラミングを体験することができる．

育を研究するプラットホームとして活用する予定である．

ドリトル [3] は，教育用に設計された日本語プログラミ

また，高等学校の教員がすぐに利用しやすいコースウェア

ング言語である．日本の中学校・高等学校の教科書等に採の開発を進め，多くの若者がプログラミングを学びやすい用されており，対象は小学校から大学までとされている．

環境を整えてゆきたい．

ドリトルの特徴は，日本語によるプログラミングを実現している点である．まだアルファベットや英語に慣れていない子どもたちがプログラムを記述しやすいよう配慮されている．

Racket[7], [8] は，関数型プログラミング言語を提供することで，初学者の困難さを解消する狙いである．算数や数学を学んできた中高生にとって，プログラミング特有のx = x + 1 のような代入式の概念を理解することのは難し

謝辞価をいただいた日本女子大学理学部サマースクール 受講生，神奈川県立厚木高等学校大学訪問授業の受講生に感謝する．
参考文献
[1]

い．関数型プログラミング言語を用いることで，代入式の概念を無くし，理解が難しいポイントを減らしている．
また，LEGO Mindstorm[9], [10] や Micro.bit [11] など[2]のハードウェアを提供することで，プログラミング学習をスムーズに進めようとする取り組みもある．現実にある物
理的な物体をプログラムで操ることで，子どもたちのプログラミングに対する興味・関心を引き出すことができる．
さらに，物体の動きを通して実行結果を確認することがで[3]きるので，直感的にプログラムを理解する手助けにもなる．

6. まとめと今後の展望[4]

Puppy は，物理エンジンをベースにしたシミュレーション環境と統合されたプログラミング環境である．プログラ
ムの対象は，実世界をモデル化した物体（オブジェクト）となり，コードとプログラム動作の対応が直感的にわかりやすくなることを目指している．本稿では，Puppy のコンセプトと開発状況を紹介した．

© 2020 Information Processing Society of Japan

Puppy 開発を進めるに辺り，有意義なユーザ評[5]

Resnick, M., Maloney, J., Monroy-Hernández, A., Rusk,N., Eastmond, E., Brennan, K., Millner, A., Rosenbaum,E., Silver, J., Silverman, B. and Kafai, Y.: Scratch: Programming for All, Commun. ACM, Vol. 52, No. 11, pp.
60–67 (online), DOI: 10.1145/1592761.1592779 (2009).
Maloney, J. H., Peppler, K., Kafai, Y., Resnick, M. andRusk, N.: Programming by Choice: Urban Youth Learning Programming with Scratch, Proceedings of the 39th
SIGCSE Technical Symposium on Computer Science
Education, SIGCSE ’08, New York, NY, USA, ACM, pp.
367–371 (online), DOI: 10.1145/1352135.1352260 (2008).
兼宗 進，御手洗理英，中谷多哉子，福井眞吾，久野靖： 学校教育用オブジェクト指向言語「ドリトル」の設計と実装，情報処理学会論文誌プログラミング（PRO），
Vol. 42, No. SIG11(PRO12), pp. 78–90 (2001).
Montemayor, J., Druin, A., Farber, A., Simms, S., Churaman, W. and D’Amour, A.: Physical Programming:
Designing Tools for Children to Create Physical Interactive Environments, Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, CHI’02, New York, NY, USA, ACM, pp. 299–306 (online),
DOI: 10.1145/503376.503430 (2002).
Fagin, B. S. and Merkle, L.: Quantitative Analysis ofthe Eﬀects of Robots on Introductory Computer Science
Education, J. Educ. Resour. Comput., Vol. 2, No. 4 (on-262情報処理学会 インタラクション 2020
IPSJ Interaction 2020

[6]

[7]

[8]

[9]

[10]

[11]

1B-21
2020/3/9line), DOI: 10.1145/949257.949259 (2002).
Kuramitsu, K.: Nez: Practical Open Grammar Language, Proceedings of the 2016 ACM InternationalSymposium on New Ideas, New Paradigms, and Reﬂections on Programming and Software, Onward! 2016,
New York, NY, USA, ACM, pp. 29–42 (online), DOI:
10.1145/2986012.2986019 (2016).
Ramsey, N.: On Teaching *How to Design Programs*: Observations from a Newcomer, Proceedingsof the 19th ACM SIGPLAN International Conference on Functional Programming, ICFP ’14, New
York, NY, USA, ACM, pp. 153–166 (online), DOI:
10.1145/2628136.2628137 (2014).
Yoo, D. and Krishnamurthi, S.: Whalesong: Running Racket in the Browser, Proceedings of the 9th
Symposium on Dynamic Languages, DLS ’13, New
York, NY, USA, ACM, pp. 97–108 (online), DOI:
10.1145/2508168.2508172 (2013).
Lawhead, P. B., Duncan, M. E., Bland, C. G., Goldweber, M., Schep, M., Barnes, D. J. and Hollingsworth,R. G.: A Road Map for Teaching Introductory Programming Using LEGO&Copy; Mindstorms Robots, Working
Group Reports from ITiCSE on Innovation and Technology in Computer Science Education, ITiCSE-WGR’02, New York, NY, USA, ACM, pp. 191–201 (online),
DOI: 10.1145/782941.783002 (2002).
志田駿介，井出真広，倉光君郎： Mindstorms NXT を対象とした Konoha 処理系のコンパクト化，情報処理学会
論文誌プログラミング（PRO），Vol. 6, No. 4, pp. 1–9(2013).
Siever, B. and Rogers, M. P.: Micro: Bit Magic: Engaging K-12, CS1/2, and Non-majors with IoT &#38; Embedded, Proceedings of the 50th ACM Technical Symposium on Computer Science Education, SIGCSE ’19,
New York, NY, USA, ACM, pp. 1237–1238 (online),
DOI: 10.1145/3287324.3287527 (2019).

© 2020 Information Processing Society of Japan

263