フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業

フローチャートによるプログラミング実習

で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

中西

渉

ワークショップ
ダウンロード使い方の概要watayan@meigaku.ac.jp

プログラム作成

名古屋高等学校おわりに2014 年 3 月 16 日

目次

フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要1 PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応
2 JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル
PenFlowchart を使うメリットプログラム作成

おわりに

3 ワークショップ
ダウンロード使い方の概要プログラム作成
4 おわりに

フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とは
PenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりに

1. PEN,PenFlowchart
PEN とは
2 PenFlowchart とは
3 JavaScript への対応
1

PEN とはフローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とは
PenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりに• 初学者向けプログラミング学習環境
大阪学院大学情報学部の西田研究室，大阪市立大学
大学院創造都市研究科の松浦研究室の共同プロジェ
クト• 言語は xDNCL
センター試験「情報関係基礎」の言語 DNCL を拡張• 入力支援ボタン
キー入力を最小限にフローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメリット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりに

xDNCL のプログラム例
整数 a,ba を入力する
b ← a % 2
もし b = 0 ならば｜「偶数」を表示するを実行し，そうでなければ｜「奇数」を表示するを実行する

フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要
プログラム作成

おわりにPEN の実行画面

PenFlowchart とはフローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりに• マウス操作でフローチャート作成→PEN のプログラム生成• 授業の進行，成績に好影響フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりに

PenFlowchart の実行画面

JavaScript への対応

フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchartPEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって• 新課程「情報の科学」で使われているプログラミン
グ言語

JavaScript 東京書籍，日本文教出版
VBA 実教出版
ドリトル 東京書籍

教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ

• DNCL を使っている教科書はない

リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりに→PenFlowchart を「他」言語化• C++• BASIC• JavaScript
JavaScript 版がイチオシフローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とは
PenFlowchart とは
JavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりに

PenFlowchart for JavaScript の実行画面

フローチャートによるプログラミン
グ実習
中西

2. JavaScript を授業で使うにあたって

渉

1

教科書での取り扱い

PEN,PenFlowchart2

生徒が陥りやすいトラブル

PEN とは
PenFlowchart とはJavaScript への対応

3

PenFlowchart を使うメリット

目次

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成おわりに

教科書での取り扱い

フローチャートによるプログラミン
グ実習
中西

渉

目次

日文の教科書にある最初のプログラム

PEN,PenFlowchart
PEN とは
PenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりに<html><body><script>
document.write(103-62);</script></body></html>7 行のうち，プログラム本体はたった 1 行. . .

フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりに生徒が陥りやすいトラブル• タグがめんどくさい• 瑣末なミスがエラー• セミコロン忘れ• スペルの間違い• 大文字小文字間違い• 全角・半角のミスフローチャートによるプログラミング実習
中西

PenFlowchart を使う
メリット

渉

目次

PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード• フローチャート → コード自動生成→ 構文エラー回避• HTML のタグを自動挿入• 入力支援ボタン→ 丸暗記・コピペから解放→ スペルミス回避

使い方の概要プログラム作成

おわりにエラーでのつまづきをなくす→ プログラム，アルゴリズムを考えることに集中

3. ワークショップ

フローチャートによるプログラミン
グ実習
中西

渉

1

ダウンロードPEN,PenFlowchart2

使い方の概要PEN とは
PenFlowchart とはJavaScript への対応

3

プログラム作成

目次

JavaScript を授業で使うにあたって教科書での取り扱い
生徒が陥りやすいトラブル

PenFlowchart を使うメリット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりにダウンロード

フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とは
PenFlowchart とはJavaScript への対応

JavaScript を授業

PenFlowchart の配布アドレス

http://watayan.net/prog/
Java があれば Windows でも Mac でも Linux でも OK1で使うにあたって教科書での取り扱い

PenFlowchart for JavaScript
PENJSFlowchart.1.06-1.20.zip
をダウンロード

生徒が陥りやすいトラブルPenFlowchart を使うメリット

ワークショップ

2

展開する

3

PenJSFlowchart.jar をダブルクリック

ダウンロード使い方の概要プログラム作成

おわりに

使い方の概要

フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とは
PenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い

PenFlowchart の画面• パーツをフローチャートの縦棒にドラッグ&ドロップ• 右クリックで編集・削除など

PEN の画面生徒が陥りやすいトラブル

PenFlowchart を使うメリット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりに• コード編集（入力支援ボタンも使える）• 「HTML 保存」ボタンで HTML ファイルを保存→ ブラウザで読み込み（初回のみ）• 「ブラウザ」ボタンで別タブ読み込みプログラム作成

フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とは
PenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりにではさっそく…

フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりにサンプル 1：偶数・奇数

フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりにサンプル 2：1 から 10 までの合計

フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchartPEN とは
PenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりにサンプル 3：ソート
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>");フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりにサンプル 4：素数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 + " ");}}

フローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とはPenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりにサンプル 5：数あてゲーム
プリントを参照してください4. おわりにフローチャートによるプログラミン
グ実習
中西

渉

目次

PEN,PenFlowchart
PEN とは
PenFlowchart とはJavaScript への対応

JavaScript を授業で使うにあたって教科書での取り扱い• できたばかりのプログラム→ まだまだバグが. . .
• 構文解析を全面見直し中→ 間に合わなかった• 使い勝手は？

生徒が陥りやすいトラブル

PenFlowchart を使うメ
リット

ワークショップ
ダウンロード使い方の概要プログラム作成

おわりに気がついたことや不具合，改善策などをどんどん報告してください