Copyright (C) 2000 DaiichiGakushusha Corporation. All Rights Reserved.
連載 JavaScript入門講座
第1回 基本的なプログラム
エデュカーレNo.9 より
筑波大学大学院教授 久野 靖
はじめまして,筑波大学の久野です。今回から3回にわたって,連載させていただきます。
第1回 基本的なプログラム
 <INDEX>
第2回アルゴリズムの学習
第3回ウェブページに動きをつける
 普通教科「情報」の範囲にはプログラミング言語の学習は含まれていない。「情報B」の中のアルゴリズムについて学ぶ部分でも,学習指導要領解説では「プログラミング言語によらない方法も考えられる」,と注記されている。しかし実際には,コンピュータの動き方の原理や,コンピュータにできること,できないことを身をもって理解するには,プログラミング言語を体験してみるのが一番の早道である。学習指導要領でも,そのような学習の手段としてプログラミング言語を体験してみることは否定していない。
 そのような体験の題材として,この講座ではJavaScript言語を用いた簡単なプログラミングを取り上げ,解説していく。
 ここで大切なのは,目的はあくまでも「体験」であって,高度な習熟は求めない,ということである。指導される先生方には,「生徒に考えてもらう」範囲と「とりあえず手を動かして試してもらう」範囲を柔軟に使い分けて,せっかくの新しく楽しい題材を「難しくてつらい」ものにさせないように工夫していただきたいと思う。
 そうしておいても,「体験」を経た生徒の中には,この新しい「道具」に夢中になっていろいろ試したくなる者も出てくるはずである。そのような生徒には,入門書などを紹介したりして,自発的な探求を促していただければと思う。
 JavaScriptは,ウェブページの中にHTMLと一緒に組みこんでさまざまな動作をつけるためのプログラミング言語(スクリプト言語)として,Netscape社によって開発され,Netscapeブラウザに組みこまれた。Netscape社はこの言語の名前を,当時急速に普及しはじめていた,Java言語(今日では情報システムの開発に広く使われている)にあやかってつけたのだが,JavaScriptとJavaは名前が似ているだけで言語としてはまったく違ったものである。
 当時はNetscape社のブラウザがもっとも広く使われるブラウザだったことから,JavaScript言語も広く使われるようになった。現在ではInternet Explorerをはじめ,PC上で動く主要なブラウザではどれでも使えるようになっている。今日,ブラウザを搭載していないPCはまずないだろうから,JavaScript言語はもっとも多くのPCに処理系が搭載されているプログラミング言語だといえる。
 プログラミング言語の体験用にJavaScriptを使うことの利点には,右の図のようなことがある。
 では前置きはこれくらいにして具体例に進むが,その前にあと1つだけ。
 プログラミング言語はHTMLなどと異なり,少しでも間違いがあれば何も実行されず,結果も表示されない。このため,間違いの個所を指摘してくれるウィンドウを表示させた状態で実習をすることをおすすめする。Internet Explorerであれば「スクリプトデバッガ」,Netscapeブラウザであれば「JavaScriptコンソール」とよばれるウィンドウがこれに相当する。打ちこんで試してもうまくいかない場合は,これらを見て間違いをなおすように積極的に指導していただきたい。

<script>
x = 10;
y = x * 20;
document.write('xの値は' + x + 'です。<br>');
document.write('yの値は' + y + 'です。<br>');
</script>

 先に説明したように,JavaScriptはHTMLに組みこむことでブラウザ上で実行させられる。ここではJavaScript をいろいろ動かしてみることが目的であり,そのために最低限必要なHTMLのタグは次のscriptタグだけである。
  <script>...</script>
 scriptタグはHTMLに埋めこんだスクリプトの範囲を示す  ※1。  ブラウザはこのタグに出会うと,その中のスクリプトを実行する。

変数と代入
 スクリプトの中では「変数」を使うことができる。プログラミング言語における変数は,数学の変数と違って,次のような性質がある。
・値を入れる「入れもの」である。
・プログラムの指示により値を何回でも「入れなおす」ことができる。
・2文字以上の(長い)名前をもってもよい。
 変数に値を入れる(入れなおす場合も含む)ことを一般に「代入」とよぶ。JavaScriptでは「=」を代入の意味で使う(数学と同様の「等しい」という意味には「==」を使う)。たとえば,上の例の最初にある
  x = 10;
xに10という値を代入している。最後の「;」(セミコロン)は,「ここまでで1つの動作が終わりである」ということをあらわす。

計算式
 プログラムの中で値の計算をするときには,計算式を記述する。たとえば,上のプログラムの2行目の
  y = x * 20;
の「x * 20」も計算式であり,「変数xに現在入っている値と,20という値を,かけた値を計算する」という意味になる。そして,この行全体では,そのかけた結果を変数yに代入する。
 数学では,かけ算は「×」を使ったり,「20x」のように単につなげて書いてあらわすが,JavaScriptでは常に「*」を使ってあらわす。ほかに「+」「-」「/」(割り算),「%」(剰余を求める演算)が使える。

出力
 scriptタグの中で「document.write(...);」という命令を実行すると,「...」の部分が文字列に変換された上でscriptタグの位置に(つまりブラウザの画面中に)出力される。
 文字列は「'...'」または「"..."」のように、シングルクォートまたはダブルクォートで文字の並びを囲んであらわす。また,「+」演算の左右どちらかが文字列の場合は,この演算は「足し算」ではなく「文字列の連結」になる(他方が数値などの場合は文字列に変換されてから連結される)。
 上のプログラムの場合,前半の2行で変数xには10,yには200が代入されるので,後半の2行はそれぞれ
 xの値は10です。<br>
 yの値は200です。<br>
を出力する。<br>は行かえを指示するHTMLのタグで,これがないと2回に分けて出力しても表示は1行になってしまうので,試してみてほしい。  
<script>
h = parseFloat(prompt('円錐の体積: 高さを入力してください。'));
r = parseFloat(prompt('底面の半径を入力してください。'));
s = r * r * 3.1416;
v = (s * h) / 3.0;
document.write('高さ = ' + h + '底面の半径 = ' + r + '。<br>');
document.write('円錐の体積はおよそ' + v + 'です。<br>');
</script>
 プログラムには一般に,取り扱うべきデータをコンピュータに与える「入力動作」,コンピュータ内部での「計算処理」,その結果をユーザに提示する「出力動作」が含まれている。先のプログラムには入力動作が含まれておらず,データはプログラムの中に直接書きこまれていた。これでは,データを変更する必要があるたびにプログラムをなおす必要があり,不便である。そこでここでは,入力動作を含むプログラムとして,円錐の高さと底面積の半径を入力してもらい,体積を計算するプログラムを取り上げる。

文字列の入力
 上の例題にはあらわれていないが,たとえば
   m = prompt('メッセージを入れてください。');

のようにして,文字列をユーザに入力してもらい,変数mに格納することができる。prompt(...)は入力欄と「...」の部分のメッセージ表示をもつウィンドウを画面に出し,ユーザが文字列を入力して「OK」ボタンを選択すると,入力した文字列が結果として返されてくる。";

数値の入力
 数値を入力してもらうには,やはりprompt()を用いて文字列を入力してもらい,その結果を文字列から数値に変換する機能parseFloat(..)※2に渡して数値にすればよい。
   h = parseFloat(prompt('円錐の...'));

は実際にそのようにして数値を入力して、変数hに格納している。  

実行の順番
 このプログラムでは,3行目と4行目でまず底面の面積を変数sに求め,続いてそれを使って円錐の体積を変数vに求めている。
   s = r * r * 3.1416;
   v = (s * h) / 3.0;

 ここで,命令は上から1つずつ実行されるので,順番は大切である。たとえばこの2行を入れかえてしまうと,まずvを計算しようとするが,sの計算が終わっていないので,vの値が正しく計算できない。  

計算の精度
 このプログラムでは円周率として3.1416を使っている。では,コンピュータによる計算の精度はどれくらいあるのだろうか。JavaScriptの標準規格では,数値の計算ではおよそ16桁ほどの有効数字があることになっている。十分な桁数のように思えるかもしれないが,ユーザが「正確なつもり」の数を計算してもその通りにならずに驚くことはよくある。たとえば,上のプログラムで半径も高さも10としたとき,答えは
   10×10×10×3.1416÷3=1047.2

になるはずだが,実際にやってみると
   1047.1999999999998

という少し違う数が表示される。このように,コンピュータによる小数点のついた数の計算は,誤差をともなう近似値になることは理解しておきたい。  

解説書などによっては,JavaScriptをHTMLの中に書く際,
<script>
<!--      ←HTMLのコメント開始
  プログラム
  ...
// -->    ←HTMLのコメント終了
</script>

のようにHTMLのコメントで囲むことで,JavaScriptを扱えないブラウザ(携帯電話など)でプログラムが見えてしまわないようにすることをすすめているが,ここではJavaScirptを動かしてみることが目的なので,いちいちこのような手間はかけないでよい。実際にページをつくるときも,一般用と携帯電話用のページを一緒にしないかぎりはコメントで囲む必要はない。
 

<script>

x1 = parseFloat(prompt('数1を入力してください。'));
x2 = parseFloat(prompt('数2を入力してください。'));


if(x1 > x2) {
 document.write('大きいのは' + x1 + 'です。<br>');
}else{
 document.write('大きいのは' + x2 + 'です。<br>');
}
   
</script>

 ここまでの例では,プログラムは「1本道」であり,最初から順番に実行されるだけだった。「枝分かれ」の機能を使うと,条件判断の結果にもとづいて,ある部分だけを実行させたりさせなかったりできる。そのような例として,2つの数を入力してもらい,大きい方の数を表示するプログラムを取り上げる。  

枝分かれの書き方
 JavaScriptでは枝分かれは次の形であらわす。
 if(条件) {
  条件成立時に実行する命令・・・
 } else {
  条件不成立時に実行する命令・・・ 
 }

 それぞれの命令は何行あってもよい(「{・・・}」で囲まれているので,どこまでが範囲だかわからなくなることはない)。また,条件不成立のときに実行する命令がとくにない場合はelse以降を全部省略してよい。

条件判断
 JavaScriptでは,条件として結果がtrue(はい),false(いいえ)のいずれかになるような式が使える。いちばん多く使うのは例題プログラム※3のように大小比較である。比較演算子としては次の6種類が使える。
==!=>>=<<=
等しい等しくないより大以上より小以下

プログラムの複数の書き方
 1つの問題に対するプログラムの書き方は1通りではなく,たくさんあるのが普通である。たとえば,上の例題に対して, の部分は次のようなプログラムで書いてもよい。
max = x1;
if(x2 > max) { max = x2; }
document.write('大きいのは' + max + 'です。<br>');

 この考え方は次の通り。変数maxを用意して,とりあえずx1の方が大きいものとしてx1と同じ値を入れておく。次に,maxよりもx2が大きいかどうかを調べて,もしx2が大きければあらためてmaxにx2を入れなおす。どちらにせよ,最後にmaxを出力すれば,それはどちらか大きい方の値になっている。
 「2つの数のうち大きい方」であれば,例題の書き方とこちらの書き方でどちらがとくによいとはいえないが,数が3つ,4つとなるとこちらの方がずっと楽になる。実際に試してみていただきたい。