DNCL の Web 上での実行環境の開発
PEN の HTML5 化を目指して
愛知県 名古屋高等学校 中西渉
DNCL の実行環境としては PEN や PenFlowchart が使われているが，いずれも Java のラインタイムライブラリを必要とするため，あらゆる環境で使用できるとは限らない。そこで実行環境を JavaScript で実装することにより，Web ブラウザで実行することが可能になると考えている。当日までにどの程度まで実装できるかはわからないが，これを公開することで今後の開発の方向性を検討したい。

1. はじめに高校の次期学習指導要領はまだ公表されてはいないが，文部科学省中教審の答申(1)では情報科については必履修科目を「情報 I」に一本化し，その中でプログラミングが扱われるとされている。つ
まりすべての高校生が情報でプログラミングを学習することになる。
現在発行されている「情報の科学」の教科書で取り上げられているプログラミング環境といえばExcel の VBA，JavaScript，ドリトルであるが，これらは多くの学校の情報教室のパソコンでそのまま使えることがその理由の 1 つだと考えられる。
ドリトルは Java を必要とするが，Windows 版の配布ファイルには Java が同梱されているし，後述する Bit Arrow 上のドリトルを使えばそれは問題にならない。
筆者は大学入試センター試験「情報関係基礎」
で用いられている DNCL の実行環境である PENを授業で用い，これにフローチャートでプログラムを作成する機能を付け加えた PenFlowchart を開発した。これらは Java のランタイムライブラ
リがあれば OS を問わず実行することができる。
しかし学校によっては，担当者の判断では新しいソフトウェアを導入できないなどの理由で，それを使えない環境もあると聞いている。
そこで，DNCL をウェブブラウザ上で実行できるプログラミング学習環境を作れば，ソフトウェアを自由にインストールできない環境であってもDNCL によるプログラミング学習ができると考え，開発を開始した。

2. 先行研究2.1 DNCL の実行環境
DNCL の実行環境としては大阪学院大学西田研究室と大阪市立大学大学院松浦研究室で開発された初学者向けプログラミング学習環境 PEN(3)や，それにフローチャートでプログラムを生成する機能を付け加えた PenFlowchart(4)が使われてきた。これらはともに Java アプリケーションなので，実行するためには Java のランタイムライブラリを必要とする。また，これらは純粋なDNCL でなく，それを拡張した xDNCL に準拠している。

2.2 Web 上のプログラミング学習環境
オンラインのプログラミング学習環境にはいろいろなものがある。たとえば paiza.IO(5)は多くの言語に対応していて，エディタも関数やコマンドの候補を表示するなど使いやすいものである。
Scratch(6)や Viscuit(7)は校種を問わず利用されており，ワークショップも多く開催され，学習支援システムなども開発されている(8)。これらはFlash アプリケーションであるが，Scratch3.0 はHTML5 により実装される予定であるらしい。
Bit Arrow(2)(9)はウェブブラウザ上で動作するプログラミング学習環境であり，JavaScript，ドリトル，簡易 C に対応している。作成したプログ
ラムはサーバ上に保存され，容易に実行結果を確認することができる。
DNCL についても，九州工業大学で Ruby による実装を行ったり，CGI によってウェブブラウザ上で実行できる環境を構築したりした形跡があるが，今は一般に公開されている様子ではない。

3.

本システムについて

3.1 概要本システムは DNCL のプログラムを Web ブラウザ上で実行できる環境を JavaScript だけで構築したものである。
したがって Web サーバではデータベースや CGI，PHP などの設定をする必要はなく，必要なファイルを配置するだけでプログラミング学習環境を提供できる。
構文解析は Jison（Bison 風の JavaScript 用パーサジェネレータ）で生成したパーサで行っている。開発は ES2015 に基いて行っているが，そのままだと実行できないブラウザ（IE11 など）があるので，Babel で ES5 にトランスパイルしている。

3.2 実行イメージ
実行画面の例を図 1 に示す。左側のテキストエ
リアがプログラム編集用，右側が実行結果表示用である。Run ボタンで実行，Step ボタンで（不完全ながら）ステップ実行を行う。
作成したプログラムは Download でローカルマシンにダウンロードして保存することができる。
そのプログラムは Upload で読み込ませることもできる。
画面下部にはプログラムの構文の雛形を入力できる「入力支援ボタン」やサンプルプログラムを入力するボタンがある。これらは本システムの該当場所を編集することによって，より適当なものに置き換えることができる。
JavaScript では数値は整数型・実数型というような区別がなく，DNCL の仕様でもその区別があるのかどうかが明確ではないが，本システムでは両者を区別している。
たとえば 11.0/2*2 は 11.0 であるが，11/2*2 は 10 になる。

とえば入力支援については，入力支援ボタンや自動インデントなどを実装したがまだ中途半端である（組み込み関数の入力など）。他にも未実装なものはいくつもある： 実行制御（実行速度調整，一時停止など） 設定変更（変数宣言の要・不要など）
 関数・手続きの実装
 グラフィック，ファイル I/O
実行制御は初学者にとって非常に有用であると考えるし，設定変更は「情報関係基礎」の問題にあるプログラムに取り組むためにはあった方がいいであろう（本来の DNCL では変数宣言は必要ない）。これらの要素のうち，可能なものから順次導入していきたい。PenFlowchart にある，フローチャートとプログラムの変換についても同様である。
本システムは現在のところ，筆者のブログで細々と紹介している状態(10)であるが，状況が整えば GitHub のようなところでも公開することを考えている。
参考文献(1) 文部科学省：幼稚園，小学校，中学校，高等学校及び特別支援学校の学習指導要領等の改善及び必要な方策等について（答申）（2016 年)
(2) 長島和平，長慎也，間辺広樹，兼宗進，並木美太郎：Web ブラウザを用いたプログラミング学
習支援環境 Bit Arrow の設計と評価，情報処理学 会 研 究 報 告 コ ン ピ ュ ー タ と 教 育 (CE)Vol.2017-CE-138, No.2 (2017 年)

引用・参考サイト

図１ 本システムの実行画面

3.3 動作確認環境
当方の手持ちの環境で使える複数のブラウザで動作確認を行った。Google Chrome や Firefox，Windows の IE11 や Edge，Mac OS の Safari などで正常に動作することを確認している。タブレットやスマートフォン上のブラウザでもプログラ
ムの実行は差し支えなくできることが多いが，作成したプログラムのダウンロードがうまくできないことが多いので，あまり実用的ではない。

4. おわりに本システムは開発を始めてまだ半年ほどであり，使い勝手の面では PEN にまだまだ及ばない。た(3) 初学者向けプログラミング学習環境 PEN
http://www.media.osaka-cu.ac.jp/PEN/(4) PenFlowchart
http://watayan.net/prog/#penflowchart(5) paiza.IO http://paiza.io(6) Scratch https://scratch.mit.edu/(7) ビジュアルプログラミング言語 Viscuit
http://www.viscuit.com/(8) コード忍者の里 for Scratch
http://tk2-249-34225.vs.sakura.ne.jp/ncv4s/(9) Bit Arrow http://bitarrow.eplang.jp/(10) 本システムの本稿執筆時点での最新版
http://watayan.net/misc/dncl20170619