3. JavaScript導入


3-a. JavaScriptってどう書くの?

 さて、そろそろ本題に入りましょう。 本ページではこれから、動くゲームをJavaScriptという、 プログラミング言語で書く方法を説明していきます。 書き方はこんな感じです。

<html> <head> <title>ゲームタイトル</title> </head> <body> <script type="text/JavaScript"> ※ここにプログラムを書きます </script> </body> </html>

 上記の、<script type="text/JavaScript"> ~ </script> は、 JavaScript を使用する際のお約束だと思って下さい。 上に「※ここにプログラムを書きます」と書いている部分がありますが、 そこに、これから解説する「JavaScriptのプログラム」を色々と書くことになります。

3-b. 「こんにちは」と表示してみましょう!

 それでは、Htmlの時と同様に、JavaScriptを使用して 「こんにちは」と書いてみましょう。

<html> <head> <title>ゲームタイトル</title> </head> <body> <script type="text/JavaScript"> alert( "こんにちは" ); </script> </body> </html>

 上書き保存して、再読み込みして…
↓alert表示の例
 どうでしょうか? ダイアログが出て「こんにちは」と表示されたでしょうか?

 この様にして、alertという文字を打ち込んで、 (と)で囲んで、さらにその中に "と" で囲んだものを書きます。 一連の記述の最後には ;(セミコロン) を書きます。
 このように、"と"で囲って書いたものが そのままダイアログ上で表示されるというのが、関数 alert の機能です。 おっと、関数というのは聞きなれない言葉ですね。 こういう風な形、 つまり英字に続いて「(」と「)」が続く形をしているものを、 まとめて関数と呼んでいるのです。 今後も出てきますので今回はこれくらいにしておきますね。


3-c. 続けて「今晩は」と表示してみましょう!

 もう「今晩は」と表示するのはカンタンですよね?

<html> <head> <title>ゲームタイトル</title> </head> <body> <script type="text/JavaScript"> alert( "今晩は" ); </script> </body> </html>

ですから。

 さて、では、ちょっと次のを試して見て下さい。


<html> <head> <title>ゲームタイトル</title> </head> <body> <script type="text/JavaScript"> alert( "こんにちは" ); alert( "今晩は" ); </script> </body> </html>

 どうでしょうか?思った通りの動作でしたか? この様に、関数は続けて書くことができます。 ウェブブラウザはそれを、上から下へ順に実行していきます。 なので順番にダイアログが出ることになります。 ちょっとわかりづらい場合は、 alertの中の文字や順番を変更して色々と試してみてください。

3-d. ブラウザを調べましょう。

 WEBブラウザはほとんどの方が インターネットエクスプローラ を使用されていると思いますが、 ネットスケープや、 おススメしているFireFoxというものもあります。
 先程書いた alert みたいな関数はどちらでも動くのですが、 やっかいな事に、片方でしか動かないものもあるのですよ。 そこで、本格的な説明に入る前に、その判別方法を説明します。 以下のプログラムを <body> ~ </body> の間に 挿入してみて下さい。

<script type="text/JavaScript"> // ブラウザバージョンセット var brver; // ブラウザのバージョン var NN6; // NN6.0以上なら true var IE5; // IE5.0以上なら true brver = eval(0 + navigator.appVersion.charAt(0)); NN6 = (brver >= 5 && navigator.appName=="Netscape"); IE5 = (brver >= 4 && navigator.userAgent.indexOf("MSIE")!=-1); alert( NN6 ); // 本文はここへ </script>

 実行すると、 FireFoxや、ネットスケープ6.0以上で見ている方は true、 インターネットエクスプローラーの方やその他の方は false と表示されるハズです。 うまくいきましたか? これを確認したら、NN6 を IE5 にして試してみて下さいね。
 さてさて、新しい事が色々出てきましたが、 3点説明させてもらいます。
  1. //
     これ、便利なので覚えて下さい! // (半角スラッシュ2つです…「スラスラ」とか読んでます)を書くと、その行の // より右側には 好きな事を書いておけるのです。 何を書いてもコンピュータは無視します。 逆に言えば、ここに書いてあっても何もしてくれません。 ま、というわけで普通は上の様に、// の右に色々とコメントを書いておきます。 便利でしょ。 あ、もちろん <script type="text/JavaScript">と</script>に囲われた間だけしか効きませんけど。 簡単なので使ってみて下さいね!
  2. var
     これは重要なので説明しちゃいます。 var の後に、英数字の文字を書いて ;(セミコロン)を書くと、 それは、その文字列が変数として扱われるという意味になります。 例えば、上の本文の所にこう書いてみて下さい。

    var test; // test という名前の変数を用意してね~ test = 123; // test の中身は 123 だよ~ alert( test ); // test の中身を表示して~

     実行(再読み込み)してみましょう。 どうでしょう。123と表示されましたでしょうか?
     説明は上のコメントに書いた通りですが、もう少し説明しますと、 test という名札の付いた箱を用意して、 その中身に 123 を入れて、その中身を表示するっていうプログラムです。
     ここまで来ると、もう本格的なプログラムなんですけど、 どうです?結構カンタンですよね?
     なお「=」については後でもう一度解説します。
  3. ブラウザバージョンセット
     全体的には「おまじない」的にこういうものだと思って下さい。 このままコピーして使いましょう。 もう少し詳しくなって、中身も知りたくなった時は、 alert( navigator.appVersion ) 等として、 それぞれの中身を表示してみましょう。
     さて、少し先になりますが4章の「4-d.絵を動かしてみましょう」 などはこれが無いと動きません。 非常に重要なのでこの部分は再掲します。

    // ブラウザバージョンセット var brver; // ブラウザのバージョン var NN6; // NN6.0以上なら true var IE5; // IE5.0以上なら true brver = eval(0 + navigator.appVersion.charAt(0)); NN6 = (brver >= 5 && navigator.appName=="Netscape"); IE5 = (brver >= 4 && navigator.userAgent.indexOf("MSIE")!=-1);

     なお上記では説明しやすくするためbody内に書いていますが、 実際にはhead内に書いて使用します。 全体から見た挿入位置は「3-f. JavaScriptの基本形」に書いてありますので、 再度確認してください。

3-e. アンカーから入力してみましょう

 文字を押すと他のページに飛ぶ設定をしているページがよくあります。 ってゆーか、ここへ来る方法もそれですね。あれをアンカーと呼びます。 このアンカーを押した時に、JavaScript の関数が起動するようにする事も できるのです。それを利用してみましょう。

<html> <head> <script type="text/JavaScript"> function gameStart() { alert( "ゲーム開始!" ); } </script> </head> <body> <a href="JavaScript:gameStart()">押したらスタート</a> </body> </html>

じっくり解説

  1. alert
    ↓押した後の例
     「3-b. こんにちはと表示してみましょう!」 でも説明しましたが、メッセージを表示してOKが押されるまで待つ関数です。 こんな風に便利に使えるので、今後もちょくちょく登場させますね。

  2. function
    まずは呼び出される方を準備します。 具体的には、functionという命令を用いて関数を定義します。以下の様に書きます。

    function 関数名( 変数名 , 変数名… ) { 中身 }

    さてさて function で何ができるかというと、今まで出てきた「alert」 のようなものを、今度は自分で定義することができるようになるのです。
     関数は、alert のようにJavaScriptで初めから定義されているものと、 今回の gameStart のように自分で定義するものがあります。 最初から定義されているものはもちろん名前とか中身は変更できませんが、 自分で定義するものは自由に定義、変更が可能です。 gameStartという名前は、私が決めました。
     自作関数の定義の例を書きますね。

    function Test() { alert( "てすとです~" ); }

     これは Test という名前の関数を定義しました。 実はこのプログラムだけでは見た目は何も起きません。 これでアンカーなど別の場所から Test() を呼び出すと、 関数定義された中が呼ばれ「てすとです~」と表示されます。
     ではここで少し考えていただきたいのですが、

    alert( "A" ); function Test() { alert( "B" ); alert( "C" ); } alert( "D" ); Test(); alert( "E" );

     これを実行すると、どういう順番でalertが表示されると思いますか?
     実は A→D→B→C→E の順なんですね~。どうでしょう?理由はわかりますか? 是非色々試したりして理解を深めていってください。
     さて、自分で定義する関数の中身も 初めから定義してある関数や、 自分で作った関数を使って書きます。 今回は alert という、初めから定義してある関数を使って書きました。 次からは、このgameStartという関数を使うことも可能です。 つまり一度定義してしまえば、最初から定義してある関数と何も変わりません。  ゲーム制作を意識すると、
    1. アンカーから呼び出される関数
    2. ゲームを初期化する関数
    3. ゲーム本体の関数
    という形にするのが良いと思います。 他の関数もどんどん作りましょう。 機能単位で細かく分けると、 美しくてバグ(不具合とか問題のことをバグと言います)の少ないプログラムを作ることができます。

    //------------------------------------------------ // ゲーム開始関数(アンカークリックで呼ばれる) //------------------------------------------------ function gameStart() { // 自分で関数を定義 alert("ゲーム開始!"); // JavaScript定義されている関数の呼び出し gameInit(); // 初期化 (下記で定義されている自作関数の呼び出し) gameBody(); // 本体 (下記で定義されている自作関数の呼び出し) } //------------------------------------------------ // ゲーム初期化関数 //------------------------------------------------ function gameInit() { // 更に自作関数を定義 alert("ゲーム初期化"); ※各種初期化処理を書きます } //------------------------------------------------ // ゲーム本体の関数(メインループ) //------------------------------------------------ function gameBody() { // 更に自作関数を定義 alert("ゲーム本体"); ※ゲーム処理の本体を書きます }

     なお今回のgameStartのように変数を使わない場合は、 変数名を省略して () と書きます。 またプログラムが大きくなると関数も多くなるので、 関数の名前はわかりやすく付けるのがコツです。

    ヒント:詳しく知りたい方へ
     実はJavaScriptに定義されているもの全てを関数と呼ぶのは本当は間違いで、 メソッドなどの文言を正確には使用しなければならない場合もあります。 ただどう呼んでもプログラムには関係無いので、 「ゲームの作り方 by BFF」の中では区別せず、 すべてを「関数」と呼ぶことにします。
     関数定義を書く位置についても解説しましょう。 関数定義はhead内に書くのが良いです。 呼び出しはbody内になります。  理由はheadはbodyより必ず先に実行されるためです。 これでbodyで呼び出す前に関数定義が確実に終わっているようになります。

    <html> <head> <script type="text/JavaScript"> : ※自作関数定義(function宣言) : </script> </head> <body> ※HTML本体やアンカーからのJavaScript呼び出し等 </body> </html>

    ブラウザとバージョンはすべての処理で使うので、 head内でも最初に書きます。

  3. <a href=…> ~ </a>
     これを用いてアンカーと押された時に起動する関数を指定します。 通常は href= の後に飛び先を指定するのですが、 そこに JavaScript と書いて :(コロン)を書いて、関数を書きます。 ""(ダブルクォーテーション)で囲うと良いでしょう。

    <a href="Javascript:関数名( 第1引数 , 第2引数… )">押されるもの</a>

     こんな感じですが、 上の例のように呼び出す関数に引数が無い場合は、() と書きます。

3-f. JavaScriptの基本形

 この章はJavaScriptの基本を解説しました。 色々な要素が出てきたので、何をどこに書くべきかがちょっとわかりづらいですよね。 まとめまてみましょう。

<html> <head> <script type="text/JavaScript"> ※ブラウザバージョンセット(IE5やNN6の定義) ※自作変数定義(var宣言) ※自作関数定義(function宣言) </script> </head> <body> ※HTML本体やアンカーからのJavaScript:gameStart()呼び出し等 </body> </html>

 4章以降の解説ではこれを知っているものとして話を進めていきます。 ですのでしっかり覚えるか、毎回ここに戻って確認しながら、ゲームを作っていきましょう!

3-g. エラーメッセージについて

↓IEのエラーメッセージの例
 JavaScriptでページを作っていると、 うまくうごかない場合が良くあります。 私もしょっちゅうです。 こんなとき、エラーメッセージが出ている場合がよくあります。 例えば綴りを間違えていたり、; が抜けてたり…
 ファイアーフォックス3.xの場合は、 ツール>エラーコンソール でエラーメッセージを見ることができます。
 インターネットエクスプローラーの方は、 ツール>インターネットオプション>詳細設定>スクリプトエラーごとに通知を表示する でエラーメッセージは出てくるようですが、
ツール(表示)>インターネットオプション>詳細設定>ブラウズ
で、「スクリプトのデバッグを使用しない(無効)」 のチェックを外すとエラーメッセージが出て来るという情報もあります。 バージョンによって違う動作になるかも知れません。
 エラーを見ると、行数(ライン)とかエラーの内容が出ています。 行数と言うのは、そのページの最初から数えて何行目かという事です。 最初はちょっとわかりづらいかも知れませんが、 とりあえずエラーになっている位置はおおよそ特定できますし、 慣れると非常に便利です。 これからJavaScriptで作っていくと必要になりますんで、 今のうちに設定しておきましょう!
 この中でも気をつけることがいくつかあります。 「ライン1」でエラーが発生する場合がありますが、 これは、アンカー内で問題が起きているということです。 例えば href="JavaScript:gamestart()" と書いてしまった場合とかに出ますね。 (本当は href="JavaScript:gameStart()" でなければならないということです) また「オブジェクトがありません」とか「オブジェクトを指定してください」と出ることがありますが、 大抵の場合、関数や変数を定義していないのに使用しているというケースが多いです。 実はこのあたりがファイアーフォックスの方の表示が親切なので、 ゲームを作るならファイアーフォックスがお勧めだったりします。
 いずれにしても最初は難しいと思いますが、経験なので、 失敗した分だけ、エラーを見た分だけ、レベルが上がっていくものですので、 くじけずに頑張ってください。
(情報協力:ふむふむさん)

ヒント:ファイアーフォックスとは
 フリーのウェブブラウザーです。ココからダウンロードできます。 最近少しずつFireFoxのユーザーも増えているようです。 FireFox(ファイアーフォックス)関連書籍も結構出ていますので十分に使えるのではないでしょうか。

3-h. アンケート

 前章「2.HTML」までを理解された方で、 本章「3.JavaScript導入」についても一区切りついた方にお願いです(必須ではありません)。 よろしければ、「3-a.JavaScriptってどう書くの?」~「3-g.エラーメッセージについて」について、 最もあてはまるものを選んでいただいて 「アンケートを送信する」を押してください。
既に知っていました
1週間以内でだいたい理解できました
1ヶ月以内でだいたい理解できました
1年以内でだいたい理解できました
1年以上かかりましたがだいたい理解できました
理解できそうに無いのですぐあきらめました
1週間やってみましたがあきらめました
1ヶ月やってみましたがあきらめました
1年やってみましたがあきらめました
1年以上やってみましたがあきらめました
コメント欄:
※コメント欄にはご意見やわかり辛かった部分の指摘等がありましたらお願いします。 (なお質問についてはは掲示板までお願いします)
 ご協力ありがとうございます。

目次へ戻る