Web ブラウザ上のプログラミング学習環境
PyPEN の改良
中西渉1,a)

概要：筆者は高校の情報科の授業で用いるために，大学入試センター「情報関係基礎」で用いられている
プログラミング言語 DNCL の構文表記を Python 風にして，Web ブラウザ上で動作するプログラミング
学習環境 PyPEN を開発した．本稿では，これまでにいただいた意見を元に行った改良について報告を行うとともに，今後の開発方針についての考えを述べる．
キーワード：プログラミング教育，日本語プログラミング，高等学校「情報 I」，HTML5，Python

Improvement of PyPEN
Programming Learning Environment on Web Browser
Wataru Nakanishi1,a)Abstract: I developed PyPEN, a programming learning environment that runs on a Web browser. It uses
a new language similar to Python and DNCL. In this paper, I will report on the improvements based on theopinions I have received so far, and state my thoughts on future development policies.
Keywords: Education of programming, Programming with Japanese, Informatics I, HTML5, Python

1. はじめにに思われる．
筆者はこれまで Web ブラウザ上で動作するプログラミ

コロナ禍の影響でよくわからなくなっているが，今年度ング学習環境である WaPEN[3] を開発してきたが，この流から小学校でプログラミング教育が導入されることになっれに乗って構文を Python 風にアレンジした PyPEN を開ている．高校の情報科でも 2022 年度の学習指導要領改定発した [4]．本稿ではその後 PyPEN に施した改良点およびからは必履修科目「情報 I」で全生徒がプログラミングを今後の開発方針について考えるところを述べる．

学習することになるが，2015 年度の調査ではプログラミン
グが含まれる「情報の科学」を履修している生徒の割合は2 割程度であり，プログラミングを指導してこなかった教員も一定数いると考えられる [1]．

2. PyPEN について
2.1 概要PyPEN は Web ブラウザ上で動作するプログラミング学

文部科学省もこれに対応して教員研修用教材 [2] を提供

習環境であり，初学者向けプログラミング学習環境 PENした．その「情報 I」の教材の第 3 章「コンピュータとプで用いられていたプログラミング言語 xDNCL の構文を，ログラミング」で最初に取り上げられたことや，人工知能

一部 Python 風のインデントで表現するようにしたものでブームなどから，昨今 Python に注目が集まっているようある．動作画面を図 1 に示す．
プログラム入力には画面下部の「入力支援ボタン」を使

1a)

名古屋高等学校
Nagoya Senior High School
watayan@meigaku.ac.jp

うことで，キー入力を大幅に減らすことができる．プログ
ラムはフローチャートを編集することでも作成することが用いられてきた xDNCL を元にしている．筆者は PEN に
フローチャートを付加した PenFlowchart[6] を開発した．
ところで，Python 風にインデントでブロックを表現する
方法は，日本語プログラミング言語「なでしこ」[7] のバー
ジョン 1 で既に用いられていた．バージョン 3 ではブロッ
ク終わりを示す「ここまで」が追加されているが，PyPEN
がインデントによるブロックを処理するために内部で用いている方法はこれに近いものである．

図 1

PyPEN の動作画面

Fig. 1 Screenshot of PyPEN

3.2 Web 上のプログラミング学習環境
PEN や PenFlowchart は Java アプリケーションなので多くの OS 上で動作させることができるが，最近 Java 自体のインストールが敬遠される傾向にあるように思われる．
そこで筆者は PenFlowchart とほぼ同機能のものを Web ブ
ラウザ上で動作できる WaPEN を開発した．
同じ問題をドリトルも抱えていたと思われるが，これも図 2

Python のコードへの変換

Fig. 2 Converting to code for python

Bit Arrow[8] という形で Web アプリケーション化されている．

Scratch[9] は言うまでもなく広い校種で使われているし，
スマートフォン用アプリ開発環境 Monaca[10] を使った実践も多く行われている [11]．

4. PyPEN の改良
以下，PyPEN に対して行った改良点について述べる．
図 3

自動採点

Fig. 3 Auto marking

なお，これらの改良を行うにあたって，PyPEN を Internet

Explorer 11（以下，IE11）で動作させることを断念した．
学校現場では IE11 が使われることは多いようではあるが，でき，逆に「コード→フローチャート」ボタンでプログラ

Microsoft 社自身がネットサービスでの IE11 のサポートをムをフローチャートに変換することができる．ただし自作打ち切って Microsoft Edge への移行を勧めている状況で関数・自作手続きを含むプログラムにはフローチャートはあるから [12]，影響は限定的であると考えている．

対応していない．
「コード→ Python」ボタンは，Python に変換したコードを表示するためのものである（グラフィック命令などにさらに後述するように，配列や辞書に関する文法を一部変更したため，これまで動作していたプログラムが動かなくなる可能性がある．

は非対応）．これはコピーして Python 上で実行することを想定しており，必要なモジュールがあれば import 命令も4.1 演算子の追加・変更

出力するようになっている．変換した様子を図 2 に示す．

これまで PyPEN の演算子は四則演算に限ったものでサンプルプログラムは sample.js というファイルを書あったが，これに&，|，^，~といったビット演算を加えた．

き換えることで差し替えることができる．また answer.js

さらに+←や^←などの複合代入演算子も追加した．

というファイルに問題を設定し，指定した入力に対し期また，代入に←だけでなく=が使えるようにした．←と待通りの出力が得られるかを自動採点することもできる

いう記号は Pascal や Python3.8[13] の代入式で導入され（図 3）．

た:=同様，代入という動作の非対称性を示すために有効だ

PyPEN 自体は JavaScript で作られており，Web サーバと考えているのだが，他の言語の経験がある生徒は代入

またはローカルディスク上にファイルを設置して，ブラウに=を使うことが手癖になっていることもあるので，それザで読み込むことで動作させることができる．

に対応して=でも良いようにしたのである．それに合わせ

3. 先行研究3.1 日本語プログラミング環境
前述した通り，PyPEN の命令などの表記は PEN[5] でて，先に述べた復号代入演算子についても+=といった表記ができるようにしている．なお，比較で用いる=は以前か
ら==にすることもできるようになっている．
文字列はこれまで「」で表すのを標準にしていたが，これa ← [1,1]i を 3 から 50 まで 1 ずつ増やしながら繰り返す：
a に a[-2]+a[-1] を追加する
a を表示する
図 4

フィボナッチ数列の生成

Fig. 4 Generation of Fibonacci numbers

図 5

グラフ描画の例

Fig. 5 Sample of drawing graphでは二分アキのためにインデントのスペースの数を間違えることが考えられるため，""を標準にすることに変更した．
互換性を維持するため「」も使えるようにはしているが，フローチャートからコードを生成するときなどには""を用いるようにしている．
図 6

4.2 配列操作を Python に近づける

URL 生成画面

Fig. 6 Generating URL

これまでは変数に値を代入しなくても参照でき，配列も要求に応じて無条件に延長するようにしていたが，これはPython の振る舞いとは違ったものである．そのため「コード→ Python」ボタンで変換したプログラムが Python で実行できないということが起きていた．

ようにした．実行イメージを図 5 に示す．
現状では Plotly.js の表示用の関数 newPlot が要求するデータを直接渡す構文になっている．グラフの種類別にわ

そこで，値が代入されていない変数の参照や，配列の範

かりやすい構文を用意することも考えられるが，Plotly.js

囲外へのアクセスはエラーになるようにした．その代わりがあまりに高機能であるため，それら一つ一つについて個

Python の append や extend のように，配列の末尾に値を別の構文を用意することはかえって利用の幅を狭めること追加したり配列を連結したりすることができるようにしになると考えた．

た．具体的には「《配列》に《値》を追加する」「《配列》に《配列》を連結する」という構文を追加した．

4.4 URL でのプログラム読み込み

また，配列の添字に-1 などの負数や 2:4 のようなスラ

Bit Arrow は作成したプログラムをサーバに保存し，そイス風のものも指定できるようにした．これを使えば，たれを QR コードなどを用いて共有できるようになっていとえばフィボナッチ数列を生成するプログラムを図 4 のよる．しかし PyPEN はサーバを用意しなくても使えるよう

うに書くことができる．

にしているので，同じ機能を実現することはできない．しところで，Python では区別されているリストと辞書を，かし作ったプログラムを何らかの形で共有する仕組みは用

これまでは PyPEN ではまとめて配列として扱っていた．

意したいと考えたので，URL の GET 文字列でプログラム

しかしそのままでは実装がかえって面倒になると判断したを読み込めるようにした．

ため，PyPEN でも配列と辞書を区別するようにした．そこれは URL の末尾に?code=...の形式で指定するもの

れに対応して，これまで添え字をつければ勝手に配列や辞で，プログラムを zlib で圧縮してから Base64 でエンコー書と解釈していたのを，最低でも空の配列 [] や空の辞書

ドした文字列が続く．ただ，普通の Base64 で使われる+，{} を代入していないと使えないようにした．この変更によ/，=は URL では別の意味で用いられるので，+の代わりり，これまで動いていたプログラムに修正が必要になるこに-，/の代わりに を用い，パディングの=は省略することとがある．

にした（いわゆる Base64URL）．

code を含んだ URL は画面の「URL 生成」ボタンで生
4.3 グラフ機能の強化

成することができるので，それをリンクするような文書を

PyPEN は PEN から引き継いだグラフィック機能を持っ作ることで，ソースコードが入力された PyPEN のページているので，それを使えばグラフ描画が可能ではある．しにユーザを誘導することができる．ただしこれは非常に長かしいちいち座標を計算して描画するのは面倒であるし，初い URL になってしまうことがあり，ブラウザによっては学者にとってハードルが高いものになってしまう．棒グラ

長すぎる URL を受け入れないものがあるということなの

フや折れ線グラフを簡単に書く構文は既に用意してあるが，で，zlib で圧縮した時点で 1500 バイトを超える（つまり非常に貧弱なものである．Monaca では Plotly.js[14] をBase64 エンコードすると 2000 バイトを超える）ようなプ利用して簡単なコードでグラフ描画ができているので [15]，ログラムの URL は生成しないことにした．画面イメージ

PyPEN でも Plotly.js を取り込んでグラフ描画ができるを図 6 に示す．

[TITLE]
最大公約数[QUESTION]
2 つの整数を受け取って，最大公約数を表示しなさい[INPUT]
35
21[OUTPUT]7[INPUT]
527215277
522902525[OUTPUT]
1[TIMEOUT]100
図 7

自動採点の問題・解答ファイルの例

Fig. 7 Example ﬁle for automarking

まうなどの面倒があったので，コードは別ウィンドウを使わずに出力結果表示エリアに表示することにした．また複数の値を表示する場合，それらをコンマ区切りで指定できるようにした（表示は空白区切りになる）．

5. 今後の開発方針について
5.1 構文拡張
PyPEN のプログラミング言語は PEN で用いられてきた
xDNCL に端を発するものであるが，Python 風の構文表
記をすることなどによって既にまったく別のものになっている．たとえば WaPEN のプログラミング言語は xDNCLに近いものであるから，センター試験「情報関係基礎」の問題にあるプログラムをほぼそのまま実行することができるのであるが，PyPEN ではそれは適わない．流通している高校情報科の教材に DNCL 系の言語を採用しているものは（筆者の知る限り）ないのだから，PyPEN のプログ
ラミング言語が DNCL に似た構文にこだわる必要はもはやない．

Python への橋渡しとして PyPEN を用いることを考えれば，むしろ Python にある構文をもっと多く日本語で実現したほうがいいのではないかと考えている．今でも
図 8

MakeAnswer の実行画面

Fig. 8 Screenshot of MakeAnswer

Python に翻訳したコードを出力する機能は実装しているが，たとえば for 〜 in や range に相当するものが用意できれば，より自然な読み替えができるものになる．

4.5 MakeSample, MakeAnswer の Web アプリ化

しかし日本語での適当な表現が思いつかなくて，実装に

サンプルプログラムや自動採点の問題・解答はそれぞれは至っていない．新しい言語なのだから自由に決めていいsample.js，answer.js というファイルに JavaScript の構ことではあるのだが，安直に決めてしまうとそれに縛られ文にしたがって記述するが，これを手作業で編集するのはることになってしまう．たとえばこれまで PyPEN で配列面倒である．そこでこれらのファイルを生成するプログラ

を代入するときには [ ] と { } の両方が使えたが，これはム MakeSample，MakeAnswer を，複数 OS で利用できるよ

この機能を実装するときに片方に決めきれなかったために

うに Qt[16] を用いて開発した [17]．MakeSample は複数のそうなっていたのであり，既に述べた配列関係の仕様変更

PyPEN のプログラムをまとめて sample.js を生成するもにより過去のプログラムの修正を余儀なくされた．このよのであり，MakeAnswer は図 7 のような形式で自動採点のうな「迷い」を極力排除したい．

問題・解答を書いたファイル（拡張子は QUIZ）を用意すれば，それらをまとめて answer.js を生成するものである．

5.2 変数のスコープの見直し

2019 年の情報教育シンポジウムでこれについて述べた

PyPEN では変数のスコープはグローバル変数と関数やところ，「OS を問わず利用できるようにするのであれば，手続き内のローカル変数でしか区別していない．今はグ

Web アプリケーションにした方が良いのではないか」と助

ローバル変数が関数や手続きの中から参照・変更ともにで言をいただいた．Qt で開発した場合，ソースは共通ではきるようになっているが，これでは同じ名前のローカル変あるもののビルドやインストーラは OS ごとに必要である数を使ったときにトラブルを起こしやすくなると考えられし，それほど頻繁に使うプログラムでもないといったことる．おそらく，グローバル変数を変更するには Python のを考慮して，Web アプリケーションに切り替えることにしglobal に相当する指定を求めるよう，変数の管理ルール

た [18]．MakeAnswer の実行画面を図 8 に示す．

を修正する必要がある．

4.6 その他

5.3 構文木の実行について

これまでは「コード→ Python」ボタンで生成した Python

Web ブラウザ上のプログラミング環境の多くは，構文木用のコードを別ウィンドウに表示していたが，それを複数を JavaScript のコードに変換して実行しているという．し開いてしまった場合にどれが最新版かわからなくなってし

かし PyPEN では構文木をそのままたどりながら実行しており，これが実行速度の面で不利であることは否めない．
プログラムの無限ループを中断できるようにするために

setTimeout を使っていた部分を，postMessage を使ったもの [19] に置き換えることで速度向上を図ってはいるが，満足いくものではない．この点は筆者の力量不足によるものであり，引き続き改良を考えていきたい．

5.4 WaPEN へのフィードバック
PyPEN の開発に取り組み始めてから，WaPEN の開発が滞っている．勤務校の授業で用いるものを WaPEN から PyPEN に変えたためにそのようになっているのだが，

PyPEN で行った改良の多くはこれまでの xDNCL のプロ
グラムに影響を及ぼすこともなく，またいくつかの共通するバグフィックスも含まれているので，WaPEN をこのま
まにしておくのは良くないと考えている．
両者の違いは構文解析の部分がほとんどなので，機会をみて WaPEN も大改造を行って同じ機能を持たせられるよ
うにしたい．

6. おわりに
PyPEN でできないことはとても多い．たとえば，なでしこバージョン 3 は Web アプリケーションであるからバー
ジョン 1 のようにローカルファイルの操作はできないが，それでもプラグインによって AJAX や DOM 操作，ローカ
ルストレージなど多くの機能を実現している．PyPEN にはそういった機能はなく，ブラウザの画面に表示されている入力ウィンドウと出力ウィンドウ，若干のグラフィック
がすべてであり，その意味で非常に貧弱なものである．
では PyPEN もそのような「実用的」な機能を備えるべ
きなのだろうか．もちろんそれも一つの方向性ではあるが，あくまでも教育用のプログラミング学習環境として，他の本格的な言語への橋渡しをすることも重要な役割であると筆者は考えている．たとえばドリトルが 1 時間でゲームを 1 つ作る教材 [20] を用意しているように，PyPEN で短時間学習すれば Python に自然と移行できるような教材が必要なのだろう．

PyPEN は GitHub の以下のアドレスで公開している．筆者のサイトにも圧縮したファイルが置いてあるが，GitHubから入手した方が更新などの点で便利だと思われる．

https://github.com/watayan/PyPEN.git
本稿で述べた改良点について，実践に基づく多くの示唆をいただいた井上智香子氏に感謝する．
参考文献
[1]
[2]

文部科学省： 情報教育に関する資料，教育課程部会 情報ワーキンググループ（第 1 回）配布資料 (2015).
文 部 科 学 省：高 等 学 校 情 報 科 教 員 研 修 用
教 材 ，文 部 科 学 省（ オ ン ラ イ ン ），入 手 先⟨https://www.mext.go.jp/a menu/shotou/zyouhou/

detail/1416746.htm⟩ （参照 2020-10-02）.
中西 渉： WaPEN. . . DNCL の Web ブラウザ上の実行環境におけるフローチャートなどの実装，情報教育シン
ポジウム論文集，Vol. 2018, No. 31, pp. 210–214 (2018).
[4]
中西 渉： プログラミング学習艦橋 PyPEN の開発，日本
情報科教育学会第 13 回研究会報告書，pp. 19–22 (2019).
[5]
中村亮太，西田知博，松浦敏雄： プログラミング入門教
育用学習環境 PEN，研究報告コンピュータと教育（CE），
Vol. 2005-CE-081, No. 104 (2005).
[6]中西 渉： PenFlowchart の開発，研究報告コンピュータと教育（CE），Vol. 2012-CE-113, No. 13 (2012).
[7]
くじらはんど： なでしこ：日本語プログラミング言語，（オンライン），入手先 ⟨https://nadesi.com⟩ （参照 202010-01）.
[8]
兼宗 進，並木美太郎，長 慎也： オンラインプログ
ラミング環境ビットアロー（Bit Arrow），大阪電気通信
大学，東京農工大学，明星大学（オンライン），入手先⟨https://bitarrow.eplang.jp/⟩ （参照 2019-05-30）.
[9]
MIT: Scratch–Imagine, Program, Share, (online), available from ⟨https://scratch.mit.edu/⟩ (accessed 2020-1013).
[10] アシアル株式会社： Monaca—すべての人にアプリ開発
を，（オンライン），入手先 ⟨https://ja.monaca.io/⟩ （参照 2020-10-13）.
[11] 和 歌 山 県 教 育 委 員 会： き の く に Ｉ Ｃ Ｔ 教 育高等学校＜共通教科情報科＞プログラミン
グ教育
学 習 指 導 案 ，（ オ ン ラ イ ン ），入 手 先⟨https://www.pref.wakayama.lg.jp/prefg/501100/
ictforum d/ﬁl/kinokuniICT hs.pdf⟩ （参照 2020-10-13）.
[12] Microsoft: Microsoft 365 ア プ リ の Internet Explorer
11 のサポート終了と Windows 10 での Microsoft Edge
レ ガ シ ー 版 の サ ー ビ ス 終 了 ，（ オ ン ラ イ ン ），入 手 先⟨https://blogs.windows.com/japan/2020/08/18/microsoft365-apps-say-farewell-to-internet-explorer-11/⟩ （ 参 照
2020-10-01）.
[13] Hettinger, R.: What’s New In Python 3.8, Python
Software Foundation (online),available from⟨https://docs.python.org/3/whatsnew/3.8.html⟩(accessed 2020-10-13).
[14] Plotly:
PlotlyJavaScript
Open
SourceGraphing
Library,(online),availablefrom⟨https://plotly.com/javascript/⟩ (accessed 2020-1001).
[15] 岡本雄樹，辰己丈夫： 高等学校「情報 I」の研修資料を
JavaScript 言語で実施するうえでの検討，情報処理学会研究報告 コンピュータと教育（CE），Vol. 2019-CE-151,
No. 3 (2019).
[16] The Qt Company: Qt Cross–platform software development for embedded & desktop, (online), available from⟨https://www.qt.io/⟩ (accessed 2019-05-29).
[17] 中西 渉： Web ブラウザ上のプログラミング学習環境
WaPEN の改良，情報教育シンポジウム論文集，Vol. 2019,
pp. 130–135 (2019).
[18] watayan:
WaPENTools, (online), available from⟨https://github.com/watayan/WaPENTools⟩ (accessed2020-10-01).
[19] Baron, D.: setTimeout with a shorter delay, (online),available from ⟨https://dbaron.org/log/20100309-fastertimeouts⟩ (accessed 2020-10-02).
[20] 兼宗 進： 1 時間で学ぶソフトウェアの仕組み，（オンライン），入手先 ⟨https://dolittle.eplang.jp/d1h⟩ （参照2020-10-02）.
[3]