DNCL の Web 上での実行環境の開発
中西渉1,a)

概要：大学入試センター試験「情報関係基礎」で用いられるプログラミング言語 DNCL の実行環境としてPEN や PenFlowchart が使われてきたが，インストールが必要なことや，Java のランタイムライブラリを必要とすることなどが，利用の妨げとなるケースがある．そこで Web ブラウザで使えるような実行環境をJavaScript で開発することによって，広く利用できる状況を作ろうと考えている．まだ完成には遠いが，現状を公開することによって今後の開発方針を考えたい．
キーワード：プログラミング教育，DNCL，JavaScript，HTML5

Development of DNCL’s Execution Environment on the Web
Wataru Nakanishi1,a)Abstract: PEN and PenFlowchart have been used as the execution environment of DNCL, but it is necessary to install it and Java runtime library. That sometimes hinder to use it. Therefore, by developing
an execution environment that can be used in a Web browser with JavaScript, I am planning to create awidely available situation. Although it is still far from completion, I would like to think about the future
development policy by publishing the current situation.
Keywords: Education of programming, DNCL, JavaScript, HTML5

1. はじめにしている様子が見受けられる．
プログラミング学習のための言語としてさまざまなも学校現場はプログラミング導入に向けて試行錯誤していのがあるが，筆者は大学入試センター試験「情報関係基る．平成 32 年度から施行される小学校の学習指導要領 [1]礎」で用いられている擬似言語 DNCL [3] に着目している．

では，総則において「児童がプログラミングを体験しながDNCL の実行環境としては PEN[4] や PenFlowchart[5] がら，コンピュータに意図した処理を行わせるために必要な使われている．しかし，これらはともに Java のランタイム論理的思考力を身に付けるための学習活動」を計画的に実ライブラリを必要とするし，実行ファイルをインストール施することが求められている．高校の学習指導要領はまだしなくてはいけない（圧縮ファイルを展開するだけではあ

成文化されていないが，中教審答申 [2] によれば，今までるが）．昨今 Java の不具合が多く見受けられることから，「社会と情報」「情報の科学」から選択必履修であったもの

Java をインストールすることが敬遠されることもある．

が，共通必履修科目「情報 I」となり，その中でプログラ

そこで，筆者はウェブブラウザ上で DNCL を実行できミングが扱われるとされているので，全高校生が情報科でる環境（以下「本システム」と表記する）の開発に着手しプログラミングに触れることになる．そういった状況の変た．本稿では本システムの概要について述べる．

化に対応するため，適したプログラミング学習環境を模索

1a)

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

2. 先行研究2.1 DNCL の実行環境
前述した通り，DNCL の実行環境としては PEN や Pen-Flowchart が使われている．PEN は大阪学院大学情報学

たパーサを用いている．Jison は JavaScript で使用できる部西田研究室と大阪市立大学大学院創造都市研究科松浦研

パーサを生成するパーサジェネレータであり，文法定義究室の共同プロジェクトとして開発されている，初学者向ファイルの構文などいろいろな点で Bison に似ている．実

けプログラミング学習環境である．単にプログラムの実行際，筆者が Jison の使い方を調べるために参考にした書籍ができるだけでなく，入力支援ボタンや自動インデントなは [11] である．

どのプログラム入力支援機能や，実行速度調整やステップ開発は ES2015 で行っているが，そのままだと Internet実行などの実行制御機能を備えている．PenFlowchart はExplorer 11 などのブラウザでは作動しないので，Babel でフローチャートを作ることでプログラムを生成する機能をES5 にトランスパイルしている．

PEN に付け加えたものである．
また，山藤は DNCL の実行環境を Ruby で実装したが [6]，3.3 DNCL への準拠

広く公開されている様子ではないと思われる．

本システムは大学入試センターが示した DNCL の仕様
よりも，むしろ PEN においてそれを拡張した xDNCL の

2.2 Web ブラウザ上のプログラミング学習環境仕様 [12] にしたがっている．純粋な DNCL では「入力」

Bit Arrow[7][8] は Web ブラウザから利用できるプログが定義されていないし，LOOP〜UNTIL 型のループもな

ラミング学習環境であり，JavaScript，ドリトル，簡易 Cいので，それらを備えた xDNCL を使った方がプログラに対応している．作成したプログラムはサーバ上に保存さミング学習を行う上で自由度が高いと考えているからでれ，容易に実行結果を確認することができる．これは非常ある．ただし，いくつかの点で xDNCL の通りではなく，に優れたシステムであり，もし Bit Arrow が DNCL をサ

PenFlowchart で加えた変更を踏襲している．具体的には，ポートすることになれば本システムは不要かもしれない

入力を「《変数》← input()」でなく「《変数》を入力する」と考えている．ただし本システムには，必要なファイルをにしていること，「そうでなくもし」（else-if に相当する）Web サーバに置くだけで環境が整うという簡便さがある．

をサポートしていないことである．

Scratch は校種を問わず広く用いられている．現在公開

DNCL では変数宣言は本来不要であり，変数に値を代入されている Scratch2.0 は Flash アプリケーションであり，することで初期化されることになっている．PEN では設

Java 同様 Flash のランタイムを利用することに抵抗がある

定ファイルで変数宣言の要・不要を切り替えることができ人も多いが，Scratch3.0 は HTML5 のアプリケーションとる（PenFlowchart は変数宣言必須で変更できない *1 ）．本

して開発される予定だということである [9]．

システムは現状では変数宣言が必要だとしているが，設定PEN も 2009 年に Web ブラウザ上で実行できるようにJava アプレット版を提供したが，2014 年には対応を終了

ファイルを置くことによって動作を変えられるようにするべきだろうと考えている．

している．

3. 本システムについて
3.1 概要JavaScript は変数の数値型に整数・実数の区別がなく，DNCL の仕様にもその違いの扱いについては明確な記述がない．しかし本システムではすべての値が型情報とともに扱われるようにし，整数どうしのわり算では余りを切り捨

本システムは JavaScript のみで実装した DNCL の実行環てるなどの処理をしている．そのため，たとえば 11.0/2*2境である．そのため，Web サーバでデータベースや PHP，は 11.0 であるが，11/2*2 は 10 になるし，整数の計算は実CGI などの設定をすることなく，必要なファイルを配置す数の計算よりも小さい値でオーバーフローする．

るだけでプログラミング学習環境を用意することができる．

既に述べたように，「情報関係基礎」のプログラミングの現在発行されている高校の情報の教科書では DNCL を演習を行うためには本システムが DNCL に完全には準拠用いているものはないので，高校でこれを用いた実習を行していない点に注意しなくてはいけない．たとえば「そううためには独自にテキストを用意する必要がある．筆者はでなくもし」は平成 27 年度の本試験のプログラムに使わ勤務校で作成したテキストを Web で公開している．

れており，これを避けるには「もし」のネストを一段深く

大学入試センター試験「情報関係基礎」では選択問題にする必要がある．

DNCL を用いたプログラミングがあるので，その問題演習に使うといった用途も考えられる．しかし 3.3 に述べるよ3.4 実行画面

うに，DNCL には完全に準拠していないため，一部書き換えて対応する必要がある．

Microsoft Edge で本システムを実行したときの画面を
図 1 に示す．左側のテキストエリアがプログラム編集用，右側が実行結果表示用である．

3.2 開発DNCL のプログラムの構文解析には Jison[10] で作成し*1インストールを簡単にするために，実行ファイルだけで動くようにしたためである．

表 1

動作確認

Table 1 Operation check
OSブラウザWindows 10

Internet Explorer 11○

Microsoft Edge○

Google Chrome○

Mozilla Firefox○

Internet Explorer 11○

Google Chrome○

MacOS Sierra

Safari○Debian GNU/Linux jessie

Google Chrome○

Mozilla Firefox○

Konqueror△

Google Chrome OS

Google Chrome○

Android 7.0.0

Google Chrome△

Android 6.0.1

Google Chrome○

iOS 10.3.1

Safari△Windows 7

図 1

スナップショット

Fig. 1 Snapshot

Parse ボタンで構文解析結果の表示 *2 ，Run ボタンで実行，Reset ボタンで実行結果の初期化，Step ボタンで（不完全ながら）ステップ実行を行う．
作成したプログラムは Download でローカルマシンにダウンロードして保存したり，ローカルマシンにあるプログラムを Upload で読み込ませたりすることができる．
画面下部のボタンは PEN の入力支援ボタンにあたるものであり，分岐やループで用いる構文を入力できる．ボタンで入力されたプログラムは変数や値にあたる部分が「《変数》」「《値》」となっているが，これをクリックすれば選択状態になるのですぐに入力ができる．また，インデントもある程度は自動的に行えるようになっている．

3.5 動作確認
いくつかのブラウザで本システムの動作確認を行った．
結果を表 1 に示す（○は正常に動作した，△はプログラムの実行はできたがダウンロードができなかったことをそれぞれ表す）．

4. おわりに本システムは開発を始めてまだ半年であり，多くの点でPEN に及んでいない．たとえば• 実行制御（実行中の変数の値表示，実行速度調整，一時停止など）• 設定変更（変数宣言の必要・不必要の切り替えなど）• 関数・手続きの作成• グラフィック，ファイル I/Oなどが未実装であるし，入力支援機能もまだ中途半端である．また，PenFlowchart にある，フローチャートとプログラムの変換も未着手である．今後，それらの要素を取捨選択して実装を進めたいと考えている．
また本システムに良い名前をつけたい．これは PEN にフローチャートを付け加えたソフトウェアに ‘PenFlowchart’*2

これは開発中だからデバッグのためにつけてあるものであり，必要がなくなれば除去する予定である．という安直で長い名前をつけてしまったことへの反省によるものである．
参考文献
文 部 科 学 省：学 習 指 導 要 領 等 ，（ オ ン ラ イ ン ），入 手 先 ⟨http://www.mext.go.jp/a menu/shotou/newcs/1384661.htm⟩ （参照 2017-05-24）.
[2]
文部科学省：幼稚園、小学校、中学校、高等学校及び特別支援学校の学習指導要領等の改善及び必要な方策等について (答申) (2016).
[3]
独立行政法人大学入試センター：センター試験用手順
記述標準言語 (DNCL) の説明，（オンライン），入手先⟨http://www.dnc.ac.jp/albums/abm.php?f=abm00004841.pdf&n=H23 dncl.pdf⟩ (2011).
[4]
中 村 亮 太 ，西 田 知 博 ，松 浦 敏 雄：初 学 者 向 け プ ロ
グ ラ ミ ン グ 学 習 環 境 PEN，（ オ ン ラ イ ン ），入 手 先⟨http://www.media.osaka-cu.ac.jp/PEN/⟩ （参照 201705-24）.
[5]
中 西 渉：自 作 プ ロ グ ラ ム ，（ オ ン ラ イ ン ），入 手 先⟨http://watayan.net/prog/⟩ （参照 2017-05-24）.
[6]
山 藤 唯：大 学 入 試 セ ン タ ー DNCL の 実 行 環 境 の開 発 ，九 州 工 業 大 学 卒 業 論 文 ，（ オ ン ラ イ ン ），入手 先 ⟨http://www.melt.kyutech.ac.jp/2011 santou.pdf⟩(2011).
[7]
兼宗 進，並木美太郎，長 慎也：オンラインプログラ
ミング環境 ビットアロー (Bit Arrow)，（オンライン），入手先 ⟨http://bitarrow.eplang.jp⟩ （参照 2017-05-24）.
[8]長島和平，長 慎也，間辺広樹，兼宗 進，並木美太
郎：Web ブラウザを用いたプログラミング学習支援環境
Bit Arrow の設計と評価，情報処理学会研究報告 コン
ピュータと教育 (CE)，Vol. 2017-CE-138, No. 2 (2017).
[9]: Scratch 3.0, MIT Media Lab. (online), available
from⟨https://wiki.scratch.mit.edu/wiki/Scratch 3.0⟩
(accessed 2017-05-24).
[10] Carter,Z.:Jison,(online),available from⟨https://github.com/zaach/jison⟩(accessed201705-24).
[11] Donnelly, C.，Stallman, R. M.，石川直太（翻訳）：Bison
入門，アスキー (1999).
[12] 中 村 亮 太 ，西 田 知 博 ，松 浦 敏 雄：xDNCL 仕 様 書 ，（ オ ン ラ イ ン ），入 手 先 ⟨http://www.media.osakacu.ac.jp/PEN/#!manual/xdncl.md⟩ （参照 2017-05-24）.

[1]