PenFlowchart の「他」言語化
中西渉
はじめに

PEN とPenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版

中西渉「多」言語化は困難

おわりに名古屋高等学校

2013 年 10 月 26 日

PenFlowchart の「他」言語化

目次

中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

1 はじめに2 PEN と PenFlowchart

PEN
PenFlowchartxDNCL であること
3 PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難
4 おわりに

PenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

1 はじめに• 教育現場で使うプログラミング言語• 議論は昔から延々と. . .
• 絶対に結論は出ない• 教育用プログラミング言語に関するワークショップ
2006（情報処理学会）
Java，JavaScript，C/C++，Basic，Logo，Lisp，ワンダーボーグ，Squeak eToys，言霊，ことだまon Squeak，なでしこ，ドリトル，Tonyu，PEN，
HSP，Rosetta，Viscuit• 教科「情報」の目的はプログラミング修得ではない↔ アルゴリズム学習にプログラミングは必須

PenFlowchart の「他」言語化
中西渉
はじめに

PEN とPenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

本報告の概要• PenFlowchart の開発
PEN（テキスト型プログラミング環境）のソースコードをフローチャートから生成する• 扱えるプログラミング言語を追加• 実践はまだない

PenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

2 PEN と PenFlowchart
2.1 PEN
2.2 PenFlowchart
2.3 xDNCL であること

PenFlowchart の「他」言語化

2.1 PEN中西渉
はじめにPEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりにPEN とは• 初学者向けプログラミング学習環境
大阪学院大学情報学部西田研究室・大阪市立大学大学院創造都市研究科松浦研究室の共同プロジェクト• 言語 xDNCL（DNCL の拡張）
DNCL:センター試験「情報関係基礎」のプログラミ
ング言語• 日本語ベース…理解は簡単だが入力は面倒→ 入力支援ボタン，インデントの自動挿入• 動作確認，デバグに適した環境変数の値表示，実行速度調整，1 行ずつ実行，. . .

PenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

PEN の実行画面

PenFlowchart の「他」言語化

2.2 PenFlowchart

中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の• PEN には入力支援ボタンがある
正しく使えば楽だし，エラーも少ない…はず• 入力画面は普通のテキストエディタ→ プログラムのブロック構造を破壊してエラー「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版



正


誤（エラー）

「多」言語化は困難

おわりにもし a=0 ならば｜「ゼロ」を表示する
を実行する


もし a=0 ならば「ゼロ」を表示する


PenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに• エラーメッセージも初学者にはわかりにくい• その場所だけ見てもわからない• これでわかるくらいなら，そもそも…

• 何を直していいかわからない→ 全消し・写経モードという「苦行」

PenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること• ブロック破壊によるエラーを防ぐには. . .
→ フローチャートからプログラムが生成できればいいのでは？
→PenFlowchart の開発 (2011)• Java で開発• http://watayan.net/prog/で配布（GPL）

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

整数 aa を入力するもし a=0 ならば｜ 「ゼロ」を表示する
を実行する

PenFlowchart の「他」言語化
中西渉
はじめに

PEN とPenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

PenFlowchart の実行画面

PenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

PenFlowchart の使い方
• パーツをフローチャートにドラッグ＆ドロップ
右クリックで編集など→PEN のソースコードを生成（自動）• PEN のソースを編集 → フローチャートを生成（手動）• PEN の画面で実行

PenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

2.3 DNCL であること
中西・辰己・西田「PenFlowchart によるプログラミング
導入教育の評価」(2013)• PenFlowchart を用いた授業実践
PEN だけの頃に比べて• プログラミング学習の序盤がスムーズに進行• フローチャート・プログラムの構造把握問題で成績向上

おわりに疑問：言語は DNCL でいいのか？
DNCL はもともと試験問題のための擬似言語→ 普通のプログラミング言語と違う

PenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

辰己「JavaScript 高等学校の教室で準備なしに利用可能なプログラミング言語」(2006)「情報 B」教科書でフローチャート・プログラムの数を比較→ 使われている言語により傾向が異なる
フローチャート > プログラム VB，BASIC，Pascal 風フローチャート ≤ プログラム DNCL 風教科書の著者はこう考えているのでは？
• フローチャートはプログラムよりやさしい• DNCL 風言語はアルゴリズム記述言語

PenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

PenFlowchart はフローチャート ↔DNCL→ アルゴリズム記述方法の間での変換にすぎない？
→ 他言語とフローチャートの組合せだとどうか？
→PenFlowchart を他言語に対応させる実装が必要PenFlowchart の「他」言語化
中西渉
はじめに

PEN とPenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

3 PenFlowchart の「他」言語化
3.1 C++版の作成
3.2 PEN の改造
3.3 BASIC 版の作成
3.4 JavaScript 版
3.5 「多」言語化は困難

PenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版

3.1 C++版の作成「情報の科学」教科書で用いられるプログラミング言語
出版社
実教出版
数研出版
東京書籍
日本文教出版

言語VBA?（巻末で VBA）
ドリトル，JavaScript
JavaScript「多」言語化は困難

おわりにVBA，JavaScript の学習に繋がる言語→ 構造化，入出力，配列，. . .
とりあえず C++版を作成• C の printf や scanf は型に応じて書式が違う• C++の cin や cout を使えば型を気にしなくていいPenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

PenFlowchart for C++ の実行画面

PenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりにC++版は使い物にならない• フローチャート → コードはできるが，コード → フローチャートができない• 構文解析が必要• xDNCL では PEN の構文解析機能を利用• 実行ファイルをどうやって作る？
コンパイラを内蔵？インストール？
← どちらも非現実的PenFlowchart の「他」言語化
中西渉

3.2 PEN の改造

はじめに• コンパイラを必要とする言語は，用意が大変

PEN と
PenFlowchart• 言語に合わせたパーサを書くのは大変
例：BlockEditor は相互変換のために構文木生成

PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに• インタプリタを実装？
→PEN のトレース機能を作り直すのは大変
デバガを作るようなもの

PenFlowchart の「他」言語化

PEN で他言語を扱えれば解決するのでは？

中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりにjavacc,jjtree

構文定義ファイル −−−−−−−−→ パーサの Java コード• 定義ファイルを他言語用に作りなおせばいいだけ• PEN の機能がそのまま使えるPenFlowchart の「他」言語化

3.3 BASIC 版の作成

中西渉
はじめに

構文定義ファイルは INTVParser.jjt

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難おわりに

DNCL

BASIC
《変数》を入力する
INPUT 《変数》
<INPUT:"を入力する"> <INPUT:"INPUT">
InputStat() :InputStat() :{}{}{ Ident() <INPUT> } { <INPUT> Ident() }これで INPUT A が可能になる
こんな単純な置き換えで済むのは INPUT くらいしかな
かったのだけどPenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

PenFlowchart for BASIC の実行画面

PenFlowchart の「他」言語化
中西渉

実装したもの
• DIM

はじめに

• LET

PEN と
PenFlowchart• PRINT

PEN
PenFlowchartxDNCL であること• INPUT

PenFlowchart の• IF〜END IF「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに• FOR〜NEXT• DO WHILE(UNTIL)〜LOOP• DO〜LOOP WHILE(UNTIL)

PenFlowchart の「他」言語化
中西渉

実装していないもの• コマンド呼び出しにカッコは必要？

はじめに• 配列の添字は [] のまま？

PEN とPenFlowchart• SWITCH

PEN
PenFlowchartxDNCL であること• 配列の代入（これは PEN にもほしい）

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

教科書そのままの実行は無理• 配列は 0 から？ 1 から？
• セルとの値のやり取り• 実教出版はセルを配列として使用

PenFlowchart の「他」言語化

3.4 JavaScript 版

中西渉
はじめに

PEN と
PenFlowchart

原稿提出時は未着手 (10/16)→ なんとか作ってみた (10/19)

PEN
PenFlowchartxDNCL であること• フローチャート ↔ コード

PenFlowchart の• HTML ファイルを出力「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに• 実行はブラウザで

PenFlowchart の「他」言語化
中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりに

PenFlowchart for JavaScript の実行画面PenFlowchart の「他」言語化

JavaScript のプログラミング環境としての比較

中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版「多」言語化は困難

おわりにHTML のタグ
大文字小文字
実行のトレース
配列の代入

テキストエディタ
手入力
間違えるとエラー
ブラウザ次第できる

PenFlowchart
自動挿入自動挿入
ブラウザ次第未実装
できるPenFlowchart の「他」言語化

3.5 「多」言語化は困難

中西渉
はじめに

理想は. . .

PEN とPenFlowchart

xDNCL

PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化
C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版

共通のフローチャート

BASIC「多」言語化は困難

JavaScript

おわりに実際は. . .
• 言語ごとの違いが大きすぎる
入力のプロンプト，ループの構文，変数の型，. . .
• 言語にあわせて特化するしかない？
• 差異を吸収する → 構文解析が必要

PenFlowchart の「他」言語化

4 おわりに

中西渉
はじめに

PEN と
PenFlowchart
PEN
PenFlowchartxDNCL であること

PenFlowchart の「他」言語化

PenFlowchart の「他」言語化は始めたばかり• 不具合が多い（はず）• 未実装の機能• BASIC 文法の細部が未定

C++版の作成
PEN の改造BASIC 版の作成
JavaScript 版→ ぜひとも意見を！

「多」言語化は困難

配布先： http://watayan.net/prog/

おわりにPEN という名前…
xDNCL は使っていなくても，PEN の Programming
Environment for Novices としての機能を使っている