フローチャートによるプログラミング実習
名古屋高等学校
日本情報科教育学会

中西渉

watayan@meigaku.ac.jp

東海・中部支部設立総会

ば実習ができることが理由の一つであろう。しか1 PEN，PenFlowchart

し，実際に授業で扱うにはいくつかの問題がある。
たとえば [7] で最初に掲載されているプログラムは，PEN という初学者向けプログラミング学習環境

次のように 103 − 62 を計算するものである。

がある [1, 2]。大学入試センター試験「情報関係基keisan.html

<html><body><script> document.write(103-62);</script></body></html>

礎」で使われている言語を元にした xDNCL という言語を用いており，入力支援ボタンを使うことでキー入力をかなり減らすことができる。

xDNCL のプログラム例

整数 a, ba を入力する
b ← a % 2
もし b = 0 ならば｜「偶数」を表示するを実行し，そうでなければ｜「奇数」を表示するを実行する2014 年 3 月 16 日

プログラム本体は 4 行めのたった 1 行なのであるが，それとは別に HTML のタグを前後にいくつも書かなくてはいけない*1 。これは初学者にとって意味不明であったり，煩わしかったりするものではな

筆者は，マウス操作でフローチャートを作ることいだろうか。また，行末のセミコロン忘れや，大文で PEN のプログラムを生成するプログラミング学

字小文字の間違いによるエラーも頻発することが予

習環境 PenFlowchart を開発して，勤務校で授業を想される*2 。このような，本質的でないことで授業行なってきた [3, 4]。これを導入した学校でそれ以の進行が妨げられるのは不本意であるし，生徒が投前との比較を行なった結果，授業の進行や成績に好げ出してしまったり「写経モード」に入ってしまっ影響を与えることが認められた [5]。

たりする要因は取り除いておきたい。

新課程の「情報の科学」の教科書にはプログラミ

PenFlowchart を使えばフローチャートからコーングの実習があるが，xDNCL を用いているものはドが自動生成できるし，PEN のエディタ画面でもないので，PenFlowchart を使うのであれば独自教入力支援ボタンを使うことで関数のスペルミスなど材を作らなくてはならない。それは負担が大きいのを防ぐことができる。それによって，生徒がプログで，PenFlowchart を BASIC，JavaScript に対応

ラムやアルゴリズムそのものを考えることに集中でさせたものを開発した [6]。本ワークショップではきることを期待している。

JavaScript 版を使用する。

2 JavaScript を授業で使うにあたって*1 [8] の最初のプログラムは script タグだけだが，その後JavaScript が一部の教科書 [7, 8] で取り上げられではさらに多くのタグが使われている。ているのは，テキストエディタとブラウザさえあれ*2 また，生徒は意外なほどに（いわゆる）半角・全角の違いに鈍感だという実感がある。

1

みよう。プログラムは主に [7, 8] から抜粋した。な

3 ワークショップ

お，フローチャートは PenFlowchart から画像形式で出力したものである。

PenFlowchart のプログラムおよびソースは筆者のサイト http://watayan.net/prog/で配布して4 おわりにいる (GPL)。実行には Java のランタイムライブラリが必要であるが，それがあれば Windows や本プログラムはまだできたばかりであり，思わぬMac，Linux などでも使うことができる。

バグがまだまだ潜んでいると思われる。構文解析にこのサイトにある不適当な部分があるのは認識しており，全面的な見PENJSFlowchart.(バージョン番号).zip直しをしているところなのだが，本ワークショップをダウンロードし，展開したら*3には間に合わなかった。使い勝手についても改善す

PenJSFlowchart.jar

べき点が多くあると思われるので，気がついたことをダブルクリックすることで実行できる（OS の設があればどんどん報告していただきたい。

定によっては.zip や.jar が表示されない場合があ参考文献る）。レジストリなどは使用しないので，不要になればこれらのファイルを削除すればよい。

[1] 中村亮太, 西田知博, 松浦敏雄. 初学者向け

実行すると，PenFlowchart と PEN の二つの画

プログラミング学習環境 PEN. http://www.

面が開く。PenFlowchart の画面での操作は次の通media.osaka-cu.ac.jp/PEN/.

りである。

[2] 中村亮太, 西田知博, 松浦敏雄. プログラミング
入門教育用学習環境 PEN. 情報処理学会研究報• 画面上部のパーツを下部のフローチャートの縦

告 コンピュータと教育（CE）, Vol. 2005-CE-

棒のところにドラッグ&ドロップする。

081, No. 104, 10 2005.

• フローチャート上のパーツを右クリックして出[3] 中西渉. PenFlowchart の開発. 情報処理学会

るメニューで編集，削除などを行なう。

研究報告

フ ロ ー チ ャ ー ト を 変 更 す る と ，そ れ に 対 応 す るコンピュータと教育（CE）, Vol.

2012-CE-113, No. 13, 1 2012.

JavaScript のコードが PEN のエディタ上に生成[4] 中西渉. PenFlowchart による授業の提案. 日本される。

情報科教育学会 第 5 回全国大会 講演論文集,PEN のテキストエディタでコードを編集するこ

pp. 115–116, 6 2012.とができる（画面下部の「入力支援ボタン」を使う[5] 中西渉, 辰己丈夫, 西田知博. PenFlowchart にと効率よく，またスペルミスもなくコードを入力でよるプログラミング導入教育の評価. 情報処理きる）。編集したあとで「フローチャート」ボタン

学会研究報告 コンピュータと教育（CE）, Vol.

を押すと，（エラーがなければ）変更した内容がフ2013-CE-121, No. 9, 10 2013.

ローチャートに反映される。

[6] 中西渉. PenFlowchart の「他」言語化. 日本情PEN の画面上部にある「HTML 保存」ボタンを報科教育学会 第 1 回研究会報告書, pp. 17–20,押すと，このコードを含んだ HTML ファイルが保10 2013.

存され，「ブラウザ」ボタンを押すとそのファイル[7] 水越敏行, 村井純, 生田孝至ほか. 情報の科学.

がブラウザに読み込まれる。

日本文教出版株式会社, 2013.

では，実際に巻末のプログラムを作って実行して[8] 赤堀侃司, 永野和男, 東原義訓ほか. 情報の科学.
東京書籍株式会社, 2013.

*3 Readme.txt，ChangeLog.txt という 2 つのテキストファイルも同梱されている。

2








サンプル 1：偶数・奇数

n = parseFloat(prompt("いくつまで？"));
for(x = 2; x < n; x = x + 1){
S = true;for(i = 2; i < x; i = i + 1){
if(x % i == 0){
S = false;}}
if(S){
document.write(x + " ");} }サンプル 2：1 から 10 までの合計

サンプル 3：ソートサンプル 5：数あてゲーム






weight = new Array(78,43,95,27);
document.write("初期", weight, "<br>");for(b = 0; b <= 2; b = b + 1){
c = b;
for(a = c + 1; a <= 3; a = a + 1){
if(weight[c] > weight[a]){c = a;}}
if(b != c){
tmp = weight[b];weight[b] = weight[c];weight[c] = tmp;}}
document.write("結果", weight, "<br>");

サンプル 4：素数

3