• 01-02-01 script要素にJavaScriptを書く
• 01-02-02 変数を使う
• 01-02-03 ボタンクリックでランダムな数字を出す
• 01-02-04 関数を定義して呼出す
• 01-02-05 ローカル変数とは
• 01-02-06 WindowオブジェクトとCallオブジェクト
• 01-02-07 配列とオブジェクトの参照

本書はJavaScriptの基礎はすでに学ばれた方を対象として、CreateJS Suiteを使ったスクリプティングについて解説します。本節はそのJavaScriptの基礎を確かめ、おさらいすることが目的です。具体的には、変数宣言と関数定義、オブジェクトの参照などについて簡単に解説します。これらの内容はすでにおわかりであれば、本節は流し読みするか、つぎの節に進んでいただいて構いません。

○01-02-01 script要素にJavaScriptを書く

JavaScriptはscript要素に定めます。そして、head要素またはbody要素に含めることができます。script要素のJavaScriptそのものは、ブラウザのウィンドウには表示されません。つぎのようにscript要素を用いれば、HTMLドキュメントの中に直接JavaScriptが書けます。

<script>
// ここにJavaScriptを書く
</script>

試しに、body要素にJavaScriptを書いてみます。document.write()メソッドは、括弧()の中に「引数」(ひきすう)として記述した(「渡した」と表現します)値を、HTMLドキュメントに書き加えます。なお、引数にテキストを渡すときは、ダブルクォーテーション(")またはシングルクォーテーションで(')括ります。

つぎのコード001は、JavaScriptのdocument.write()メソッドにより、HTMLドキュメントに「このテキストが表示される」というテキスト(文字列)を書き加えます(図01-02-001)。script要素はbody要素に含めました(コード01-02-001第9〜11行目)。

○01-02-02 変数を使う

document.write()メソッドは、スクリプトの処理結果が正しいかどうかを確かめる(「デバッグ」といいます)ときにも用いられます。同じように使われるメソッドにalert()があります。警告のダイアログボックスを開いて、引数の値を表示します。ダイアログボックスを閉じないと、次の処理に進んだり、ブラウザを操作できないことにご注意ください。

前掲コード01-02-001第10行目の後につぎのようなalert()メソッドのステートメント(命令文)を加えると、ブラウザのウィンドウから警告ダイアログが開いて、HTMLドキュメントと同じく「このテキストが表示される」と示されます(図01-02-001)。なお、ダブルスラッシュ(//)はコメントを意味し、その後行末まではスクリプトには含まれない注釈・メモとみなされます。

document.write("このテキストが表示される"); alert("このテキストが表示される");   // 追加

ここで、document.write()とalert()メソッドに同じ文字列(「このテキストが表示される」)を引数として渡していることが気になります。このままでは、値に修正が加わるたびに2箇所直さなければなりません。このようなときは、共通に使う値を変数に入れます。

変数はキーワードvarで宣言し、名前を半角英数字で定めます。もう少し細かく説明すると、変数名の先頭には数字が使えず、記号は「_」(アンダースコア)と「$」(ドル記号)のみ用いることができます。このような命名規則にしたがった名前を「識別子」と呼びます。

varキーワードで変数を宣言すれば、その後いつでも代入演算子=で値を納めることができます。変数に値を入れることは「代入」といいます。また、変数をvar宣言するときに、値も代入して構いません。

var 変数名;

var 変数名 = 値;

つぎのコード01-02-002は、varを宣言した変数(myText)に、文字列(「このテキストが表示される」)を代入しています(第10行目)。そして、その変数をdocument.write()とalert()メソッドに、それぞれ引数として渡しました(第11〜12行目)。これでもしテキストを変えたくなったら、変数に納める文字列を1箇所書替えるだけで、ドキュメントと警告ダイアログボックスの両方に反映されます。

○01-02-03 ボタンクリックでランダムな数字を出す

alert()メソッドをボタンのクリックで呼出し、警告ダイアログボックスにランダムな数値を表示してみましょう。まず、ボタンはbutton要素で表示します。フォームと絡めない単純なボタンは、type属性を"button"に定めます。そして、クリックしたとき実行したいJavaScriptのステートメントは、onclick属性に文字列で書き加えます(後述Word 01-02-003「イベントハンドラ」参照)。

<button type="button" onclick="JavaScriptのステートメント">ボタンのラベル</button>

つぎに、ランダムな数値はMath.random()関数で得られます。関数の戻り値は、0以上1未満の小数値です。以下のコード01-02-003は、Math.random()関数で求めたランダムな数値を変数(randomNumber)に納めています(第11行目)。そのうえで、ボタンをクリックしたとき、警告ダイアログボックスにその数値を表示します(第9行目)。

ただ、ボタンをクリックしたとき示されるランダムな小数値は、何度クリックしても同じ値です(図01-02-003)。それは、script要素に書かれたランダムな数値の変数(randomNumber)への代入が、body要素を読込んだとき1度行われたきりで(コード01-02-003第10〜12行目)、ボタンを押しても更新されないからです。

○01-02-04 関数を定義して呼出す

ボタンを押すたびに違うランダム数を出すには、Math.random()関数を呼出して変数に納めるステートメントも、onclick属性に定める処理として加えなければなりません。複数のステートメントをまとめて、何度も実行したいときには、関数として定めるのがよいでしょう。

関数はfunctionキーワードで定めます。関数名にはもちろん識別子(Word 01-02-002)を用います。続く丸括弧()の中には、必要があれば引数が加えられます。引数が複数あるときには、カンマ(,)で区切ります。そして、波括弧{}の中に関数本体となるステートメントを何行でも書き加えます。

function 関数名() {
  // ステートメント
}

ひとたび関数を定義すれば、いつでも関数名に演算子()を添えて呼出せます。引数を渡す場合には、()演算子の中に書き加えます。

関数名()

前掲コード01-02-003を書直して、ボタンクリックのたびに表示されるランダムな数値が変わるようにするには、たとえばつぎのような関数(showRandomNumber())を定めます。

<script> function showRandomNumber() {   var randomNumber = Math.random();   alert(randomNumber); } </script>

そして、button要素のonclick属性には、その関数呼出しをつぎのように加えればよいです。これで、ボタンをクリックするたびに新たなランダム数が変数(randomNumber)に入りますので、表示される小数値は毎回変わります。

<button type="button" onClick="showRandomNumber()">ランダム数</button>

ただ、この機会にもう少し手を入れましょう。ランダムな数は、小数値でなく、サイコロの目と同じ1から6までの整数にします。その場合の式の立て方は、つぎの表01-02-001のように4つの段階に分けて考えます。

第1に、Math.random()関数そのままでは、0以上1未満の小数値が返されます。そこで第2に、必要な値の幅、つまりほしい目の数6を掛け算します。すると、小数値は0以上6未満になります。第3に、値を整数値にします。そのためには、戻り値の小数点以下を切捨てます。切捨てに用いるのはMath.floor()関数です。これで、0から5までの6つの整数のいずれかが得られます。最後に1を加えれば、1から6までのサイコロの目がランダムに求められるのです。

一般にはつぎの式で、最小値から最大値までのランダムな整数が得られます。

Math.floor(Math.random() * ( 最大値 - 最小値 + 1)) + 最小値

関数を定義したり、スクリプトのステートメント数も増えてくると、JavaScriptはbody要素よりhead要素に書いた方が扱いやすくなってきます。そこで、つぎのコード01-02-004は、関数(showRandomNumber())を定義するscript要素はhead要素に含めました(第6〜11行目)。これで、ボタンをクリックするたびに、サイコロの目と同じ1から6までのランダムな整数が警告ダイアログボックスに示されます(図01-02-004)。

○01-02-05 ローカル変数とは

前掲コード01-02-004でランダムな数を代入した変数(randomNumber)は、つぎのように関数(showRandomNumber())の外で宣言しても同じように動きます。けれど、スクリプトとしての意味は変わります。

var randomNumber; function showRandomNumber() {   // var randomNumber = Math.floor(Math.random() * 6) + 1;   randomNumber = Math.floor(Math.random() * 6) + 1;   // 書替え   alert(randomNumber); }

変数は代入した値をメモリするのが役目です。var宣言を関数本体の中に置くか、関数の外に書くかによって、実はメモリされる場所が違うのです。

関数の外で宣言された変数は、ブラウザウィンドウの中身すべてを司るオブジェクトである「グローバルオブジェクト」に保持されます。「中身すべて」ということは、定義した関数そのものも、グローバルオブジェクトにメモリされるということです。

それに対して、関数を呼出すと、それを実行する間だけつくられるオブジェクトがあります。関数内でvar宣言した変数は、そのオブジェクトにメモリされます。このオブジェクトは、関数の処理が済めば原則として消し去られ、関数の外からはアクセス(「参照」)できません。関数の中でvar宣言された変数は、「ローカル変数」と呼ばれます。

メモリ場所が違うということは、関数の中と外に同じ名前でvar宣言した変数に異なる値を入れても、それぞれが別に保持されることになります。ただし、関数内から変数を参照したときは、ローカル変数の値が優先して取出されます。他方で、関数が定められたオブジェクトは、キーワードthisで参照できます。すると、ローカル変数と同名でグローバルオブジェクトに宣言された変数は、thisキーワードとドット(.)に続けて変数名を書けば参照できます。

前掲コード01-02-004の関数(showRandomNumber())につぎのような2行のステートメントを加えると、alert()メソッドがふたつに増えたので、警告ダイアログボックスは2回開きます。最初のダイアログボックスに示されるのは、もとのコード01-02-004と同じ1から6までのランダムな整数です。追加したalert()メソッドの引数には変数(randomNumber)にthisキーワードを添えましたので、ふたつ目のダイアログボックスにはグローバルオブジェクトにvar宣言した変数の値(10)が表れます。なお、グローバルオブジェクトに宣言した変数を「グローバル変数」と呼ぶことがあります。

var randomNumber = 10;   // 追加 function showRandomNumber() {   var randomNumber = Math.floor(Math.random() * 6) + 1;   alert(randomNumber);   alert(this.randomNumber);   // 追加 }

○01-02-06 WindowオブジェクトとCallオブジェクト

ブラウザウィンドウを開くと、JavaScriptのプログラムを実行するのに先立って、グローバルオブジェクトがつくられます。ブラウザウィンドウにおけるグローバルオブジェクトは、Windowオブジェクトです。

たとえば、前掲コード01-02-002で用いたdocument.write()メソッドの頭のdocumentというのは、Windowオブジェクトのプロパティです。write()はDocumentオブジェクトのメソッドなので、documentプロパティから参照を得て、そのオブジェクトに対してwrite()メソッドを呼出したのです。前掲コード01-02-002のdocument.write()メソッドの呼出し(第10行目)は、つぎのように書替えても同じように動きます。

// document.write(myText); var myObject = this.document; myObject.write(myText);

さらに、alert()はWindowオブジェクトのメソッドです。また、Windowオブジェクトにはwindowプロパティが備わっていて、Windowオブジェクト自身を参照します。すると、前掲コード01-02-004のalert()メソッドの呼出し(第9行目)は、つぎのように書替えても動きは変わりません。

// alert(randomNumber); window.alert(randomNumber);

もっとも、参照先を省いてプロパティやメソッドを用いると、これまで見たように多くの場合Windowオブジェクトがデフォルトで参照されます。つぎに説明するローカル変数も含めて何が参照されるのか理解してさえいれば、省ける記述は省いて差支えありません。

前項01-02-05「ローカル変数とは」に述べたとおり、ローカル変数は関数を「実行する間だけつくられるオブジェクト」に保持されます。これをCallオブジェクトといいます。ローカル変数のほか、関数に渡された引数も、このCallオブジェクトに納められます。

そして、関数の処理が終われば、CallオブジェクトはJavaScriptのメモリ管理の仕組み(「ガベージコレクション」という技術)により、原則として消し去られます。したがって、Callオブジェクトは、関数が呼出されるたびに新たにつくられるのです。ローカル変数の値もその都度改められ、メモリに残りません。

また、Callオブジェクトには、関数の外からはアクセスできない仕様とされています。つまり、異なる関数の中に同じ名前のローカル変数が宣言されていても、互いにまったく関わり合いをもちません。関数内のローカル変数の値が、他の関数の同名の変数により変えられたり、逆に他の関数のローカル変数を書替えることはないのです。

変数名の重複を気にしなくて済み、メモリも無駄に費やさないことがローカル変数の利点です。逆に、複数の関数から参照したり、関数の処理を終えてもメモリに残す必要がある値は、グローバル変数やグローバルオブジェクトの中にあるオブジェクトに納めます。

○01-02-07 配列とオブジェクトの参照

ひとつの変数には、ひとつの値しか入れられません。ただし、値は数値や文字列にかぎらず、オブジェクトも納められます。中でもArrayオブジェクトには値がいくつでも加えられるので、値をまとめて扱うことができます。Arrayオブジェクトは「配列」とも呼ばれます。

オブジェクトをつくるには、オブジェクトと同じ名前のコンストラクタという関数をnew演算子に添えて呼出すのが原則です。たとえば、配列のオブジェクトはつぎのようにしてつくります。

var my_array = new Array();

new演算子でArray()コンストラクタ関数を呼出し、つくられた配列(Array)のオブジェクトが変数(my_array)に納められました。このとき変数に入ったオブジェクトも、Arrayオブジェクトと呼ぶことができます。けれど、Arrayオブジェクト(のコンストラクタ)からArrayオブジェクトができた、というのは紛らわしいです。つくられたオブジェクトは「インスタンス」とも呼ばれますので、場合によってこの語を用います。

配列には、Array.push()メソッドで値が加えられます。配列に納められる値には、0から始まる通し番号の整数がインデックスとして与えられます。配列の中のひとつひとつの値は、エレメント(要素)と呼ばれます。なお、配列エレメントには、数値や文字列にかぎらず、オブジェクトも納められます。

つぎのコードは、新たにつくった配列(my_array)にArray.push()メソッドで3つのエレメントを加え、Window.alert()メソッドで配列の中身を表示します。警告ダイアログボックスには、すべての配列エレメントがカンマ(,)区切りで示されます(図01-02-006)。

var my_array = new Array(); my_array.push(100); my_array.push(200); my_array.push(300); alert(my_array);   // 表示: 100,200,300

配列エレメントには、角括弧(ブラケット)[]演算子の中にインデックスを書き加えてアクセスします。エレメントの値は、取出すだけでなく、書替えられます。たとえば、前掲の配列(my_array)のエレメントは、つぎのように取得・変更することができます。警告ダイアログボックスの表示内容は、コードにコメントとして書添えました。

var element1 = my_array[1]; alert(element1);   // 表示: 200 my_array[2] = element1; alert(my_array);   // 表示: 100,200,200

Arrayオブジェクトは、他の多くのオブジェクトとは違い、コンストラクタを使わずにインスタンスがつくれます。角括弧[]演算子を空のまま書けば、それで新たな配列インスタンスができあがります。また、角括弧[]演算子で任意のインデックスにエレメントが加えられますので、Array.push()メソッドは必ずしも使わずに済みます。

var my_array = []; my_array[0] = 100; my_array[1] = 200; my_array[2] = 300; alert(my_array);   // 表示: 100,200,300

さらに、[]演算子を空にせず、カンマ区切りで直に値を書き加えれば、エレメントの入った配列がつくれます。このように、Array()コンストラクタを呼出すことなく、[]演算子で書かれた配列を配列リテラルと呼ぶことがあります。

var my_array = [100, 200, 300]; alert(my_array);   // 表示: 100,200,300

配列の応用練習としてDateオブジェクトも使って、現在の曜日を漢字で表してみましょう。Dateオブジェクトはお約束どおり、コンストラクタ関数を呼出してつくります。Dateインスタンスは日時についての情報をもち、それらの値はメソッドで取出します。そして、曜日はDate.getDay()メソッドで調べられます。戻り値は日曜日が0、土曜日を6とする連番の整数です。

以下のコード01-02-005は、今現在の日時情報に加えて、漢字の曜日を警告ダイアログボックスに表示します(図01-02-007)。Date()コンストラクタを引数なしで呼出すと、そのときの日時情報をもったインスタンスがつくられます(第1行目)。そのインスタンス(my_date)に対してDate.getDay()メソッドを呼出せば、現在の曜日を示す整数が返されます(第2行目)。そこで、曜日の整数インデックスに合わせて曜日の文字列が並んだ配列リテラルをつくります(第3行目)。あとは、配列から曜日のインデックスにあるエレメントを取出せば、それが今日の曜日です(第4行目)。

なお、前掲コード01-02-005ではWindow.alert()メソッドにも、引数として配列リテラルを渡しました(第4行目)。最初のエレメントはDateインスタンス(my_date)、つぎが配列(my_array)から取出した曜日の文字列です。このように配列リテラルを引数に使えば、ひとつの警告ダイアログボックスにカンマ区切りで複数の値を示すことができるのです(前掲図01-02-007)。

配列を含むオブジェクト(「参照型」と呼ばれます)の扱いでは、その参照について知っておかなければなりません。その前に、オブジェクトとは扱いが異なる数値(「基本型」に属します)の場合を確かめておきましょう。ひとつの変数(a)の値を別の変数(b)に代入し、その後初めの変数値を書替えています。結果、ふたつの変数には別々の値が入っています。

var a = 100; var b = a; var a = 200; alert([a, b]);   // 表示: 200,100

つぎは、参照型のデータである配列の場合です。変数(a)に配列リテラルでインスタンスをつくり、そのインスタンスを別の変数(b)に代入します。その後、初めの配列にエレメントを加えました。すると、もうひとつの変数の配列もエレメントが増えて、同じ中身になっています。

var a = [100]; var b = a; a[1] = 200; alert(a); // 表示: 100,200 alert(b); // 表示: 100,200

なぜなら、参照型である配列のインスタンスは、変数に直接納められるのではないからです。オブジェクトは変数とは別の場所につくられます。そして、変数にはオブジェクトのありかが保持されるのです。別の変数に代入したときも、同じオブジェクトの場所が渡されるだけです。オブジェクトのありかを「参照」と呼びます。つまり、ひとつの変数が参照するオブジェクトに手を加えれば、同じ参照をもつすべての変数についてもオブジェクトが書替わることになるのです。

これは銀行口座の取引と似ているかもしれません。口座を開くというのは、その銀行の本店コンピュータに取引のデータをつくることです。すると、通帳やキャッシュカードとともに口座番号が与えられます。キャッシュカードはどの支店でもATMでも使え、口座番号にもとづいて現金が出し入れされ、口座の出納記録は書替えられます。支店やATMがいくつあっても、ひとつの口座番号が「参照」する口座データはひとつなのです。

作成者: 野中文雄
更新日: 2012年12月23日 コードのhead要素の記述を統一し、それにともない行番号の参照を修正。また、サンプルファイルのリンクを追加。
作成日: 2012年7月9日