1998年1月11日

JavaScriptの教育利用の可能性

大阪府立寝屋川高等学校　神川 定久

1. はじめに
   　JavaScriptはNetscape Communications社が自社のブラウザNetscape Navigatorのために開発したスクリプト言語、"LiveScript"を元にNetscape Communications、Sun Microsystemsなどによって開発された。そのため、最初は特定のブラウザのためのスクリプト言語であった。その後、MicrosoftはJScriptというJavaScript互換のスクリプト言語をInternetExplorer3.0のために開発したが、JavaScriptそのものの仕様が変更されるなど、互換性がとりにくい状態であった。
   　しかし、Netscapeの働きかけで、Borland、Microsoft等も加え、ヨーロッパの標準化機関ECMA（European Computer Manufacturers Association）がJavaScriptを基本にしたスクリプト言語ECMAScript（ECMA-262）を昨年（1997年）6月30日に標準化した。 MicrosoftもJScriptをバージョン3.0からECMA-262仕様に対応させ、Internet Explorer4.01等に搭載し始めており、Netscape Navigator4.04、との間である程度の互換性が取れるようになりつつある。
   　これにより、今後は、これらのメーカーによる主要なブラウザの間で、少なくともScript言語の基本部分は互換性が取れると期待できるようになった。

2. JavaScriptの概要
   　このスクリプト言語はnavigatorオブジェクト、documentオブジェクト、imageオブジェクトなどのオブジェクトに対し、定義されたメソッドを実行するような形で記述する。 Mathオブジェクトも用意されているので、ある程度の計算を行うことも可能であり、imageオブジェクトを使えば、gif画像を切り替えることによるアニメーション程度のものは簡単に作成できる。 また、ユーザインタフェースに関しては、HTMLのフォームで作成したボタンや貼り付けた画像の上で発生したイベントによって、スクリプト言語で記述したメソッドを動かすことができるので、HTMLで記述したボタンなどでプログラムを操作することができる。
   　このように、簡単な動作をするものであれば、わざわざJavaを利用してアプレットを作成しなくても、HTMLにスクリプトを記述するだけで、同等の動作を実現できる。　したがって、Web上で教育目的のテキストを作成するような場合、簡単な計算や条件分岐、アニメーションなどであれば、Java Scriptによって、気軽に利用できるようになる。

3. JavaScriptの利用例
   　ここでは、それらのプロトタイプとして３つの例を作成してみた。　１つは従来Javaを用いてgifファイルを表示していたアニメーションをJavaScriptで記述した波の干渉である。　ソースを見ればわかるように、この場合は、まず、imageの配列に必要なgif画像を読み込んでおき、documenｔに貼り付けた画像を配列の次の画像と入れ替えるという作業をタイマーを使って一定の間隔で行わせることによってアニメーションとして動かしている。　また、HTMLのフォームで作成したボタンのクリックによって発生したイベントをイベントハンドラonClickで受け取り、タイマをクリアしたり、1枚だけ画像を入れ替えたりさせることで、ストップやコマ送りを実現している。
   　また、条件分岐の例として、気柱共鳴の実験のサポートを作成した。　この場合はフォームに入力した実験結果を浮動小数点の数値に直した後、最初の共鳴点と開口端補正から第2の共鳴点の位置を計算し、それと実測した第2の共鳴点の位置の差がどの程度どちらにずれているかによって、それぞれ違ったページを呼び出している。　また、誤差がある程度以上大きい場合のページでは注意を促す画像をラジオボタンによって切り変えて表示する部分にもJavaScriptを利用している。この画像の水面を動かすためにはアニメーテッドgifを利用している。
   　もう１つはWeb上での問題演習の例として高等学校での運動方程式の基本問題を解説したものである。　実際に問題を解いていく過程で、力を図に描き込む、正の方向を決める、運動方程式をたてる、それを解くといった手順を踏むが、それぞれの場面でアニメーテッドgifなどを用いながら指示を出し、確認をしてから先に進むという構成にしてみた。　ここでもページの入れ替えや、画像の入れ替えにJavaScriptを利用している。　また、最後に、よくある疑問を「質問コーナー」として配置し、さらに詳しい説明を希望する者は、それを見られるようにしている。
   　これらの例のように、標準のHTMLでは記述しにくいが、比較的簡単なプログラムを使うことで実現できる場合はJavaScriptの利用が効果的であろう。　また、簡単な動画や、注意を引くための図であればアニメーテッドgifで十分である。　もちろん、ハイパーリンクを用いて教材を提示できるという利点はそのままであるし、インターネットと接続された環境では、外部へのリンクによって他の有用なサイトを紹介することも可能である。

4. JavaScriptの問題点
   　この方法は簡単で、利点も多いが、次のような欠点も考えられる。

   • 基本的にはインタープリタを使う言語と同じなので、あまり速くない。

   • ソースは使う人にも公開されているので、どのような判断をしているのかすぐに見ることができる。

   • 新しいブラウザではある程度の標準化はなされているものの、古いブラウザでは互換性がない。

   • 新しいブラウザでは改善されているが古いブラウザでは不安定な動作になることがある。

   　しかし、波の干渉の例でもわかるように、確かにJavaのJITコンパイラに比べれば動作はおそいものの、新しい機械ではJITぬきのJavaVMと比べるとそれほど遅いわけでもない。　また、ソースが見えると言うことは、逆に言えばごく普通のエディタでソースを書きかえられるということであり、かつて、Basicで行われていたような、簡単なプログラムの演習も可能になるなど、利点と考えることもできる。　あとの２つはユーザにとっては有害なだけなので、メーカーには機能の拡張のみではなく、標準化と安定性の改善を強く望みたい。
   

JavaScriptのテストのページへ

ホームページへ

Copyright(c) 1998 S.Kamikawa last update 1998.1.30