[Labyrinthe Noir]>[Top]>[Computer Forum]>[実用JavaScript集]>[こども工作教室]>

サイコロのソースと解説

<html>
<head>
<title>サイコロ</title>
</head>
<body>
<h3>サイコロ</h3>
<hr>

</body>
</html>

【最初の準備】

道具として使うのは、２つのプログラムです。
１つは、メモ帳。もう１つは「Internet Explorer」などのブラウザです。

まずメモ帳を立ち上げましょう。
画面左下の「スタート」メニューを開き、「すべてのプログラム」をクリック、次のメニューが出たら「アクセサリ」を選んで、また次のメニューから「メモ帳」をクリックします。

メモ帳が開いたら、左のソースを入力しましょう。

入力ができたら、「名前を付けて保存」します。画面上のウインドウタイトルのしたに「ファイル」などのメニューが並んでいます。この「ファイル」をクリックすると下にメニューが出てきますので、そこから「名前を付けて保存」を選びます。

するとダイヤログという小さなウインドウが現れます。
ファイル名は「sai.html」、ファイルの種類は「すべてのファイル」に変更してください。クリックすると変更のための一覧が出てきます。
保存する場所は、デスクトップまたはマイドキュメントを左のアイコンをクリックして選びます。
用意ができたら、「保存」のボタンを押します。

このようにタグを使ってページを書いたものをHTMLファイルと言います。
HTMLとはHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、 ハイパーテキスト記述言語と訳せます。
ハイパーテキストというのは、マウスでクリックするとリンク先が開く仕組みのことです。その仕組みを書く（記述する）言葉（言語）なので、HTMLと呼びます。

保存ができたら、そのデスクトップを表示させるか、マイドキュメントを開きます。この時、メモ帳は閉じないで、小さくして画面の半分くらいにしておくと良いでしょう。
保存したファイルが見つかったら、それをダブルクリックしてブラウザで開きます。
メモ帳の画面とブラウザの画面を半分づつにして並べると作業がしやすいです。

１つ１つ進めて行きますが、少し変更したら上書き保存して、ブラウザを更新して確認してください。
２つのウインドウを切換ながら作業しますので、忘れないように作業する方のウインドウを選ぶようにします。

上書き保存は「Ctrl」キーを押しながら「Ｓ」キーを押します。
ウインドウの切換は「Alt」キーを押しながら「tab」キーを押します。
ブラウザの画面の更新は「Ctrl」キーを押しながら「R」キーを押します。
このようにキーボードを使って、手短に操作することをショートカットと言います。

↑このような囲いの中は、少し難しいことを付け足しています。判らないときは読まずに先に進んでかまいません。

<html>
<head>
<title>サイコロ</title>
</head>
<body>
<h3>サイコロ</h3>
<hr>
<form name="form1">
<input name="sai" type="text">
<input type="button" value="振る" onClick="getNum()">
</form>
</body>
</html>

【フォームの作成】

HTMLファイルは、データの入出力（入れたり出したり）をすることができます。
例えば、アンケートフォームを用意して、それをメールで送信したり、サーバのプログラムに直接送ったりすることができます。

フォームには文字を入力するだけでなく、ボタンを置くこともできます。
今回はフォーム内に、サイコロの数字が出る場所と、サイコロを振るボタンを用意しましょう。

<form></form>がフォーム全体のくくりです。この中に関連する部品を置きます。

<input>はフォーム専用のタグで、データの入出力を行うのに使います。
ここでは、テキストボックス（type="text"）とボタン（type="button"）の2つがあります。

ボタンにはサイコロの出目を計算するプログラムを呼び出すために 「onClick="getNum()"」と書かれています。
これは「onClick」が「ボタンをクリックしたら」という意味で、「getNum()」を呼び出しなさいということを表しています。

このように呼び出される名前の付いたスクリプト（プログラム）をユーザー関数と呼びます。

フォームの名前が「form1」となっていますが、「form」の方が判りやすくてスッキリします。
ところが、フォームを管理するために「form」という言葉をスクリプトが使うことがあります。命令語や予約語という形で使ってはいけない、使わない方が良い言葉があります。
同じ言葉を違う用途に使ってしまうと、コンピュータには命令なのか、対象の名前なのか判らなくなってしまい、これが誤動作の原因になってしまうことがあるのです。
「form」については、動作はするようですが、フォームを管理するときにも使っているので、できれば使わない方が良いでしょう。
JavaScriptでは柔軟に対応してくれますが、他の言語を勉強したときにできないこともありますので、ユーザーが自由に使える名称には、簡単な言葉をそのまま使わない方が良いでしょう。
プログラムの言語は大抵が英語に近いので、日本語をローマ字で使うことは比較的安心できます。

<html>
<head>
<title>サイコロ</title>
</head>
<body>
<h3>サイコロ</h3>
<hr>
<form name="form1">
<input name="sai" type="text">
<input type="button" value="振る" onClick="getNum()">
</form>

<script language="JavaScript">
function getNum() {
r = Math.floor(Math.random() * 6) + 1;
document.form1.sai.value = r;
}
</script>
</body>
</html>

【乱数を表示】

スクリプトを書くために<script>タグを使います。
「language」というオプションを使って、「JavaScript」というスクリプト言語を使うことを宣言しています。これは他にも「JScript」というものがあり、書き方が違うので、最初にコンピュータに教えておくのです。

JavaScript(ジャバスクリプト）に似たプログラム言語にJava（ジャバ）というものがあります。
この２つは名前が似ていますが、その書式はまったく違う別の言語です。作った人も違い、なんの関係もありません。

ボタンから呼び出されるユーザー関数getNum()を書きましょう。
最初にユーザー関数を宣言する必要があるので、「function」を使って今から「getNum()」を書きますと、これも教えているのです。
そして、「｛｝」を使って、その中にプログラムを書くことで、終わりがどこにあるかも教えています。

さて、このgetNum()では、乱数（勝手に取り出した数）を使って、１〜６の数字の１つをコンピュータが勝手に決めて、表示用のテキストボックスに送り出しています。
詳しく見ると次の2段階になっています。

1行目で、変数rという、データ（文字や数値）を入れる箱を用意しています。
「=」は右から左にデータを入れなさい（代入）という意味です。
「=」の右には計算式があります。前から順番に実行されますが、「()」があるときは、括弧の中から見ていきます。
まず、Math.random()で０〜１の間にある小さな数字を乱数として取り出しています。これはコンピュータが勝手に数字を１つ作ってくれるのです。
次にそれを「* 6」しています。これは「×６」の意味なので、乱数は０〜６の間になります。この時、丁度の０や６にはなりません。その間の小数です。
それを「Math.floor()」を使って小数部分を取り払っています。小数点以下「切り捨て」ということです。切り捨てられると少数は整数に変わります。「.」より下の数字がなくなるからです。これにより０〜６の間の数だったものが「０、１、２、３、４、５」という６つの数字に変わります。
そして、最後に「+ 1」をしますので「１、２、３、４、５、６」の６つのどれかになるのです。
変数rには、その６つの数字のどれかが入っています。

変数（へんすう）は大変便利な入れ物です。これがないとプログラムは作れないと言っても良いでしょう。
JavaScriptでは、変数の中身を自由に変更できます。文字でも数字でも、それらを混ぜても入れることができます。
ただし、取り出すときには、文字か数字かを注意しないといけません。
ともかく、データを記録して、あちこちに持って運ぶのに使う入れ物が変数なのです。

次に2行目を見てみましょう。
「document.form1.sai.value」には１つ１つ意味があります。
「document」は画面に表示しているページ全体を表しています。「文書」という意味です。
そのページの中にある「form1」という名前の部品を探し、次にその部品にある「sai」というもう１つ小さな部品を示しています。
「sai」は<input>タグで作られたテキストボックスでした。
最後の 「value」はそのテキストボックスに入力されたデータ（内容）を示しています。
「=」は右から左へデータを入れ換えるので、右にある変数rをフォームのテキストボックスの中に入れなさいという意味になるのです。

【この時点の sai.html を別枠で表示】

<html>
<head>
<title>サイコロ</title>
</head>
<body>
<h3>サイコロ</h3>
<hr>
<form name="form1">
<input name="sai" type="text">
<input type="button" value="振る" onClick="getNum()">
</form>
<hr>
<div id="rireki">-</div>

<script language="JavaScript">
var kiroku = "";

function getNum() {
r = Math.floor(Math.random() * 6) + 1;
kiroku += r;
document.form1.sai.value = r;
document.getElementById("rireki").innerHTML = kiroku;
}
</script>
</body>
</html>

【履歴の表示】

サイコロの出目を記録して残してみましょう。
フォームの下に表示用の場所を確保するために、<div>タグを使って名前を付けます。「id="rireki"」という名前（ID）を付けておきます。

出目の記録には変数「kiroku」を使います。スクリプトの最初でこれを初期化して空にしておきます。「""」は文字が入っていない、空っぽのデータだということになります。難しいことですが、本当に何もないのだとコンピュータは考えません、空っぽの文字データがあると考えます。

次に、 「getNum()」内で、乱数によって出目が変数rに入るので、これを変数kirokuに足しています。
変数kirokuは最初に「kiroku = ""」としているので、この時点で空っぽではあるが、文字を入れる入れ物だとコンピュータに教えています。これのお陰で、ここでは足し算ではなく、文字を付け足すということが行われます。
例えば、「1+1」は「2」というのが足し算ですが、文字を足すというのは「1+1」が「11」になるのです。
今回は、出目を順番に記録するのが目的で、足し算がしたいのではありません。そのために、変数kirokuを文字の収納箱として利用しています。

JavaScriptの変数は文字用にも数字用にも同じものを使うことができますが、古くからある言語では最初に文字用か数字用かを宣言させ、後から変えることもできません。
柔軟に文字や数字を入れられるJavaScriptの変数ですが、取り出すときには、どちらか決まっていないとプログラムが動かなくなる「エラー」が起こってしまいます。
文字のデータを「文字列」、数のデータを「数値」と呼びますが、数字はそのどちらにもなるのです。そのため、変数に数字を入れる時は、文字列か数値か決めておきます。
「kiroku = "0"」とすると、文字列が入っていることになりますが、「kiroku = 0」とすると数値の「0」になります。
ちなみに、文字列の場合、何もないときは「""」ですが、数値の場合は「0」が何もないということになります。

変数kirokuはそのままrirekiの場所へ引き渡されています。
「document」は前と同じ表示の内容全体を示しています。その中にあるIDが「rireki」の場所を示すのに「getElementById()」を使っています。その「rireki」の中にHTMLを差し込みなさいという指示が「innerHTML」です。
HTMLというのは、タグを使ったページの書き方のことでしたね。

<html>
<head>
<title>サイコロ</title>
</head>
<body>
<h3>サイコロ</h3>
<hr>
<form name="form1">
<input name="sai" type="text">
<input type="button" value="振る" onClick="getNum()">
</form>

<script language="JavaScript">
var kiroku = "";

function getNum() {
r = Math.floor(Math.random() * 6) + 1;
document.form1.sai.value = r;
document.getElementById("rireki").innerHTML = kiroku + "<font color='#FF0000'>" + r + "</font>";
kiroku += r;
}
</script>
<hr>
<div id="rireki">-</div>
</body>
</html>

【色を着ける】

少し見た目に色を着けてみよう。

出たばかりの出目に赤い色を付けてみたいと思います。

「kiroku += r」の位置が変更されていることに注意が必要です。
先に変数kirokuの中に変数ｒを入れてしまうと、どこを赤くして良いのか、指示がやりづらくなります。
そこで、先にkirokuを普通に置いて、続けて赤く色を着けた変数ｒの内容を「rireki」に出力（ここでは画面に出すこと）します。
その後で、２つのデータを１つに足しておかないと、次に使えません。

出力（しゅつりょく）とは、コンピュータから出て行くということです。
画面やプリンタを使って、人に見せるためにデータを表示させることを言います。

反対に入力（にゅうりょく）という言葉があります。
これは、コンピュータにデータを入れるということです。
キーボードを打ったり、マウスを動かしたり、クリックすることを言います。

文字に色を着けるには<font>タグを使います。
出力の仕方が「innerHTML」なので、タグをそのまま出力してやると、HTML文書の一部として画面に表示されます。
これを利用して色を着けることができるのです。
<font>タグには色を着ける「color」と、文字の大きさを変える「size」というオプションが使えます。今回は「color」に色番号を指定して色を着けましょう。

色番号を「#FF0000」以外にも変更して試してみましょう。
最初の2桁が赤、次の2桁が緑、最後の2桁が青になります。RGB（Red/Green/Blue）と覚えます。これが光の三原色で、TVやモニタの色は全てこの3色を混ぜて作られています。

それぞれの色は2桁の16進数になっています。16進数というのは、０〜９とＡ(10)からＦ(15)の16文字を数字と考えて数える方法です。
「9」の次は「A」、「F」の次は「10」、「100」の前が「FF」です。
慣れない内は2桁を同じ文字にして「00」〜「FF」の16段階で変更すると良いでしょう。
数字を大きくするとその色が強くなります。３つの色が混ざると白になるところが、絵の具と大きく違うところです。

参考：#FF0000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF #000000 #999999 #FFFFFF #FF5500 #666600 #006600

【この時点の sai.html を別枠で表示】

オプションの色番号は「''」の間に書かれています。
これまでは「""」の間に書かれていましたね。
これは、「""」の中にタグがあるからです。「""」の中では「""」が使えませんので、代わりに「''」を使います。
どうして使えないのか判りますか？
文字列を「""」で囲むのは基本です。「"A"」とすると、文字列は「A」です。
「"<tag op="num">"」だと、「<tag op=」と「>」が文字列になり、「num」という、なんだか判らないものがあると判断して、式が正しくないとしてエラーが起こります。
そこで、「"<tag op='num'>"」と書くことで、全体が文字列として扱われるのです。

<script language="JavaScript">
var kiroku = "";

function getNum() {
r = Math.floor(Math.random() * 6) + 1;
document.form1.sai.value = r;
document.getElementById("rireki").innerHTML = kiroku + " <font color='#FF0000'>" + r + "</font>";
kiroku = kiroku + "¶" + r;
}
</script>

【改良点：履歴の折り返し】

サイコロをどんどん振ると、履歴は画面の外へと出て行ってしまい、見えなくなってしまいました。
そこで、改良をして履歴が見えるようにしたいと思います。

画面の外に出て行かないように行を途中で折りましょう。
数字の場合、途中で改行が入らないのですが、普通の日本語の文章であれば行が一杯になると改行されます。
また、英語の場合は、単語の間にある半角スペースを基準にして改行を行います。

そこで、数字の前に半角スペースを入れましょう。
「」のところには半角スペースを入れてください。見えないので代わりに記号を置いてみました。
変数kirokuにも同様に半角スペースを入れます。

「」の部分は実際にはこう見えます。

" <font color='#FF0000'>"

kiroku = kiroku + " " + r;

【完成】

このサイコロはプログラムも短く、画面にもあまり部品がありません。
そのために改良する部分がないので、余計な遊びができないので、次のスロットゲームで色々と試してみると面白いでしょう。
ここでは、HTMLやスクリプトに必要なものが大まかに判れば良いと思います。
また、基本的な操作や用語の確認もしていますので、解説部分はじっくりと読んで欲しいところです。
その中でも変数がどういうものかは重要です。これが扱えたら、あとは文法を覚えるだけです。自由な発想で遊べるブロックのような存在が変数で、アイデア次第で色々な利用方法が考えられます。と言っても、基本的に文字か数字しか入りません。またに、オブジェクトとして、部品の集まりや全体的なものをまとめて入れてしまうこともあります。
文法は使いながら覚えるのが一番です。間違ったところを見つけるためには経験も重要ですが、多くの失敗を重ねることで、それが経験となります。その連続がプログラム作りになるのです。
スロットゲームでは、プログラムを少しずつ作りながら、問題点も解決したり、改良点を見つけて変更を加えたりします。そういう作業の順番や考え方も参考になると思います。

戻る