Vol.75

CON T E N T S【コラム】高校の教科「情報」は科学的な理解の夢を見るか… 生田 研一郎【解説】高等学校における教育用 JavaScript の授業実践報告 … 間辺 広樹

COLUMN基 応専 般

高校の教科「情報」は科学的な理解の夢を見るか

高校の教科「情報」に関して一家言ある会誌読者は多いかと思いますが，実際にどのような授業を想像しますでそんたくしょうか．過去のぺた語義コラムから忖度しますと，その領域はいわゆる情報科学や情報技術にかかわる分野が中心のようです．教科「情報」には科学的な理解という観点があり，これを踏まえてのことかと思います．
教科「情報」にとって情報科学や情報技術といった親学問を踏まえた授業は必要不可欠です．本会に寄稿されているような教科「情報」のコア教員の実践事例も良い例です．次期学習指導要領では，情報 I の（3）（4）でこれらを扱うとしています．
しかし，情報科学や情報技術を中心とした教科「情報」の授業は，生徒たちに「情報社会は技術決定的である」という誤解を与え，情報社会の総合的な理解を阻害する可能性があります．
教科「情報」が関係していると思われる学会や研究会での発表題目から考えると，社会科学や人文科学を意識した教育実践報告は絶望的に少ない印象があります．教科「情報」のコア教員や本会の研究者が熱心になればなるほど，情報社会の総合的な理解から遠ざかるように感じます．
ここで重要なことを確認します．親学問における科学とは「自然科学」「社会科学」「人文科学」のことです．教科「情報」は科学的な理解を踏まえるべきとするならば，法学や経済学，社会情報学，心理学といった親学問を踏まえる必要があります．
たとえば，法学と情報の関係について考えてみます．商標権で扱うブランドは，他社との差別化やブランドイメージといった情報がその本質です．プライバイシー権や肖像権は SNS が身近な高校生に必須の知識と言ってよいでしょう．不正アクセス禁止法や電子消費者契約法，通信の秘密など，情報法分野は教科「情報」の親学問に合致しているといえます．情報法分野以外も，教科「情報」と密接な関係にあると思います．次期学習指導要領では，情報 I の（1）（2）でこれらを扱うとしています．
教科「情報」の目的は『親学問や実社会と接続するように，情報社会の基礎知識や基礎技術の涵養を目指す』ことだと私は考えています．つまり，さまざまな学問領域を踏まえて広く学ぶ横の専門性がその本質であり，数学のように 1 つの分野を深く学ぶ縦の専門性とは異なるということです．
教科「情報」にかかわる先生方が自然科学領域以外にも注目していただけたら幸いです．
生田研一郎（中央大学杉並高等学校）

LOGOTYPE DESIGN...Megumi Nakata, ILLUSTRATION&PAGE LAYOUT DESIGN...Miyu Kuno

ぺた語義は pedagogy（教育学）を元にした造語です．常設の教育コーナーとして教育や人材育成に関する記事を広く掲載しています．
ぺた語義に掲載された記事は，情報処理学会 Web ページの「教育・人材育成」からどなたでもご覧いただけます .

情報処理 Vol.58 No.11 Nov. 20171031

ARTICLE

基 応専 般高等学校における教育用 JavaScript の授業
実践報告─オンラインプログラミング学習環境 Bit Arrow を用いて─
間辺広樹

神奈川県立柏陽高等学校

実践の背景

トでも「やったことはないけれども，できるように次期学習指導要領では，小学校から高等学校までなりたい」というコメントを多く見るようになった．のすべての校種でプログラミングが必修化される

学習目標は高い方が良いが，まずは「プログラミンことになった．2016 年 12 月に出された中央教育審

グ嫌いを作らないこと」や「自分にもできると感じさ議会の答申では「自分が意図する一連の活動を実現せること」が大切ではないかと考える．

する」ことをプログラミング的思考とし，それを育ではどのように授業を行っていけばいいのであろむ教育を求めた．高等学校では，現在は情報科の選うか？

択科目である「情報の科学」においてのみプログラ

習環境・授業内容が生徒の学習に大きく影響する．

ミングを学習することとなっているが，この科目を本稿では言語として JavaScript を扱っている．

開講している高等学校は 2 割程度にとどまってい

同言語が Web を中心に広く使われていることや，る．次期学習指導要領では新設される共通必履修科

複数の教科書で採用されていることが理由である．

目「情報 I」にプログラミングが位置付けられ，すべ

ただし，従来の JavaScript の学習は，操作やエラーての高校生がプログラミングを学ぶこととなった．

表示の点などに課題があった．そこで，それらを「自分が意図する一連の活動を実現する」ことは「自解決したオンラインプログラミング学習環境 Bit分でプログラミングできるようになる」と解釈できArrow を用いることにした．制御構造の基本を理るが，この目標は高い．本誌にて何度も取り上げら解させることを目標とした 4 回の授業例を紹介する．

特に，プログラミングの学習には言語・学れているように，基礎とはいえ，次のような概念を扱い，少ない授業時間数で「できるようになる」
ことを高校生に求めるのは簡単ではない．
•• 変数，配列

JavaScript 学習の課題
JavaScript は，テキストエディタと Web ブラウ•• 制御構造（順次，条件分岐，反復）ザがあれば実習できることから，複数の教科書で•• アルゴリズム（合計，探索，整列など）使われているが，プログラムの作成は次のように

特に，近年はスマートフォンの普及などに伴っファイル操作やウィンドウ操作が必要になる．そて，高校生のコンピュータに対する操作能力は著しの た め， 操 作 の 不 慣 れ な 生 徒 は 戸 惑 う こ と が 多く低下していることも円滑に授業を進められない

かった．

要因となっている．この傾向は今後もより顕著にな

1. エディタでプログラムを入力するると考えられる．

2. 拡張子を html にして保存する．

その一方で，「プログラミングができるようになりたい」という生徒の声も増えている．アンケー

3. ブラウザに読み込み，動作を確認する．
4. 修正・更新は「プログラムを書き換え，上書き保-【解説】高等学校における教育用 JavaScript の授業実践報告 -1032

情報処理 Vol.58 No.11 Nov. 2017

存し，ブラウザでリロードする」を繰り返す．
また，プログラムにミスがあってもエラーが表示されず，その特定も困難であった．

がしやすくなった（図 -1）．
さらに，通常の JavaScript では多くの文字を入力しなければ実現しない処理が，簡略化されてい筆者はこれまでの授業実践から，これら数行のる（表 -1）．これを用いることで，プログラムにア操作であっても，指導に困難が伴うことを体験しニメーション効果をつけることなどが容易になってきた．ている．

オンライン学習環境 Bit Arrow❏❏Bit Arrow の特徴
Bit Arrow1）

授業内容❏❏授業計画と工夫は，東京農工大学，明星大学，大4 クラス 154 名を対象に，65 分の授業を週に 1 コ

阪電気通信大学によって共同開発されたオンライマずつの合計 4 回行う授業を表 -2 のように実施した．

ンプログラミング学習環境である．現在，教育用各授業の工夫点や生徒の様子を説明する．

JavaScript，C，ドリトルの 3 言語から選択して利用することができる．インターネット上のサーバで動作するため，次のようなメリットがある．

❏❏1 時間目（順次の理解）
1 時間目は，プログラムは上から順に実行される•• 教師が生徒の利用状況を把握できるという順次処理と，単純な命令でもその組合せに•• 複数の言語を利用できる

よってさまざまな処理ができることを理解させるこ•• 授業の時間外でも学習ができるとを目標とした．生徒の多くはプログラミング経験がないため，導入として日本語で記述できるドリト❏❏教育用 JavaScript

ルを利用した．

Bit Arrow で使える教育用 JavaScript には従来

前半は「歩く」や「右（左）回り」という命令を順にの JavaScript の問題を解決するために，次の機能並べることで，図形を描画できることを体験させ，が備えられている．

オリジナル作品を作る時間を設けた．後半は授業支

1. HTML と JavaScript のタブを分けている

援ツールを使い，生徒作品を 10 秒ずつスクリーン

2. エラーとその発生個所を表示するに表示して，相互に閲覧し，単純な命令でも組合せ

3. 入力補助機能がある

従来

4. 自動インデント機能がある

乱数

5. QR コードが生成され，生徒が所有するスマートフォンから実行結果を確認することができる
特に，エラーの表示があるため，誤り個所を特定

countup = function(){console．
log(count++);一時停止}
setInterval(countup，100);

表 -1
時間ミスであることが分かる} が抜けている

図 -1

Bit Arrow 版教育用 JavaScript

教育用

Math．
floor( Math．
random() * 100 ) ; rnd(100);wait(100);

従来と教育用 JavaScript の比較
言語目標

主な学習活動1

ドリトル

描画プログラム制作
順次の理解
生徒作品の相互閲覧

2

JavaScript

分岐の理解HTML 実習（Web ページの仕組み）
じゃんけんプログラム制作

3

JavaScript

反復の理解

画像表示プログラム制作
FizzBuzz を声に出す体験

4

JavaScript

問題演習

2・3 回目の復習
FizzBuzz プログラム制作

表 -2

65 分× 4 回の授業

情報処理 Vol.58 No.11 Nov. 2017

1033

図 -3

画像表示プログラムの例

ミングできることを示した．その際に wait 命令を
図 -2

説明すると，生徒の多くが時間間隔を調整して，画じゃんけんプログラム

像のアニメーション表示を楽しんだ．

次第でさまざまなものが作れることや，アイディア  後半は FizzBuzz を扱う 4 時間目の授業のために，を出すことが大切であることを説明した．

生徒を 2 〜 4 人程度のグループに分けた．「3 で割り切れたら Fizz，5 で割り切れたら Buzz，3 でも❏❏2 時間目（分岐の理解）

5 でも割り切れるときは FizzBuzz」というルール

2 時間目は，JavaScript を身近に感じさせることと，条件分岐の構造を理解させることを目標とした．
そのために，Bit Arrow の教育用 JavaScript を用いた．の説明をした後，1 から順に声に出して確認するグループ活動をさせた．
最後に，どのようにすれば FizzBuzz プログラムが作れるかを考えさせた．

前半は body タグの属性を使い，ページの背景色を 16 進表記で設定させた．そして，Web ページは❏❏4 時間目（問題演習）

文字で作られたものが Web ブラウザで組み立てら4 時間目は，分岐と反復の組合せでさまざまなプれて我々が目にするものになっていることを説明しログラムが作れるようになることを理解させることた．その上で，JavaScript が HTML に埋め込まれを目標とした．前半は 2 回目と 3 回目で扱ったプロて使われている身近な言語であることを，いくつかグラムを改めて作らせて，分岐と反復を復習させた．の Web ページのソースを見せて説明した．

後半は，3 時間目の FizzBuzz がこれまでの学習

後半は教育用 JavaScript の導入として乱数が関内容を組み合わせれば作れることを伝え，自力で作数 rnd によって使えることと，剰余が演算子 % かるよう指示した．その際，スクリーンに以下のヒンら求められることを説明した．また，乱数で作ったトを少しずつ書き加えた．

整数が奇数か偶数かを判断させるプログラムを通し（1）１から 30 までを順に表示するて，条件分岐の構造を説明した．さらに，これを応（2）3 の倍数だけのときだけ Fizz と表示する

用してじゃんけんプログラムを作ってみるように指（3）5 の倍数だけのときだけ Buzz と表示する

示した（図 -2）．

（4）3 と 5 の倍数のときに FizzBuzz と表示する
この課題は（3）までは簡単にできても（4）が難し❏❏3 時間目（反復の理解）い．ソースコードで一番上に書かなければ正しく動3 時間目は，反復構造で処理がまとめられること作しない FizzBuzz を表示する処理を，多くの生徒を理解させることを目標とした．前半は同一の画像が一番下に書いてしまうからである（図 -4）．そのを複数個表示させる題材を扱った（図 -3）．最初に際，多くの生徒があえて使う必要のない wait 命令

画像表示の方法と，同じプログラムをコピーするこを使い，数や文字を 1 つずつ表示させていた．
「15とで，複数個の画像が表示されることを示した．そのときに FizzBuzz と表示されるか否か」で，祈るの上で，反復構造を用いることで効率よくプログラ

ように手をあわせる生徒や，うまくできたことに大-【解説】高等学校における教育用 JavaScript の授業実践報告 -1034

情報処理 Vol.58 No.11 Nov. 2017

0%

20%

40%

60%

80%

100%

1時間目
とても楽しい2時間目

少し楽しい
あまり楽しくない
つまらない

3時間目
4時間目
図 -4

誤った FizzBuzz プログラムの例

喜びする生徒もいた．

❏❏アンケート調査
毎回，授業の楽しさと難しさを 4 段階で自己評価

図 -5

授業の楽しさ（N=154）
0%

20%

40%

60%

80%

100%

1時間目
とても難しい2時間目

少し難しい
あまり難しくない3時間目

簡単させた．集計結果を図 -5 と図 -6 に示す．
こ の 結 果 か ら， 生 徒 は 難 し さ を 感 じ な が ら も楽 し く 授 業 を 受 け て い た こ と が 分 か っ た． 特 にFizzBuzz を作った４時間目が最も難しさを感じて4時間目
図 -6

授業の難しさ（N=154）

いた．また，授業中の発話から複数の生徒が自宅学習を進めていたことも分かった．

が自宅などで学習を進められるなどのメリットが大きいことを確認できた．今後もさまざまなプログラ

実践のまとめオンラインプログラミング学習環境 Bit Arrowを使った 4 回の授業を紹介した．紙面の関係で，生徒の主観的評価しか載せていないが，筆記テストでミング教育の手法を模索していきたい．
参考文献
1） 長島和平，本多佑希，長 慎也，間辺広樹，兼宗 進，並木美太郎：オンラインで複数言語を扱うことができるプログ
ラミング授業支援環境，情報教育シンポジウム (SSS2016),
pp.137-140 (2016).
（2017 年 8 月 17 日受付）

取得した客観データでも Bit Arrow の有用性を確認できた．
今回は高校生のプログラミング教育のきっかけとなる入門授業を紹介した．ブラウザで実習できるオンラインプログラミング環境は，興味を持った生徒

間辺広樹（正会員） manaty2005@mh.scn-net.ne.jp
大阪電気通信大学医療福祉工学研究科博士後期課程修了．博士（工学）．神奈川県立柏陽高等学校数学科・情報科教諭．

情報処理 Vol.58 No.11 Nov. 20171035