Web ブラウザ上のプログラミング学習環境
WaPEN における関数・手続きの実装
中西渉
watayan@meigaku.ac.jp
名古屋高等学校

全国高等学校情報教育研究会 和歌山大会
2019 年 8 月 11 日

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

1 / 27

1

はじめに

2

DNCL の実行環境
PEN，PenFlowchart
WaPEN
どんくり

3

WaPEN への関数・手続きの実装

4

おわりに

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

2 / 27

はじめに

1

はじめに

2

DNCL の実行環境
PEN，PenFlowchart
WaPEN
どんくり

3

WaPEN への関数・手続きの実装

4

おわりに

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

3 / 27

はじめにはじめに必履修教科「情報」（2003〜）. . . 科目は選択
情報 A・情報 B・情報 C
社会と情報・情報の科学

プログラミングは避けられがち
必履修科目「情報 I」（2022〜）(1)「情報社会の問題解決」(2)「コミュニケーションと情報デザイン」(3)「コンピュータとプログラミング」(4)「情報通信ネットワークとデータの活用」
高校生全員がプログラミング中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

4 / 27

はじめに勤務校の話
プログラミング学習を実施（2004〜）

PEN を使用（2006〜）
PEN を補助するツールの開発
PenFlowchart（2011〜）
WaPEN（2018〜）

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

5 / 27

はじめに

本発表の要旨WaPEN に関数・手続きを実装
細かい改良
自動採点機能中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

6 / 27

DNCL の実行環境

1

はじめに2DNCL の実行環境
PEN，PenFlowchart
WaPENどんくり

3

WaPEN への関数・手続きの実装

4

おわりに中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

7 / 27

DNCL の実行環境

DNCL の実行環境
DNCL…センター試験「情報関係基礎」作問用擬似言語
DNCL のプログラム例a ← 24b を 1 から a まで 1 ずつ増やしながら，｜もし a%b=0 ならば｜｜ b を表示する｜を実行するを繰り返す中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

8 / 27

DNCL の実行環境

PEN，PenFlowchart

PEN，PenFlowchart
PEN 大阪で開発された初学者向けプログラミング学習環境
PenFlowchart PEN にフローチャートをくっつけたもの
Java アプリケーション→ 多くの OS で動く→ 最近は敬遠される傾向
自分の思うソフトウェアがインストールできないことも中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

9 / 27

DNCL の実行環境

PEN，PenFlowchart

PEN の画面中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

10 / 27

DNCL の実行環境

PEN，PenFlowchart

PenFlowchart の画面

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

11 / 27

DNCL の実行環境

WaPEN

WaPEN
PenFlowchart とほぼ同じ環境を Web ブラウザ上で実現
Web-aided PEN

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

12 / 27

DNCL の実行環境

どんくり

どんくり
Bit Arrow. . . Web ブラウザ上のプログラミング学習環境
JavaScript，C，DNCL（どんくり），Python に対応
DNCL の仕様にはもっとも忠実（？）

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

13 / 27

WaPEN への関数・手続きの実装

1

はじめに

2

DNCL の実行環境
PEN，PenFlowchart
WaPENどんくり

3

WaPEN への関数・手続きの実装

4

おわりに

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

14 / 27

WaPEN への関数・手続きの実装

WaPEN における関数・手続きの実装
次期学習指導要領「情報 I」. . . 関数の定義・使用によりプログラムの構造を整理するとともに，性能を改善する工夫の必要性についても触れるようにする。
（「内容の取扱い」より）

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

15 / 27

WaPEN への関数・手続きの実装

関数の定義手続きの定義

関数 《関数名》(《引数》)｜…
｜《値》を返す｜…
関数終了

手続き 《手続き名》(《引数》)｜…
｜手続きを抜ける｜…
手続き終了

関数は値を返さなくてはいけない DNCL でいう「値を返さない関数」
いずれも呼び出すときは () を最後につける（引数がなくても）中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

16 / 27

WaPEN への関数・手続きの実装

関数の使用例

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

17 / 27

WaPEN への関数・手続きの実装

手続きの使用例

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

18 / 27

WaPEN への関数・手続きの実装

細かい改良「変数を確認する」を実装
配列が等しいかを比較できるようにした

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

19 / 27

WaPEN への関数・手続きの実装「変数を確認する」の例

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

20 / 27

WaPEN への関数・手続きの実装

配列の比較の例

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

21 / 27

WaPEN への関数・手続きの実装

自動採点

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

22 / 27

おわりに

1

はじめに

2

DNCL の実行環境
PEN，PenFlowchart
WaPEN
どんくり

3

WaPEN への関数・手続きの実装

4

おわりに

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

23 / 27

おわりにおわりに
WaPEN の配布先（GitHub の方がおすすめ）
筆者のサイト https://watayan.net/prog/
GitHub https://github.com/watayan/WaPEN.git
インストール方法

git clone https://github.com/watayan/WaPEN.git
cd WaPEN
copy sample.js-dist sample.js
copy answer.js-dist answer.js
更新方法

git pull

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

24 / 27

おわりに自分のサイトに置くのがおすすめ → レンタルサーバとかファイルを置くだけで使えるサンプルとか自由に変えられる
他にもいろいろ置いちゃえばいい
そのために開発

MakeSample サンプルプログラムの差し替え
MakeAnswer 自動採点問題・解答の差し替え
Qt だからいろいろな OS に対応
Windows 用インストーラは筆者のサイトに

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

25 / 27

おわりに

MakeAnswer，MakeSample の画面（ほぼ同じ）

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

26 / 27

One more thing...
こういうの需要あるかなぁ. . .
関数 prime(a)：｜整数 n｜もし a=1 ならば：｜｜ false を返す｜n←2｜ n<a の間繰り返す：｜｜もし a%n=0 ならば：｜｜｜ false を返す｜｜ n ← n+1｜ true を返す
prime(20190811) を表示する

中西渉 (名古屋高等学校)

WaPEN における関数・手続きの実装

2019 年 8 月 11 日

27 / 27