とにかくすぐ何かを作ってみたい人はJavaScriptで時間あてゲームを作ろうJavaScriptであなたのいいところ診断を作ろうの記事をご覧ください。

プログラミングとJavaScript

JavaScriptはHTMLそしてCSS、3つの言葉がひとつになったとき威力を発揮するものです。HTMLとは何か、CSSとは何か。そして、JavaScriptはそこでどんな役割を果たすのか。考えてみましょう。

ウェブページには、主に3つの言葉がもちいられています。ひとつがHTML。Hyper Text Markup Languageの頭文字をとったもので、ページの骨組みを決めるものです。骨のない人間がいないように、HTMLがまったく使われていないウェブページもほとんど存在しません。

hachi.html

<html>

<head>

<title>はちくんだ! </title>

</head>

<body>

<p>はちくんだ! </p>

</body>

</html>

CSSを書く方法

CSSは、書く場所が3とおりあります。

・<head>内でstyleタグとして書く

・インラインに書く

・外部ファイルに書く

ひとつは、<head>内で<style>タグをつくって、その中に記入する方法。

<head>

<style>

p{

color:read;

}

</style>

インラインに書くというのは、装飾したい部分のHTMLのタグ中に書き入れる方法。こんな感じです。

<p style=”color: red;”>はちくんだ!</p>

もうひとつは、.cssで終わるファイルを用意して、.htmlのファイルとは別にする方法です。基本的には、この方法がとられることが多いようです。

というのも、見る人の環境によって、ページの見え方は異なってくるからです。

同じウェブページでも、PCで見るときと、スマートフォンで見るとき、表示が違っていることに気づいた人もいるでしょう。PCとスマートフォンは画面の大きさがまるで違うため、PCで見るためのサイトはどうしても見づらいところができてしまいます。

そこで、多くのサイトは、PC用とは別に、スマートフォン用のウェブページをつくって公開しています。

このとき、もしHTMLファイルにすべてが書き込まれていたならば、PC用とスマートフォン用、ファイルを2つ用意しなければなりません。同じようなものをふたとおりつくらなければならないわけです。でも、HTMLとCSSがわかれていれば対応がかんたんになります。ページの構造と内容はそのままに、デザインだけを変えることができるからです。

もうひとつ、重要な理由があります。

ウェブページを見るのは、人だけではないためです。

たとえば、Googleの検索。Googleの検索システムは、Googleのソフトウェアがさまざまなリンクをたどり、ウェブ上からさまざまなことばを探しだして表示しています。これはあくまでGoogleのプログラムがおこなうので、人が直接、ページを選んでいるわけではありません。要するに、ウェブページは「機械が見るもの」でもあるのです。

その際、デザイン的な要素とページの構造がごっちゃになっていると、うまく検索できないことがあります。これは困るということで、CSSファイルは別にすることが多いのです。

ページを読み込むときにメッセージを表示したり、表示されているものの色やかたちを変えたりすることは、HTMLにもCSSにもできません。すごくわりきっていえば、HTMLとCSSは「表示するだけ」です。

JavaScriptは、そこに動きを与える役割があります。たとえば、ボタンをクリックすると、それまで青だった背景が赤に変わる、というようなしくみをつくることができるのです。

じつは、ウェブページにはJavaScriptがあっちこっちに使われています。

ブラウザ上のアイコンの上にマウスを置いたら、アイコンの色が変わる。選択ボタンをクリックして、アンケートやクイズに答える。テキストボックス(文字を書き入れるところ)に文字を入力すると、答えが返ってくる。そんなしくみ、見たことありますよね? ウェブページにはこうしたしくみがたくさんありますが、これらの多くは、JavaScriptによって提供されているのです。

ブラウザで動く言語

プログラミングは人間にわかりやすい形で書いて、機械の言葉に翻訳してコンピュータに命令を与えます。機械の言葉に翻訳する方法としては、コンパイラとインタープリタがありました。JavaScriptもプログラミング言語ですから、それを機械の言葉に翻訳して読み込ませなければなりません。ただし、特別にソフトを用意する必要はありません。

JavaScriptでは、ブラウザがインタープリタの役割をしているのです。ブラウザはパソコンにもスマートフォンにも備えられているのがふつうです。

プログラミングソフトをとくに用意しなくてもプログラミングできるのは、JavaScriptのメリットです。今回はGoogle Chromeを使っていますが、Internet ExplorerでもEdgeでもFirefoxでも役割は同じです。

なお、方法はのちほど説明しますがJavaScriptもCSSと同じく、ファイルをわけることが多くなっています。理由はCSSと同じ、ページの構造を示したものと、JavaScriptで書いたものをごっちゃにしないようにするためです。

JavaScriptが実行される順番

JavaScriptでつくったプログラム(ソースやコードあるいはソースコードとも呼ばれます)が実行される順番についてもふれておきます。

JavaScriptは、上から下、左から右に読み取られて実行されていきます。

横書きの文章を読む順番と同じです。そのため、命令を書く位置を変更すれば、処理される順番が変わります。今はまだ命令の順番はあまり関係ありませんが、かならずあとで「ああ、上

に書いてあるから先に実行されるんだな」と思うときがあるはずです。

文字コードってなんだ

日本語が判読不能の文字列になって表示される「文字化け」。いろいろな要因が考えられますが、理由のひとつに、自分が表示したい文字コードと相手が見ているものが違っている、ということがあります。

「もう10年以上インターネットを使っている」

そんな人にとっては、文字化けは「よくあること」でした。今は、見ることも少なくなっています。

文字化けとは、正しく記したはずの文字が、判読不能な文字の羅列になってしまうことをいいます。メールやウェブページなど、「送る人」と「受け取る人がいる場合に起こることが多いようです。

コンピュータは 0 と1で考えます。日本語を表示する際にも、文字を0と1にあてはめて表示しています。

ところが、おかしなことが起こりました。01000111という同じ数字の列が、ある文字体系(文字コードという)では「赤」を表し、別の文字コードでは「青」を表し、また別の文字コードではまったく意味不明の文字を表す、というようなことが起こるようになってしまったのです。文字化けは主に、ある文字コードで書いた文字を、別の文字コードで表そうとしたときに起こります。

シフトJIS

1000110010100010

UTF-8

11100111100010101100

だったら文字コードをひとつにすりゃいいじゃないか!

まったくそのとおりで、そういう運動もあるんですが、なかなかまとめられませんでした。だって、そんなことしたら、つくり直さなきゃいけないページが大量に出てきちゃいますよね? それは難しいぞ、というのが主な理由です。

現在は、ブラウザ (ウェブページを表示するためのアプリ)の性能があがり、とくに文字コードを指定していなくても判別して表示してくれるようになりました。たとえば、Chromeというブラウザはある文字コードを別の文字コードで表示するしくみ(エンコード機能)を備えていません。以前はあったのですがなくなりました。必要ないと判断されたためでしょう。

metaタグ

ChromeやFirefox、EdgeやInternet Explorerなど、名の知れたブラウザを比較的新しいOSの上で使っていれば、ブラウザも最新のものになっていますから、文字化けすることはほぼありません。ただし、そうじゃない人もいます。たとえば、Windows XPを使っている人とか。するとブラウザが最新のものになりませんから、文字化けする可能性も高くなります。

JavaScriptを書いてみよう

JavaScriptはHTMLなどとは異なり、「動き」を表現することができるプログラミング言語。まずはとても簡単なプログラムから書いてみましょう。あなたがつくるはじめてのプログラムです!

JavaScriptの特徴

JavaScriptは、HTMLやCSS とはちがって、本格的なプログラミングができるプログラミング言語です。

HTMLとCSSには、「動き」がありませんでした。青を指定したら色はどこまでいっても「青」。四角を指定したら形はどこまでいっても「四角」。青を黄色にしたり、四角を丸に変えたりはできませんでした。

JavaScript は、すでに表示されている HTMLやCSSに「動き」を与え、変化させることができます。青を緑や黄色に変えることはもちろん、画像がクルクル回ったり、自動車の絵が走りだしたりするアニメーションをつくることもできます。プログラミング言語ですから、複雑な計算をこなすのも得意中の得意です。

JavaScript をマスターすれば、「ブラウザの中」はもちろん、サーバとよばれるコンピュータの中で動くプログラムもつくれるようになります。ここで扱うのは、その初歩の初歩。本章のねらいは、「プログラミング」とはどんなものか、どうやってつくるかを知ってもらうことです。

こんにちは世界

JavaScript とはなにかを知るために、まずは書いてみてください。むずかしくはありません。

HelloWorld.html

<html>

<head>

<title>hello</title>

</head>

<body>

<script>

alert(“hello,world”);

</script>

</body>

</html>

HelloWorld.html という名前でファイルを保存して、HelloWorld.html をダブルクリックしてページを開いてみてください。これは「ページを開いたときアラートが出る」という動きを表現しています。

「hello, world」は直訳すると「こんにちは世界!」という意味。

コンピュータがまだめずらしかったころに、C言語の開発者カーニバンとリッチーが「プログラミング言語C』という本を書きました。プログラミングの古典的名著とされていますが、この本の最初のほうに、「C言語でつくるもっとも簡単なプログラム」として紹介されているのが、この「hello, world」です。

これ以降、多くのプログラミング言語の解説書が「hello, world」の紹介からはじまることになりました。

JavaScriptのプログラムは、<script> ~ </script>の間に書いていくことになります。alert(“hello, world”);

alertとは、メッセージを通知するという意味。これは、「hello, world」という文字を表示せよ、という命令です。以降は、特別な断りのないかぎり、<script> ~ </script>の間に記述するコードのみ掲載していきます。

大切なのは、文末が;(セミコロン)になっていること。JavaScriptでは、; が文末を表します。「文の終わりはセミコロン」と覚えてしまってもいいでしょう。

alertのなかまたち

alertを「アラートダイアログ」とも呼びます。ダイアログというのは、対話を意味する dialogueからきています。人とコンピュータが対話するためのウィンドウのことをダイアログボックス(dialogbox)と呼んだことから、このようなメッセージを表示するウィンドウのことをダイアログと呼ぶようになりました。

alert のなかまたちを紹介します。promptとconfirmです。

まずは prompt、こちらは文字入力ダイアログです。prompt (ブロンプト)とは、コンピュータが入力を待ち受ける状態のことで、メッセージといっしょに、入力を受け付けるダイアログが表示されます。

confirmは確認ダイアログです。confirm (コンファーム)とは、確認するという意味。[OK]ボタンと[キャンセル]ボタンのあるダイアログが表示されます。

alert は、一方的に表示するだけでした。prompt と confirm は、入力を受け付けることができます。

このように、コンピュータへ入力することをinput、出力することをoutputと呼びます。入力と出力をあわせて、入出力といいます。

変数を使おう

ユーザから受けつけた入力は、「変数」をつかってたくわえておくことができます。変数は 「let」という言葉を使います。変数には「数」という言葉がついていますが、扱うのは数字だけではありません。

変数ってなんだ?

confirm や promptで受けつけた入力は、『let』を使って記憶しておき、あとで利用することができます。入力をたくわえておくことができるのです。これを「変数」と呼びます。変数」とは「ヘンな数」という意味ではありません。「変えられる数」ということです。

数学では、y = 5x なんて式が出てきます。この場合の y や x は、自由に変えることができました。こうした記号を数学では変数と呼んでいます。

プログラミングにも変数があります。y や x に自由に数字を入れられるように、なんでも入れることができます。数学では数字だけですが、プログラミングでは文字もまるっと入れられます。変数をつかえば、同じことを何度も書かないですむのです。

変数の宣言

変数はこんなふうに「宣言」してから使います。

let name = “はちくん”;

「宣言」とは「変数をつかうぞ!」ということです。letと書いて、つぎに書くのは変数の名前です。ここでは、name という名前をつけています。

name は何を表しているかというと、はちくん”という文字列(string)、つまり「はちくん」という文字で表された言葉です。以降、「はちくん」と書く必要はありません。’name’とだけ書けば、同じものを表します。

name は自分で決めた名前です。変数は基本的に、どんな言葉を使ってもよいことになっています。ただ、使ってはいけない言葉もあります。あとでくわしくふれますが、これを「予約語」と呼びます。

変数は予約語以外ならどんな言葉を使ってもいいのです。したがって、変数は数学ふうに x

とか y とかを使ってもかまいません。ただし、見ただけで内容がなんとなくわかるものの方が、たくさん出てきたとき(長いプログラムには変数がたくさん出てきます)、あとで、わけがわからなくなりにくいようです。

名前プログラムをつくる

prompt や confirm を使って名前プログラムをつくってみます。下の例のように、新しく jikoshokai.html をつくって、その中にソースを書き込んで保存してください。

jikoshokai.htmlをダブルクリックしてブラウザで表示すると、順番にダイアログが表示されて、最後は、「こんにちは! ○○さん」と表示されます。〇〇は、自分で入力した名前ですよ。

jikoshokai.html

<script>

let name=prompt(“おなまえは? “);

confirm(name + “でいいですか? “);

alert(“こんにちは! ” + name + “さん”);

</script>

この例では、prompt(“おなまえは? “); で入力された名前を、いったんname という入れ物に入れておいて、あとで利用しています。

このように、いったん入れておく入れ物を変数といい、変数に入れておくこ

とを代入といいます。

ちなみに、prompt で入力された名前のように、なにかの命令を実行したとき、返ってくる彼のことを、返り値とか戻り値とかいったりします。

返り値を受け取ることで、プログラムの実行結果や計算結果を受け取ることができるわけです。

promptでユーザに入力を求めることができるのです。

もし~だったら

「もし~だったら○○する」という表現は、プログラムだけではなく、私たちの生活の中にもあります。たとえば「もし雨だったら○○」という表現は、よく使われますね。これをJavaScriptで表現したのがIf文です。

もし信号が青だったら

「もし~だったら」という表現は、プログラムでたいへんよく使われます。じつは、プログラムと同じような行動を、わたしたちもしています。たとえば信号。もし信号が青だったら「進む」。赤だったら「止まる」。「もし~だったら」は、そういう人間の行動を、プログラムで表現したものと考えることができます。

信号が青なら進む、赤なら止まる。

プログラミングでは、「もし~だったら」を if という文で表現します。

たとえば、「もし天気が雨だったら、家でゲームをする」は、次のようにあらわします。

if(天気が雨だったら) {

家でゲームする

}

いいかえるとこんな感じです。

if(条件) {

処理1

}

if のあとの(条件)にあてはまると、処理1} の中の処理が実行されることになります。

trueとfalse

confirm は、true(トゥルー)とfalse(フォールス)を返り値として返します。

true は、真という意味。 falseは偽という意味です。くだけた言い方をすると、trueは「正しい」、falseは「正しくない」ということを表します。

たとえば、次のようにプログラムで質問してみます。

otokonoko.html

let kakunin = confirm(“はちくんは、おとこの子でしょうか? “);

otokonoko.htmlをダブルクリックしたとき表示されるダイアログで、「OK」をクリックすると、変数 kakunin にtrueが入ります。「キャンセル」をクリックすると、falseが入ります。

ifは「もし~だったら」という条件を出すものでした。

confirmはtrueまたはfalseを返すものです。これを使って、「OK」をクリックしたとき「正解!」と表示するプログラムをつくってみます。

otokonoko.html

let kakunin = confirm(“はちくんは、おとこの子でしょうか? “);

if (kakunin==true) {

alert(“正解!”);

}

ここでは、==という表現が使われています。これは、「右と左が同じ」ことを表しています。異なるときは、!= というふうに書きます。

同じとき ==

異なるとき !=

もし~だったら~する

では、これまでに出てきたprompt と confirmを使って、かんたんなプログラムをつくってみてください。次のようなものです。

①まず、相手の名前を聞く。

②入力されたものでいいかどうか、確認する。

③ 「OK」なら「こんにちは! ○○さん」という。

shokai.html

<script>

let name =prompt(“おなまえは? “);

let kakunin = confirm(name + “でいいですか?”);

if (kakunin == true) {

alert(“こんにちは! ” + name + “さん”);

}

</script>

この例では、「OK」ボタンを押すと confirm から true が返ってくるので、

「こんにちは! ○○さん」と表示されます。

でも、「キャンセル」が押されたら? 何も起きません。当たり前です、ソースに何も書いてないのですから!「キャンセル」されたときに別のセリフを出すようにしたいものです。

そこで登場するのが、else です。elseは、「さもなくば」という意味です。ifとともに、「もし~でなかったら」という条件を表します。では、さきほどのプログラムshokai.htmlに、「キャンセル」を押したときの動作を書き加えてみてください。

流れは次のようになります。

①相手の名前を聞く。

②入力されたものでいいかどうか、確認する。

ここまでは同じです。「キャンセル」が選択されたときに、以前とは違うメッセージを出せるようにします。

③「OK」なら「こんにちは!○○さん」という

「OK」ではないなら「○○さんじゃないのね」というソースは次のようになります。

shokai2.html

<script>

let name=prompt(おなまえは? “);

let kakunin = confirm(name + “でいいですか?”);

if (kakunin == true) {

alert(“こんにちは! ” + name + “さん”);

} else {

alert(name + “さんじゃないのね。”);

}

</script>

この例では、「OK」が押されたか「キャンセル」が押されたか、つまり、confirm から true が返ってきたか、true でなかったか、を判定しています。

if(条件)

処理1

}else {

処理2

if のあとの(条件)に入る条件にあてはまらないと、処理1はおこなわれず、else のあとに書かれた処理2が実行されることになります。

これを条件分岐と呼びます。要するに、ユーザが何を入力するか(この場合「OK」と「キャンセル」どちらを選ぶかによって、処理を変えていくわけです。

このようにして、「~だったら」「~でなかったら」という条件にしたがって実行するプログラムをつくることができます。

もしAのドアを開けたら、お宝をゲット! さもなくば(Bのドアを開いたら)お化けが出る! というようなしくみをつくることができるのです。

obake.HTML

if (Aを開いた){

お宝をゲット!

} else {

お化けが出た!

}

クイズをつくろう!

ifを使えば、条件分岐をつくることができます。ところが、条件が多くなってくると、プログラムが複雑になってしまう! 複雑になればなるほど、ミスが入り込む確率は高くなるもの。シンプルにいくには?

ここまで学習した事項を応用してクイズをつくってみてください。

①「おなまえは?」と質問する

②「とつぜんですが問題です。パンダのしっぽは何色?」ときく

③ 「白」なら「正解。」という

「白」ではないなら「○○さん、残念。白でした!」という

「白」でなければみんなまちがいになります

quiz.html

<script>

let name=prompt(“おなまえは? “);

let sippo = prompt(“とつぜんですが問題です。パンダのしっぽは何色?”);

if (sippo==”白”) {

alert(“正解。”);

} else {

alert(name + “さん、残念。白でした!”);

}

</script>

さらに問題を重ねるクイズ

パンダ問題に続けて、さらに問いを続けてみてください。基本的には、バンダ問題と同じです。正答のときは「正解。」と答え。そうでなければ「〇〇さん。残念。●●でした!」と返します。

quiz2.html

<script>

let name = prompt(“おなまえは? “);

let sippo = prompt(“とつぜんですが問題です。パンダのしっぽは何色?”);

if (sippo == “白”) {

alert(“正解。”);

} else {

alert(name + “さん、残念。白でした!”);

}

let kuni=prompt(“では、世界で一番大きい国は? “);

if (kuni == “ロシア”) {

alert(“正解。”);

} else {

alert(name + “さん、残念。ロシアでした!”);

}

let keisan = prompt(“最後の問題です。 7 x 8 = ? “);

if (keisan == “56”) {

alert(“正解。”);

} else {

alert(name + “さん、残念。56 でした!”);

}

If (sippo == “白”) {

if (kuni == “ロシア”) {

if (keisan==”56″){

alert(“全問正解おめでとう!! すごいよ” + name + “さん”);

}

}

}

</script>

クイズの流れは次のようになります。

「おなまえは?」と質問する

「とつぜんですが問題です。パンダのしっぽは何色?」と質問する

「白」なら「正解。○○さん」という

「白」ではないなら「○○さん、残念。白でした!」という

「では、世界で一番大きい国は?」と質問する

「ロシア」なら「正解。○○さん」という

「ロシア」ではないなら「○○さん、残念。ロシアでした!」という

「最後の問題です。7×8= ?」と質問する

「56」なら「正解。○○さん」という

「56」ではないなら「○○さん、残念。56 でした!」という

全部正解なら、「全問正解おめでとう!!すごいよ○○さん」という

これだけ次々と問題を出して、そのすべてに正解するのはすごいですね。こういう、if 文を何重にも重ねるやり方を、入れ子と呼びます。英語ではnest(ネスト)といって、あんまり喜ばれません。ここでは問題が3つだから

これだけで済んでいますが、問題が10とかになると、ifが10並ぶことになりま

す。if文のお化けです。当然のこと、ミスが入りやすくなりますし、ミスを見つけるにもたいへんな苦労をしなければなりません。

もう少し簡単に書く方法はないだろうか?

ANDで並べる

じつはこれ、次のように書き表すことができます。

quiz2.html

if (sippo == “白” && kuni==”ロシア” && keisan=”56″){

alert(“全問正解おめでとう!! すごいよ” + name + “さん”);

}

これでも結果は同じです。ずいぶんスッキリしました。この方法なら、問題が10個になってもそんなに複雑にならずに済みそうです。

ここで出てきているのが、「&&(アンド)」というものです。if文の条件には、==や!=以外にも、&& や || という記号を使うことができます。

「A && B」と書くと「AかつB」という意味です。

「&&」(AND)とセットで紹介されるのが、「||」(OR)です。「A || B」と書

くと「AまたはB」という意味になります。

ANDの場合、答えが「正しい」になるためには、両方が「正しい」でないとダ

メでした。ところが、「||」の場合、片方でも「正しい」なら、こたえも「正しい」

になります。

プログラムで確認することもできます。

or.html

<script>

if (“はちくん” == “はちくん” || “はちくん” != “パオちゃん”) {

alert(“正しいよ”);

// if 文の条件が正しければ、「正しいよ」と表示されます。

} else {

alert(“正しくないよ”);

// if 文の条件が正しければ、「正しくないよ」と表示されます。

}

</script>

これは「II」で表記されていますから、「正しい」ものがどちらかに書かれてあればよいのです。

したがって結果は、

正しいよ

になります。

なお、プログラム中「/」で書かれたものは、「コメント」といいます。プログラムの理解を助け、誰か他人が見てもわかりやすくしてくれます。//以降に書いたものはコンピュータは実行しません。

ちなみに、&&の「&」は、一語でもアンパーサントとかアンドと読み、別の役割をもつ記号です。すなわち、「&」とひとつだけ書かれていたら別の意味です。||の「|」も同じように、ひとつだと別の意味を持ちます(バーティカルラインまたは縦棒という)。 if 文の条件に使うときは、かならず「&&」とか「||」というふうに2つが連続しているもの。間違わないようにしてください。

算数や数学では、イコール (=) が、等しいとか等価であるという意味です。

しかし、JavaScript やプログラミング言語の多くは、イコール(=)は、変数に代入するという意味で、イコールイコール (==)が、同じであるという意味です。最初はまぎらわしく感じるかもしれませんが、代入はイコール、比べるときはイコールイコールとおぼえておくと良いかもしれません。ちなみに、一部のプログラミング言語では、数学と同じ意味でイコールを同じであるという意味とするものもあります。

計算しよう!

計算問題の答えがこちらで簡単に出せるなら、つくるのも簡単です。計算問題がたいへんなのは、答えを自分で計算しなければならないからで計算はコンピュータにやらせてしまいてください!

コンピュータは計算機

先ほどのクイズでは、三問目を計算問題にしました。ここでは、他にも計算問題をつくることを考えます。ただ、前項と同じ方式だと、計算問題をつくったら、かならずその答えも出しておかなければならないです

もともと、コンピュータというのは、計算機から発達したものです。したがって、計算は大の得意。いっそ、コンピュータに計算させてしまいてください。

それなら、どんな複雑な問題もつくることができます。

足し算と引き算

JavaScript には、もちろん足し算や引き算ができます。

<script>

alert(1 + 2);

</script>

答えを出してくれます。

もちろん引き算だって可能です。

<script>

alert(2 – 1);

</script>

<script>

alert(9876583581 + 1098403980);

</script>

むろん、コンピュータなら一瞬にして計算できてしまいます。

こんなのを1秒間に何百回も何千回も計算できてしまうんですから、計算力だけなら、人間はコンピュータにかないっこないですね。

かけ算とわり算

次は、かけ算とわり算です。JavaScript では、かけ算やわり算の記号は、

「×」や「-」ではなく、「*」や「/」と書きます。「*」はアスタリスクと読み「かけ

る」を表す記号です。「/」はスラッシュと読み「わる」をあらわす記号です。

keisan1.html

<script>

alert(7 * 8);

</script>

<script>

alert(32 / 4);

</script>

もちろん、暗算ではできないような計算も、コンピュータにはお手のものです。]

keisan3.html

<script>

alert(278312370193 / 3094209);

</script>

面積を計算する

これを面積の計算に応用してみてください。

たて3センチ、よこ4センチの四角形の面積は? 暗算でできちゃうような簡

単な問題ですが、プログラムに書いてみてください。

menseki.html

<script>

let menseki = 3 * 4;

alert(menseki + “平方センチメートル”);

</script>

ただし、これだと書いてる本人しかやってることがわからないですね。

以前、クイズで正解を判定したように、if 文をつかって判定してみてください。まず問題があって……

mensekimondai.html

<script>

let menseki =prompt(“たて3センチ、よこ4センチの四角形は? “);

let seikai =  3 * 4;

if (menseki == seikai) {

alert(“正解。”);

} else {

alert(“残念。正解は、” + seikai + “平方センチメートルです。”);

}

</script>

では、この調子で計算問題をつくっていきてください。パターンはこんな感じ

す。

まず問題があって……

3 +52 = ?

間違いのときはそれを指摘してくれます。

残念。正解は、55です。

keisanmondai.html

<script>

let keisan1 = prompt(“3 + 52 = ? “);

let seikai1 = 3 + 52;

if (keisan1 == seikai1) {

alert(keisan1 + ” です正解”);

} else {

alert(“残念。正解は ” + seikai1+ “です”);

}

let keisan2 = prompt(“596 – 493 = ? “);

let seikai2 = 596 – 493;

if (keisan2 == seikai2) {

alert(keisan2 + ” 正解dす”);

} else {

alert(“残念。正解は” + seikai2 + “です “);

}

let keisan3 = prompt(“123 X 4 = ?”);

let seikai3 = 123 * 4;

if (keisan3 == seikai3) {

alert(keisan3 + ” です。正解。”);

} else {

alert(“残念。正解は、” + seikai3 + “です。”);

}

let keisan4=prompt(“121 / 11 = ? “);

let seikai4 = 121 / 11;

if (keisan4 == seikai4) {

alert(keisan4 + ” です。正解。”);

} else {

alert(“残念。正解は、” + seikai4 + “です。”);

}

let keisan5 = prompt(“100メートルを10秒で走る人の速さは時速何キロメートルですか。”);

let seikai5 = 100 / 10 * 60 * 60 / 1000

if (keisan5 == seikai5) {

alert(keisan5 + ” です。正解。”);

} else {

alert(“残念。正解は、時速” + seikai5 + “キロメートルです。”);

}

</script>

はじめは簡単ですが、だんだん難しくなります。最

後の問題はかなり難しいですね。

forやwhileでくりかえしを表現する

わたしたちの日常には、たくさんのくりかえしがありますね。「毎朝ゴハンを食べる」「学校に行く」のもくりかえしです。コンピュータはくりかえしがとても得意です。この章で紹介するのは、たとえば「前の数字に1足し続ける」というようなくりかえしです。指定されなけ

れば、コンピュータはこれを永遠にやり続けます。1年でも、10年でも!

当然、「前の数字に1を足す」作業にはゴールが必要になります。

たとえば「数字が100になったらやめる」とか、「1日たったらやめる」とか。さらに、「この計算をやってる間は1足す作業をしない」など、作業を中断することもできます。じつは、上手にくりかえしを使うことが、上手にプログラミングする近道なのです。

コンピュータは、人間にやらせたら面倒な仕事、時間がかかってしまうような仕事をやらせるものです。にもかかわらず、100個の仕事を100個書かなければならないとすると、面倒くささは大して変わってないですね。かえって余計な手間が増えているかもしれません。

こんなとき利用されるのが「くりかえし」です。

くりかえしを使えば、コンピュータが何度でも同じことをやってくれます。

100回でも、1000回でも、1万回でも、無限でも! それだけやらせたら人間ならかならずミスが出ますが、コンピュータは(プログラムが正しいかぎり)間違えることはありません。

計算しよう

人間がやるとミスが多発して、同じことをコンピュータにやらせるとまず間

違いないのは、計算です。まずは、おさらいもかねて、簡単な計算のプログラ

ムを書いてみてください。

tashizan1.html

<script>

let tasu = 1 + 2 + 3

alert(tasu);

</script>

ただし、数字の数が多くなってくると、ちょっと面倒です。

tashizan2.html

<script>

let tasu = 1 + 2 + 3 +4 +5 + 6 + 7 +8 + 9 + 10);

alert(tasu);

</script>

数字の数が増えると、プログラムを書く方もたいへんです。たとえば、上の例では「1から10までの数を足す」という計算をしています。このぐらいなら書こうとすれば書けますが、「1から100までの数を足す」とると……。

tashizan3.html

<script>

let tasu = 1 + 2 + 3 +4 +5 + 6 +7 +8 +9 + 10 + 11 + 12 +13 + 14 + 15 + 16 + 17 + 18 + 19 + 20 + 21 + 22 + 

alert(tasu);

</script>

ちょっと書けないですよね。相当たいへんです。ちなみに、上のプログラムはまともに表示されません。JavaScriptには「22 + …」なんて表現はないし、かりにあったとしても、これでは「1からいくつまで足すのか」がわかりません。

ここでは、計算プログラムの答えをalertの中に表示させるために、変数tasuを使いました。

tashizan1.html

<script>

let tasu = 1 + 2 + 3

alert(tasu);

</script>

じつはこれ、計算式を直接 alert の中に書いてもいいのです。

tashizan-alert.html

<script>

alert(1 + 2 + 3);

</script>

ちょっとした計算なら、こっちの方が手間がかからないですよね。

計算が複雑になってくると変数を使ったほうがスッキリします。

forを使ってくりかえす

さきほど、次のような計算プログラムを書きました。

tashizan2.html

<script>

let tasu = 1 + 2 + 3 +4 +5 + 6 +7+8 +9 + 10;

alert(tasu);

</script>

これは、「1の次は2、2の次は3」のように、左の数字より1大きい数を足していっています。1大きい数を足す計算は、どこまでもやるのではなくて、10までやる(11以上はやらない)ということが決まっています。

これはくりかえしに用いるforを使って、こんなふうに表すことができるのです。

forbun1.html

<script>

let tasu = 0;

for (let i = 1; i <= 10 ; i = i+1) {

tasu = tasu + i ;

}

alert(tasu);

</script>]

このプログラムで使用しているforについて考えてみてください。

forは、次のように使うのがふつうです。

for(最初の式;条件の式;くりかえしの式) {

くりかえすプログラム

}

ここでは、まずはじめにtasu という変数を用意して、それを0にしています。

let tasu = 0;

次に、forのあとのコードを( )の中を書き入れています。

「最初の式」でiという変数を指定しています。この場合は「1から10まで足す」

ですから、iは1になっています。

最初の式 let i = 1

続いて、「条件の式」です。

条件の式 i <= 10

れは、変数i が 10 より小さいか等しい間、「くりかえし」の処理をおこな

という意味です。

何回くりかえすのかここで指定します。

「条件の式」に指定されている間、プログラムはくりかえされます。変数iに1ずつ増えていきます。

くりかえしの式  i + 1

for文で1から100 まで足す

次は、いよいよ1から 100 まで足してみます。さきほど、「ちょっと計算するのがたいへんだ」と言ったものですね。

forbun2.html

<script>

let tasu = 0;

for (let i = 1; i <= 100; i = i + 1) {

tasu = tasu + i;

}

alert(tasu);

</script>

まず、「最初の式」で変数iを1にしておき、「条件の式」に「変数iが100より小さいか等しくなる間くりかえす」と書き入れます。くりかえすたびに変数i は1ずつ増えます。これは99回くりかえされます。100回くりかえされると、変数i は 101 になってしまいます。そのときfor文は終了されます。

forの部分を文字で表すと、こんなふうになります。

このプログラムは次のようなalertを出します。

This page says:

5050

OK

奇数だけ足す、偶数だけ足す

すこしアレンジするだけで、「くりかえし」はさまざまな応用ができます。

ここでは、並んでいる数字を選んで「くりかえし」を実現する方法を紹介します。あなたの知恵の使いどころです!

for文で2から 100 まで足す

前項でfor文を使って「くりかえし」が表現できることを学びました。「くりかえし」(for文)は次のようにまとめることができます。

前項では「最初の式」はlet i = 1でした。let i = 2とすると……

2からはじまる計算ができるのかな?

forbun4.html

<script>

let goukei = 0 ;

for (let i = 2; i <= 100; i = i + 1){

goukei = goukei + i;

}

alert(goukei);

</script>

この計算結果は次のように表示されます。

This page says:

5049

OK

最初の 1 をスキップして2から足し算を開始したので、1から100まで定した数(5050)より1少ない数になりました。

1から 10 まで奇数だけ足す

次に、ちょっと難しいことにチャレンジしてみてください。1 から 10 までの数で、奇数だけ(1、3、5、7、9)を足すときには、どうすればいいでしょう?

「くりかえす式」を工夫すればいいのです。

i=i+1は、「変数iを1ずつ大きくする」という意味でした。「奇数だけ」

とは、1、3、5、7、9…です。つまり、2 ずつ大きくすればよいのです。

したがって「くりかえしの式」はi=I+2となります。

forbun5.html

<script>

let goukei= 0;

for (let i = 1; i <= 10; i = i + 2) {

goukei=goukei + i ;

}

alert(goukei);

</script>

答えは次のようになります。

25

OK

この方法を使えば1000までの奇数とか10000までの偶数とかも計算できちゃうぞ!

数が大きくなってもすぐに計算してくれます!

条件の式

for文で1から10まで足すためには、次のようなプログラムを書きました。

forbun6.html

<script>

let goukei = 0;

for (let i = 1; i <= 10; i = i + 1){

goukei = goukei + i;

}

alert(goukei);

</script>

この場合の「条件の式」は、

i <=10

です。変数と数字を比較するような形で宣言され、「変数iが10より小さいか、等しい間、プログラムをくりかえす」という意味でした。

インクリメントを使ってみよう

プログラムでは、「前の数字に1を足して数字を大きくする」ということがさかんに行われます。それを記号で表現したのがインクリメントです。

1ずつ増やすもっと便利な方法

「くりかえし」のプログラムは、i = i + 1 として、i を1ずつ増やしました。

これは、iに1を足して、それをiにもう一度入れるという意味でした。この「1ずつ増やす」、プログラムにはしょっちゅう必要になります。

そこで、i=i+1と書かず、i++と表現するようになりました。

これはJavaScriptだけでなく、たいがいのプログラミング言語にはあります。インクリメントと呼びます。

インクリメントの式: i++

「++」の部分は、「プラスプラス」と読んだり、「プラプラ」と読んだりします。

「プラプラ」とは読みますが

「たすたす」とは読みません

ちなみに、1 増やすの反対の、1 へらすというものもあります。デクリメントといいます。

デクリメントの式: i–

こっちは「-」がふたつだね!

「マイナスマイナス」

または「マイナマイナ」と読みます。

では、さっそくインクリメントを使ってみてください。「イイネ」と30回言うプ

ログラムです。

iine30.html

<script>

for (let i = 0; i < 30; i++) {

alert(“イイネ”);

}

</script>

「イイネ」をくりかえす

続いて、「イイネ」という表示をくりかえしてみてください。「イイネ」と10回言うのを3回くりかえしてみます。

イイネ10×3.html

<script>

for (let i = 0; i < 3; i++){

  for (let j= 0; j< 10; j++) {

alert(“イイネ”);

}

}

</script>

これはfor文の中にfor文が入っています。これを「入れ子構造」「入れ子になっている」といいます。

「イイネ」を10個つなげてみる

次に、「イイネ」をつなげてみてください。まずは、変数iineを宣言します。続い

て、for文を記します。くりかえしの式は

iine = iine + “イイネ”;

です。プログラムは次のようになります。

iine10.html

<script>

let iine = “”;

for (let i = 0; i < 10; i++) {

iine = iine + “イイネ”;

}

alert(iine);

</script>

変数 iine の中身ははじめ、何もありません。” “は空文字といい、中身がない空っぽであることを表します。これが「最初の式」。

iine = iine + “イイネ”なのですから、はじめは何もない」に「イイネ」をつなげて「イイネ」と表示します。

次に、「イイネ」に「イイネ」をつなげて「イイネイイネ」と表示。

さらに、「イイネイイネ」に「イイネ」をつなげて「イイネイイネイイネ」と表示します。

この要領で、どんどん後ろにつなげていきます。

This page says:

イイネイイネイイネイイネイイネイイネイイネイイネイイネイイネ

「イイネ」を3行で表示する

次に、このような表示をするプログラムをつくってみます。

iine10linex3.html

<script>

let line=””;

for(let i =0 ; i<3 ; i++){

  for(let j =0 ; j<10 ; j++){

line=line+”イイネ”;

}

line=line+”\n”;

}

alert(line);

</script>

イイネイイネイイネイイネイイネイイネイイネイイネイイネイイネ

イイネイイネイイネイイネイイネイイネイイネイイネイイネイイネ

イイネイイネイイネイイネイイネイイネイイネイイネイイネイイネ

このプログラムのポイントのひとつは、改行が入っていること。改行は、

\n

と表示します。

プログラムは入れ子になっており、for文の中にfor文が入る形で書かれています。

whileでくりかえす

ホワイル

JavaScriptにはforのほかに、くりかえしを表現するwhileがあります。

ただし、使い方も、そして使いどころもそれぞれ違っています。どちらをどう使うかはまさにテクニックです!

whileの使い方

くりかえしを表現するためには、forを使いました。forはふつう、こんなふうに書かれました。

for(最初の式;条件の式;くりかえしの式) {

くりかえすプログラム

}

じつは、JavaScriptにはもうひとつ、くりかえしを表現するwhileというものがあります。

while(条件の式){

くりかえすプログラム

}

こんなふうに使います。

まずは、forのかわりにwhileを使ってみてください。forの最初に紹介した、

10以下の数字を1から順に足していくプログラムを、whileを使って表現して

みます。

whilebun.html

<script>

let tasu = 0;

let i = 1;

while (i <= 10) {

tasu = tasu + i

i = i + 1;

}

alert(tasu);

</script>

10回足すと、55になりました。

whileにはforのように、「最初の式」や「くりかえしの式」がありません。どっちかというとラクかもしれないですね。

100を超えるまでくりかえす

次のような計算をしてみてください。

0+1=1

1+2=3

3+3=6

6+4=10

10+5=15

まず、くりかえしの数iを用意して 0 にしておきます。

let i = 0;

次に、変数 goukei を用意して0にしておきます。

let goukei = 0;

そして、while文をつかって、100 より小さいか等しいとき、くりかえすようにします。

while (goukei <= 100)

while文でくりかえすプログラムは、かっこ{}で囲んでおきます。

while (goukei <= 100) {

i = i + 1;

goukei = goukei + i;

}

こんなプログラムができます。

whilebun1.html

<script>

let i = 0;

let goukei = 0;

while (goukei <= 100) {

i = i + 1;

goukei=goukei + i;

}

alert(i + “回足すと、” + goukei + “になりました。”);

</script>

14回足すと、105になりました。

100万を超えるまでくりかえす

このぐらいの数なら、やろうと思えば計算できるかもしれません。しかし、数が大きくなるとそうもいきません。たとえば 1000000(100万)とか!

しかし、さきほどのプログラムを使えば時間はかかりません。

whilebun2.html

<script>

let i = 0;

let goukei = 0;

while (goukei <= 1000000) {

i = i + 1;

goukei= goukei + i;

}

alert(i + “回足すと、” + goukei + “になりました。”);

</script>

このプログラムのおおまかな意味を説明すると、次のようになります。

変数 i を 0 にする

変数 goukei を 0 にする

while (goukei が 1000000より小さいか等しいあいだ){

変数 i に 1 を足して、もう一度 i に入れる

変数 goukei と i を足して、もう一度 goukei に入れる

}

このようにすることで、i は 1 からはじまり、2、3、4…… と1ずつ大きく

なり、goukei は 0、1、3、6、10、15、21、28、36、45、55… とだんだん大

きくなっていきます。

1414回足すと、1000405になりました。

数字だと親しみがわきませんが、お金で考えてみたらどうでしょう。毎日1円ずつ増やしながら貯金すると、100万円を貯めるにはどのくらいかかるか、という問題です。プログラムによれば、1414日かかります。1年は365日ですから、3年と11ヶ月あれば100万円を貯められるということです!

正解が出るまでくりかえす

これまで、コンピュータに計算をさせて、答えを出すプログラムを考えてき

ました。次は、人間に問題を出す場合を考えてみてください。

人間はコンピュータと異なり、かならず正解するとは限りません。むしろ、

何回も間違えるものではないでしょうか?

そこで、「正解が出るまでくりかえす」という問題をつくってみます。

mondai.html

<script>

let kotae = “”;

while (kotae != “2”) {

kotae = prompt(“1÷0.5 =” , “” );

}

alert(“正解! “);

</script>

このプログラムのおおまかな意味を説明すると、次のようになります。

変数 kotae を” “にする

while (kotae が “2” と等しくないあいだ) {

“1 ÷ 0.5 =” を表示して、入力を kotae に代入する

}

“正解!” と表示する

まず、変数 kotae を用意します。これは、前項で使った”(空文字)を代入します。続いて、while文で「1÷0.5 = 」が表示されるプログラムをつくります。

これは、promptに正解である「2」が入力されるまで、表示され続けるのです。

ちなみに 1 = 0.5 = 2 ですから、正答の「2」を入力して「OK」ボタンを押す

と…。

This page says:

正解!

と表示されるのです。

do-while文

同じプログラムは、do ~ whileという形で書き表すこともできます。

mondai2.html

<script>

do {

let kotae = prompt(“1 ÷ 0.5 =” , ” “);

} while (kotae != “2”);

alert(“正解! “);

</script>

まとめると、次のようになります。

do {

くりかえすプログラム

}

while(条件の式);

条件の式にあてはまる間だけ、プログラムがくりかえされるということです。表示は、さっきとまったく同じになります。

This page says:

1 ÷ 0.5 =

This page says:

正解!

中断したり、続けたりくりかえしを設定した以上は、こちらが止まって欲しいと思っても、コ

ンピュータはくりかえし続けます。うまく使うためには、どのくらい線けて欲しいのか、いつ止まるのかを伝えなくてはならないのです。

くりかえしを止めよう

これまで、くりかえしのプログラムを学習してきました。同じ「くりかえし文」であっても、for文、while文、do – while文はそれぞれ書き方がちがいます。しかし、共通して使えるものがあります。ここでは、それをご紹介してください。

くりかえし文を、とにかく止めたい! といったとき使えるのが、「break」です。

breakを使うと、くりかえしを中断(ストップ)して、次の文に進むことができます。

くりかえしの途中で、合計が1000を超えたらストップするプログラムを考え

てみてください。

break.html

<script>

let goukei = 0;

for (let i = 1; i <= 100; i = i + 1) {

goukei = goukei + i;

if (goukei > 1000) {

break; ;

}

}

alert(goukei);

</script>

breakを使えばくりかえしを止めることができるのです。

ここであげたのはforを使って変数iを1から 100 まで足し算して、1000を超えたらストップするプログラムです。このプログラムは、次のように表示されます。

This page says: :

1035

1 から 100 まで、ぜんぶ足すと 5050 になるはずですが、このプログラムでは、途中で計算をやめているため、このような表示になります。

これは、if (goukei > 1000)で合計が 1000 より大きいかどうか見て、もし1000より大きかったら、breakでfor文を中断し、次のプログラム(goukei を表示する)に進むように設定されているのです。

何度も続ける

breakを使えば、途中でストップすることができます。でも、完全にストップさせたくないときもありますよね?

たとえば、3問連続でクイズを出題するとして、連続で正解できないと、最初からやりなおす(くりかえす)ような場合です。

ここでは、「continue」を使ってみてください。くりかえし文には、forの場合もwhileの場合も、「条件の式」があります。continueは、「条件の式」とは関係なくくりかえしを続けるのです。

continueを使って、3問連続で正解できないと、最初からくりかえすようなクイズをつくってみます。まず、promptを使って問題を出します。promptに入力された答えが間違っていたら、「はずれ。」と表示します。そのあと、continueで、while文の最初に戻ります。このとき、continueより下のプログラムは実行されません。

では、continueとbreakを使って、次のようなプログラムをつくってみてください。計算、地理、音楽の問題の3問を連続で正解しないとクリアできないクイズです。

まず名前をたずねます。

全問正解できると、breakが使用され、while文を抜けて、クイズが終ります。コードは、次のようになります。

quiz2.html

<script>

let name = prompt(“おなまえは? “, “”);

while (true) {

let keisan = prompt(“3.14 * 2 = “, “”);

if (keisan != “6.28”) {

alert(“はずれ。”);

continue;

}

alert(“正解。”);

let kisetsu = prompt(“では、南半球でクリスマスのときの季節は?”, “”);

if (kisetsu != “夏”) {

alert(“はずれ。”);

continue;

}

alert(“正解。”);

let ongaku = prompt(“楽譜で、音の一時的な休止を示す記号は? “, “”);

if (ongaku != “休符”) {

alert(“はずれ。”);

continue;

}

alert(“正解。”);

break;

}

alert(“全問正解おめでとう!! すごいね! ” + name + “さん”);

</script>

while(つねにくりかえす) {

“3.14 * 2 = “と表示して、入力を keisan に代入する

if(もし keisan が “6.28” でないなら) {

“はずれ。”と表示する

while文の最初に戻る

}

“正解。”と表示する

“では、南半球でクリスマスのときの季節は?”と表示して、

入力を kisetsu に代入する

if (もし kisetsu が “夏” でないなら) {

“はずれ。”と表示する。

while文の最初に戻る

}

alert(“正解。”);

“楽譜で、音の一時的な休止を示す記号は?”と表示して、

入力を ongaku に代入する

if(もし ongaku が “休符”でないなら) {

“はずれ。”と表示する。

while文の最初に戻る

}

“正解。”と表示する

while文を中断する

}

“全問正解おめでとう!!すごいね!” + name + “さん”と表示する

quiz2.html では、まずは名前を入力します。

次に、第1問の計算問題です。ここで間違えると、continueで最初に戻って、もう一度、第1問からです。

正解すると、第2問に進みます。同様に、間違えると、continueで最初に戻り、もう一度、第1問からになります。

正解すると、第3問です。ここで間違えると、また第1問からになってしまいます!

全問正解できないと、このクイズは終了することができません。言い換えれば、全問正解しないと、breakでくりかえしをぬけることはできないのです。

このように、くりかえし文と、continue文とbreak文をくみあわせることで、いろんなプログラムをつくることができます。

配列でならべたら

変数をたくさん扱うためには

「配列」とは変数をいくつか並べたものであり、まとめて扱うしくみです。JavaScriptにかぎらず、プログラミング言語の多くはこれ

を備えています。

これをマスターするために、複数のクイズをつくり、点数をつけ、その合計を出してみてください。合計点が出せれば、最高点も平均点も出せるのです。配列とはそうした作業を容易にします。

もうひとつ、ここではJavaScriptのファイルをHTMLとわける方

法も紹介しています。ひとつの大きなプログラムを複数の人間でつくるときにも、この方法はたいへん効果的です。

ファイルをわける

HTMLファイルと、JavaScriptファイルは、わけてつくられることが多くなっています。どうしてファイルをわけるのでしょう? どうやってわけるんでしょう?

ファイルはわけるのがふつう

これまでに学習した方法では、ひとつの HTMLファイルにひとつのプログラムが入っている形でした。

みなさんも体験していると思いますが、この方法だとプログラムがどんどん長くなって、ファイルがどんどん大きくなります。ファイルの肥大化を避けるために、HTML/CSSという形で、ファイルの骨組みにあたる部分はHTMLファイルに、装飾に関する部分はCSSファイルに、別々にまとめますよね。

JavaScriptも同じです。プログラムの部分だけ別にします。これまでの例で言えば、<script> ~ </script>の部分を別ファイルにまとめます。拡張子 .js つけ、同じフォルダにファイルを保存します。

プログラムのファイルを別にすると、次のようなメリットがあります。

たとえば、算数と国語と理科と社会、4科目のクイズを出題するプログラムをつくろうとする場合、これがひとつのファイルにまとまっていると、なかなか大変です。算数になにか追加したいとき、算数だけをいじるというわけにはいきません。国語も理科も社会もいじらなければならないのです。仮にいじる必要がなくても、ちゃんとプログラムが動作するかどうか、4科目についてチェックする必要は出てきます。

4科目が別々になっていれば、算数だけをいじって、残りの3科目は手をふれる必要がないのです。

さらに、プログラムが複雑になって大きくなってくれば、1人ではどうにもなりません。ひとつのプログラムをみんなでつくるような局面はどうしたって出てきます。

そんなとき、プログラムがわかれていれば、人の仕事を取り入れやすくなります。さきの4科目クイズのプログラムを例にすれば、算数だけ人にまかせて、自分は残りの3科目をやる、なんてこともしやすくなるのです。

newquiz.html

<html>

<script src=”hello.js”></script>

</html>

最初の<html> と最後の</html> は、「<html>から</html>の間は

HTMLです」という意味です。HTMLにはかならず必要なものです。これ以外の部分を細かく見ていくことにしてください。

<script src=”hello.js”></script>

プログラムを呼び出す部分はここに書かれます。scriptを日本語にすると、 台本とか原稿という意味。つまり、「HTMLファイルにこれからおこなうプログラムの台本を追加するよ」と言っているのです。

srcに続く部分には、プログラムのファイル名が書かれます。この例では、hello.js というファイルにプログラムが書かれています。

食べ物にかけるソースと同じつづりですけど、ここでは材料とか原料とかいう意味で使われています。

type=”text/javascript”

以前はこのつづりがないといけませんでした。これはプログラムの種類を表しており、text/javasctiptは、text で書かれたJavaScriptである、と明示しなければならなかったのです。現在は、初期値がJavaScriptになっていますから、この記述は必要がありません。

わざわざJavaScriptだと断らなくてもいいということです。

jsってなんだ

「hello.js」のように、jsという拡張子がついたファイルは、JavaScriptが書かれたファイルです。

では、「hello.js」を見ていきます。

hello.js

let onamae=prompt(“おなまえは? “, “”);

alert(“こんにちは! ” + onamae + “さん”);

ここにはJavaScriptのプログラムだけを書けばよいことになっています。

いきなりプログラムからはじめてよいのです

HTMLファイルとJSファイルをわけてつくると、うまく読みこめ

ないことがあります。HTMLファイルを実行(ダブルクリック)しても、なにも起きないこともあります。

そんなときは、まず次の①②を確認してください。

①HTMLファイルとJSファイルが同じフォルダの中にあるか

②ファイル名を間違って書いてないか

クイズプログラムをつくる

先ほど作ったプログラムのファイルをわけるやりかたをもちいて、いくつかクイズをつくってみてください。クイズは国語・算数・理科・社会、四科目からのもの。

算数の問題をつくる

では、前節で紹介した、算数と国語と理科と社会、4科目のクイズを出題するプログラムを実際につくってみてください。まずは算数から。JSファイル「sansu.js」を用意します。

sansu.js

let kotae =prompt(“7 × 35 = “, “”);

if (kotae == 245) {

alert(“正解!”);

} else {

alert(“ざんねん!”);

}

ここでは、7 x 35 を問題にしています。

答えは245 なので、245 という文字列が kotae という変数に入っているかどうか、if 文を使ってチェックしています。

正解だったら「正解!」と表示し、間違いだったら「ざんねん!」と表示する

指定をif ~ elseでおこなっています。

 国語の問題をつくる

次に、国語の問題をプログラムにしてみてください。JSファイル「kokugo.js」を用意します。

kokugo.js

let kotae = prompt(“「芬蘭」のよみがなは? “, “”);

if (kotae ==”フィンランド” || kotae== “ふいんらんど”) {

alert(“正解! “);

} else {

alert(“ざんねん! “);

}

ここでは、「芬蘭」のよみがなを答えてもらっています。読めた人は少ないんじゃないかなあ……。答えは「フィンランド」。フィンランドは、北欧の国の名前です。

このプログラムでとくに重要なのは、カタカナの「フィンランド」でも、ひらがなの「ふいんらんど」でも正解になるように工夫しているところです。

どっちでも正解にしたいときには、||を使うのでしたね。簡単にお

変数 kotae を箱で表します。箱の中には、はちくんが入っていても、猫のパオちゃんが入っていても正解です。

これを式で表すと、次のようになります。

if (箱 == 犬 || 箱 == 猫)

ただし、それ以外だといけません。たとえば、箱の中にねずみが入っていたりしたら、正しくないのです。

カタカナの「フィンランド」が入っていても、ひらがなの「ふぃんらんど」が入っていても、正解にするには、同じようにします。

if (kotae == “フィンランド” || kotae == “ふぃんらんど”)

変数kotaeは”フィンランド” でも”ふいんらんどでもいい。それ以外は不正解です。

理科の問題をつくる

続いて、理科の問題をつくります。JSファイル「rika.js」を用意します。

rika.js

let kotae = prompt(“昆虫の足は何本?”, “”);

if (kotae == “6” || kotae == “6”) {

alert(“正解! “);

} else {

alert(“ざんねん! “);

}

ここで大事なことは、国語の問題と同じように、||(オア) を使って、”6″ でも”6 “でも正解になるようにしていることです。

でもちょっと待て。”6″ と”6” って何が違うんだ?

最初の “6” は、半角の6を表しています。ふたつめの”6”は、全角の6です。

じつは、プログラムの世界では、半角と全角は別はのものとして扱われることがとても多くなっています。JavaScriptも6(半角)と6(全角)は別のものです。日本語入力をするときは、全角になっていることがとても多いようです。

全角と半角

アルファベット(A~Z, a~z)や数字(0 ~ 9)など、コンピュータの世界で最初のころにつくられた256種類の文字は、日本では半角とよばれています。ひらがな、カタカナ、漢字などの日本語の文字は通常、全角で記されます。全角文字は半角文字の2倍の厚みがあります。

半角は1バイト、全角は2バイト使って表現したのでこの名がつきました。

社会の問題をつくる

最後に、社会の問題をつくります。JSファイル「shakai.js」を用意します。

shakai.js

let kotae = prompt(“北海道の県庁所在地は?”, “”);

if (kotae==”札幌” || kotae==”さっぽろ”){

alert(“正解! “);

} else {

alert(“ざんねん!”);

}

この場合も、2種類の答えを正解にしています。漢字の「札幌」とひらがなの「さっぽろ」です。

HTMLファイルに追加する

算数、国語、理科、社会の4つの問題を、HTMLファイル 「newquiz.html」

に追加します。

newquiz.html

<html>

<script src=”hello.js”></script>

<script src=”sansu.js”></script>

<script src=”kokugo.js”></script>

<script src=”rika.js”></script>

<script src=”shakai.js”></script>

</html>

この newquiz.html をダブルクリックして表示すると、最初に名前をたずねるプログラムが実行され (hello.js)、続いて算数、国語、理科、社会の順で問題が表示されます。

各教科に問題を追加する

JSファイルを使うことの大きなメリットのひとつは、あるファイルを改訂したとき、変化はそのファイルに書かれたプログラムのみだということです。

ミスの発見やチェックがラクになる、ということがあげられます。

では、各ファイルに問題を追加し、各教科2問ずつ問題を表示するようにしてみてください。

sansu.js

let kotae =

prompt(“7 × 35 = “, “”);

if (kotae == 245) {

alert(“正解! “);

} else {

alert(“ざんねん! “);

}

let kotae = prompt(“112 – 53 = “, “”);

if (kotae == 59) {

alert(“正解 “);

} else {

alert(“残念 ! “);

}

kokugo.js

let kotae = prompt(“芬蘭の読み方は?”, “”);

if (kotae == “フィンランド” || kotae == “ふぃんらんど”) {

alert(“正解 “);

} else {

alert(“残念 ! “);

}

let kotae = prompt(“綱魚の読み方は?”, “”);

if (kotae == “さより”) {

alert(“正解”);

} else {

alert(“残念! “);

}

rika.js

let kotae = prompt(“昆虫の足は何本?”, “”);

if (kotae == 6 || kotae == “6”) {

alert(“正解! “);

} else {

alert(“残念!”);

}

let kotae = prompt(“光合成では、空気中の二酸化炭素を吸収し、〇〇を放出しています。〇〇とはなんですか?”, “”);

if (kotae == “酸素” || kotae == “さんそ”) {

alert(“正解!”);

} else {

alert(“残念!”);

}

shakai.js

let kotae =prompt(“北海道の県庁所在地は? “, “”);

if (kotae==”札幌” || kotae == “さっぽろ”){

alert(“正解! “);

} else {

alert(“残念!”);

}

let kotae = prompt(“日本で一番高い山は? “, “”);

if (kotae == “富士山”) {

alert(“正解! “);

} else {

alert(“残念! “);

}

さて、プログラムの追加は終わりました。うまくいけば、連続で問題が表示されるはずです。

点数を合計しよう

四科目のクイズをつくったなら、それぞれに点数をつけ、それを合計したいですよね。これが可能になると、たとえば平均点を出したりとか、最高点を出したりすることができるようになります。

点数の計算方法

1問正解すると1点、2問正解すると2点として、各教科の合計点を出してみてください。つまり、正解した問題数が「点数」です。

まず、点数を記録するための変数 seikai を用意してください。1問正解すると1点ですから、seikaiは正解するたび、1ずつ増えることになります。

プログラムで表すと、こうなります。

let seikai = 0

seikai=seikai+1

算数の点数を計算する

これを利用して、sansu.js に点数計算のためのプログラムを追加します。

sansu.js

let seikai = 0; 

let kotae =prompt(“7 × 35 = “, “”);

if (kotae =245) {

alert(“正解! “);

seikai = seikai + 1;

} else {

alert(“ざんねん! “);

}

let kotae =prompt(“112 – 53 = “, “”);

if (kotae==59) {

alert(“正解!”);

seikai = seikai + 1;

} else {

alert(“ざんねん!”);

}

alert(“点数は” + seikai + “点です”); 

alertには最初の問題と2番目の問題の合計点が表示されます。

「配列」を使ってみよう

合計点を出すことに成功したら、いよいよ平均点を出してみます。クイズの点数をいくつも扱うことになりますが、ここで紹介した方法では、変数をまとめて扱うことになりますね。これが「配列」です。

「配列」ってなんだ?

こんどは、4科目の合計点と、平均点を出してみたいのです。計算式は

合計点 = 算数 + 国語 + 理科 + 社会

平均点 = 合計点 : 4

これを計算するためには、各教科の点数をおぼえておかなければなりません。

たとえば、こんな人がいるとしてください。

この人の合計点は1+2+0+1ですから、4点。平均点はそれを教科の数で割るから、1点になりますよね。

こうした計算が可能なのは、各教科の点数がわかるからです。プログラムを使って同じことをするためには、各教科の点数をコンピュータに記憶させる必要があります。

このとき使うのが「配列」です。配列は、いくつか変数をまとめて扱うことができます。

「配列」を使ってみよう

配列の使用例のなかで、もっとも簡単な部類のものを紹介してください。

kyouka.htmlというものをつくってみます。コードは、次のようになります。

kyouka.html

<script>

let hairetsu = [ ];

hairetsu[0] = “算数”;

hairetsu[1] = “国語”;

hairetsu[2] = “理科”;

hairetsu[3] = “社会”;

hairetsu[4] = “英語”;

hairetsu[5] = “体育”;

for (let i = 0; i < 6; i++) {

alert(hairetsu[ i ]);

}

</script>

これを実行すると、教科の名前が書かれたアラートが連続で表示されます。

ここで使われているのが、配列です。

let hairetsu = [ ]

[ ]の中には、さまざまなものを入れることができるのです。

let

hairetsu = [“算数”, “国語”, “理科”];のように文字を入れてもいいし、let hairetsu = [13, 45, 60]; のように数字を入れてもいいのです。

配列(はいれつ)

配列の中は、通常、番号がふられた形で示されます。これを添え字と呼びます。いつも0からはじまります。

さらに、このプログラムでは、forが使われています。

for (let i = 0; i < 6; i++) {

alert(hairetsu[ i ]);

これは、変数i を0からはじめて、6より小さいあいだ、 i を1ずつ増やしながらくりかえす、という意味です。具体的には、変数iが0、1、2、3、4、5と変わっていきます。

そうすることで、hairetsu の中身の 0番目の「算数」から順に5番目の「体育」までのalertが、連続で表示されます。

なぜ0からはじまるのか!?

配列のはじまりが、なぜ1じゃなくて0なのかは、コンピュータを

研究している人の間でも意見がわかれるところのようです。

プログラミング本の古典『プログラミング言語C』(カーニハン&

リッチー著) によると、配列の添え字は、配列が用意された場所からどれだけ離れているかを数字であらわしたもの、であるように書かれています。最初はスタート地点なので0になるということです。

プログラミングの関数と使い方

プログラムはスッキリして短いほうがよいと言われます。今も昔も「プログラムはスッキリして短いほうがいい」ことはまったく変わっていないのです。

これは、コンピュータではなく人が読むことを考えているためです。

大きなプログラムであれば、たったひとりでつくるということはあり得ません。スポーツの多くがそうであるように、チームで活動するようになるのです。そのとき、見にくいプログラムはたいへんに迷惑です。関数はそこで大きな効果を現します。

「関数」を使ってみよう

一度書いたプログラムをもう一度書くのってとてもめんどくさいですよね。関数をマスターすると、そういうめんどくささから解放されることになります。できるかぎりラクをするのがプログラミングです。

関数が必要なわけ

複数のファイルにわけたプログラムを使いまわす方法をご紹介します。イメージとしては、プログラムのリサイクルって感じです。

同じようなプログラムを何度も何度も書くハメになって、めんどくさいことこの上ありません。

じつは、同じようなプログラムをいくつも書かずに済む方法があるのです。

「関数(function)」を使います。

関数を使ってみよう

関数と聞いて、うへえアレか、と思った人もいますよね?そう、数学に出てくるアレです。英語も同じfunctionです。

ただし、数学の関数とプログラミングの関数はちょっと違う、といわれています。じつは、英語のfunctionには「関数」だけではなく「機能」とか「はたらき」という意味もあるのです。プログラミングで使う関数は、こっちの意味が強くなっていると考えていいかもしれません。

数学でも、エライ人が「『関数』なんて訳すからわからなくなるので、『機能』と呼べばよい」といったりしています。

関数を使うと、同じようなプログラムを何度も書く必要がなくなります。

関数について理解するために、まず次のようなアラートが出るプログラムをつくってみましょう。ファイルをふたつにわけることに

します。

それぞれkonichiwa.jsとaisatsu.htmlと名付けます。

konichiwa.js

alert(“こんにちは! “);

aisatsu.html

<html>

<meta charset=”UTF-8″ />

<script src=”konichiwa.js”></script>

</html>

続いて、konichiwa.jsをfunctionを使って書きかえてみます。

konichiwa.js

function konichiwa() {

alert(“こんにちは!”);

}

関数はつぎのように表現されます。aisatsu.htmlはそのままです。

function 関数の名前() {

関数の中身

}

function konichiwaと書かれています。

functionのあとにくるのは関数の名前。つまり、「konichiwaという関数を使うよ!」と宣言しているのです。

ただし、この状態でもうひとつのファイルaisatsu.htmlをダブルクリックすると・・・・・・。

なんにも出てきません。じつは、関数はaisatsu.htmlのほうで呼び出してあげないといけないのです。したがってaisatsu.htmlのコードはこうなります。

aisatsu.html

<html>

<meta charset=”UTF-8″ />

<script src=”konichiwa.js”></script>

<script>

konichiwa(); // ここから konichiwa()関数を呼び出す。

</script>

</html>

これでうまく表示されたはずです。

引数がある関数

関数のあとの ()の中には引数が入ります。ここでは引数を「hachi」としていますが、なんだってよいのです。何かをわたすと、プログラムが処理して返してくれる。プログラムにわたしたいものを引数と呼びます。

引数を使ってみよう

前項で扱った関数は、次のようになっていました。

function 関数の名前() {

関数の中身

}

今までは、( )の中に何も入っていないプログラムをつくっていました。

( )って何に使うんだ?

引数を使えば、文字や数字をプログラムにわたすことができます。

function 関数の名前(引数) {

関数の中身

}

汚い話ですが、ゴハンを食べるとオナラが出ますよね。この場合、引数がゴハン、あなたの身体が関数、処理されて出てきたもの(戻り値)がオナラです。

前項でつくったプログラムを書き換えてみましょう。まずは引数から。

まず、konichiwa.jsの()の中に、引数としてhachiを入れます。

konichiwa.js

function konichiwa(hachi) {

alert(“こんにちは!+ hachi + “さん”);

}

続いて、aisatsu.htmlも修正します。

aisatsu.html

<html>

<meta charset=”UTF-8″ />

<script type=”text/javascript” src=”konichiwa.js”></script>

<script>

konichiwa(“はち”); // 引数に “はち”をわたします

</script>

</html>

このプログラムでは、hachi という変数に名前はちがわたってくると、

“こんにちは! “”さん”がつけられて、”こんにちは! はちさん”と表示

ます。

ただし注意したい点がひとつ。これ、表示される名前がはち限定のプログラムなのです。

もし、はち以外の名前――あなたやあなたの家族や友達の名前を表示したい場合は、aisatsu.htmlの「はち」のところに、表示したい名前を入れる必要があります。

何度も同じことをくりかえすプログラム

次に、質問を出しまくるプログラムを考えてみます。shitsumon.js をつくって、それを aisatsu2.html から呼び出せるようにし

てみましょう。

shitsumon.js

let kotae = prompt(“すきな食べ物は?”,” “);

if (kotae==””) {

alert(“?”);

} else {

alert(kotae +ですか! ぼくと同じですね。”);

}

かんたんにしくみを解説しますと、はじめに質問が表示されます。

すきな食べ物は?

これに何も回答せずにenterを押しますと、こうなります。

?

好きな食べ物を入力すると、次のように表示されます。

すき焼きですか!ぼくと同じですね。

同じパターンで、いろいろな質問プログラムをつくってみましょう。

shitsumon.js

let kotae = prompt(“すきな食べ物は?”, “”);

if (kotae == “”) {

alert(“? “);

} else {

alert(kotae + ” ですか! ぼくと同じですね。”);

}

let kotae =prompt(“嫌いな食べ物は?”, “”);

if (kotae == “”){

alert(“?”);

} else {

alert(“え?!” + kotae + “ぼくは好きだよ”);

}

let kotae = prompt(“行きたい国は?”, “”);

if (kotae == “”) {

alert(“? “);

} else {

alert(kotae + “かあ? 行けるといいねえ?”);

}

let kotae = prompt(“明日の予定は? “, “”);

if (kotae==””) {

alert(“? “);

} else {

alert(kotae + ” ? それっておいしいの? “);

}

let kotae =prompt(“今年の目標は? “, “”);

if (kotae==””) {

alert(“?”);

} else {

alert(“ふーん。” + kotae +ね。がんばってね。”);

}

let kotae prompt(“休みの日はなにするの?”,

if (kotae == “”) {

“”);

alert(“?”);

} else {

alert(kotae + ” はいいね。こんどいっしょにしよう。”);

aisatsu2.html

<html>

<script src=”konichiwa.js”></script>

<script src=”shitsumon.js”></script>

</html>

関数を使ってみよう

このプログラム、すこしややこしいですよね。一問ごとにプログラムを書かなければなりません。

関数を使ってみましょう。

念のため、shitsumon.jsは保存しておいて、shitsumon2.js とファイル名を変えて保存したもので作業します。

質問の中身を引数でわたせるようにしてみます。

返事には2種類ありました。

“kotae + ” ですか!ぼくと同じですね。

となる場合と、

“え~! ” + kotae + “ぼくは好きだよ。

となる場合です。

言いかえると、kotaeが前に出ていて、そのあとに言葉がつづくパターンと、

kotae の前後をセリフがはさむパターンとがあります。

そこで、引数をanswer1answer2で kotae をはさむように、書いてみます。

shitsumon2.js

function shitsumon(question, answer1, answer2) {

let kotae = prompt(question, “”);

if (kotae ==””) {

alert(“?”);

} else {

alert(answer1 + kotae + answer2);

}

}

そしてこの関数 shitsumon(question, answerl, answer2) の引数に質問文と返信のセリフをわたして、呼び出すプログラムを追加します。

shitsumon2.js

function shitsumon(question, answer1, answer2) {

let kotae = prompt(question, “”);

if (kotae==””) {

alert(“? “);

} else {

alert(answer1 + kotae + answer2);

}

}

shitsumon(“すきな食べ物は?”, “”,ですか! ぼくと同じですね。”);

shitsumon(“嫌いな食べ物は? “, “え~! “, “ぼくは好きだよ。”);

shitsumon(“行きたい国は?”, “”,” かあ~行けるといいねえ~”);

shitsumon(“明日の予定は? “, “”,? それっておいしいの?”);

shitsumon(“今年の目標は?”, “ふーん。”, “ね。がんばってね。”);

shitsumon(“休みの日はなにするの?”,” “は、いいね。こんどいっしょにしよう。

“);

ものすごくすっきりしました。

aisatsu3.html

<html>

<script src=”shitsumon2.js”></script>

</html>

aisatsu3.htmlをダブルクリックすることで、プログラムを実行することができます。

ちなみに、”すきな食べ物は?”の関数の呼び出しで、2つめの引数に ” “をわたしていますが、これは空文字と呼ばれるもので、もともと入っている文字が1文字もないという意味です。

引数と戻り値

関数になにかをわたせば、かならず結果が返ってきます。これを戻り値と呼びます。これはどんな関数にどんな引数をわたしたかによって変わります。

つまり、わたしたちが何を食べたか、あるいは誰が食べたかによって……。

引数に数字を入れる

引数に文字を入れて、それをプログラムにわたす方法を学びました。

引数には、数字を入れることもできます。

tashizan.js

function tasu(a, b) {

alert(a + b);

}

hikisuu.html

<html>

<meta charset=”UTF-8″ />

<script type=”text/javascript” src=”tashizan.js”></script>

<script>

tasu(5,7);

</script>

</html>

関数 tasu(a, b) の引数に5と7をわたすと、5+7が計算されて、ダイアログにその答えの12が表示されました。

ところで、関数を使えば、数字だけでなく文字をわたすこともできましたよね。

mojiretsu.js

function tasu(a, b) {

alert(a + b);

}

hikisuu.html

<html>

<meta charset=”UTF-8″ />

<script type=”text/javascript” src=”mojiretsu.js”></script>

<script>

tasu(“5”, “7”);

</script>

</html>

関数を使ってわたすのは同じ「5」と「7」ですが、この場合はまったく違う言葉が表示されます。

んん?どっちも同じプログラムを書いてるように見えるけど..…。

じつは、数字と文字の表記が異なっているのです。大きく変わっているのは、

hikisuu.htmlでしょう。最初の例では、このように書いています。

tasu(5,7);

これは、5および7を数字として認識してね、ということです。そのため、5-7が計算され、答えの12が表示されます。

しかし、あとの例では、hikisuu.htmlに次のように表記されています。

tasu(“5”, “7”);

これは、5および7を文字として認識してね、ということです。そのため、たし算にならずに、文字がくっついて表示されたのです。

”があるかないかで

数字か文字かがわかります

戻り値で値を返す

前項は引数という形で関数に数字をわたしました。関数の処理の結果とし

て、値を戻すのが「戻り値」です。返り値ともいいます。

……と、言っても雲をつかむような話なので、例を出して説明します。

まず、ふつう「関数」は次のように記述されます。

function 関数の名前(引数) {

関数の中身

return 戻り値;

}

これまでの例では、「return 戻り値;」が省略されていました。戻り値がなかっ

たので、記述していなかったのです。

suujimodorichi.js

function suujikaesu() {

return 100;

}

modorichi.html

<html>

<meta charset=”UTF-8″ />

<script type=”text/javascript” src=”suujimodorichi.js”>

</script>

<script>

let suuji = suujikaesu();

alert(suuji + 10);

</script>

</html>

modorichi.html では、まず suujimodorichi.js を読み込んでおいて、

suujikaesu()関数を呼び出します。

この関数の戻り値が100です。これを変数 suuji に代入しておき、そこに を足して表示します。結果は110になります。

戻り値で文字を返す

続いて、戻り値に文字が代入されているパターンを見てみましょう。関数 tensai() は “天才!”を戻り値として返します。、

tensai.js

function tensai() {

return “天才!”;

}

hachi.js

function hachi() {

return “ハチくん!”;

}

関数 hachi() は “はちくん”を返します。

mojiretsu.js

function mojitasu(a, b) {

alert(a + b);

}

関数 mojitasu(a,b) は a とbをくっつけて表示します。

kuttsukeru.html

<html>

<meta charset=”UTF-8″ />

<script type=”text/javascript” src=”tensai.js”></script>

<script type=”text/javascript” src=”hachi.js”></script>

<script type=”text/javascript” src=”mojiretsu.js”></script>

<script>

let b = tensai(); 

let a = hachi();//

mojitasu(a, b);

</script>

</html>

kuttsukeru.html をダブルクリックすると次のように表示されるはずです。はちくん天才!

プログラムをスッキリしよう

関数を使えば、プログラムを短くスッキリ書くことができます。4章でつくった長いプログラムを、関数を使って短くしてみましょう。その方がミスも減りますし、他人に見せるときも親切です。

クイズプログラムを見てみよう

では、関数を使って短くコンパクトにかいてみましょう。

教科ごとの関数を使う

sansu.js

let seikai = 0; 

let kotae = prompt(“7 × 35 = “,””);

if (kotae == 245) {

alert(“正解! “);

seikai = seikai + 1;} else {

alert(“ざんねん!”);

}

let kotae =prompt(“112 – 53 = “, “”);

if (kotae == 59) {

alert(“正解! “);

seikai = seikai + 1;} else {

alert(“ざんねん! “);

}

tensu[0] = seikai; 

質問を出して、”正解!”とか”ざんねん!”と表示して、答えあわせをする部分はすべての問題で共通です。これを、関数にまとめてみることにしましょう。

mondai.js

function mondai(question, answer) {

let kotae = prompt(question, “”);

if (kotae == answer) {

alert(“正解! “);

return true;

} else {

alert(“ざんねん!”);

return false;

}

}

まず、mondai.jsというプログラムをつくります。ここでは、正解ならtrueを、不正解なら false を戻り値にしておきます。ここでは正解・不正解の判定をします。

続いて、正解なら1増えるようにしなければなりません。true だったら増加するプログラムsansu2.jsをつくります。

sansu2.js

let seikai = 0; // 変数を用意する

if (mondai(“7 × 35 = “, 245) == true) {

seikai = seikai + 1;

}

if (mondai(“112 – 53 = “, 59) == true) {

seikai = seikai + 1;

}

tensu[0] = seikai;

関数をもっとすっきりと

関数を使って、同じプログラムをよりシンプルにする方法もあります。質問をして、正解!や、ざんねん!と表示して、答えを合わせる部分は共通です。これを関数にまとめます。

mondai.js

function mondai(question, answer) {

let kotae =prompt(question, “”);

if (kotae== answer) {

alert(“正解! “);

return 1; // 正解なら 1 を返す。

} else {

alert(“ざんねん!”);

return 0; // 不正解なら 0 を返す。

}

}

正解のときの戻り値を1、不正解のときは0にします。

続いて、mondai(question, answer) の戻り値を変数 seikai に足すプログラムをつくります。正解するたび1ずつ増え、不正解なら増えません。

sansu2.js

let seikai = 0; 

seikai = seikai + mondai(“7 × 35 = “, 245);

seikai = seikai + mondai(“112 – 53 = “, 59);

tensu[0] = seikai; 

すべての教科をすっきりと

同じように、国語・理科・社会のプログラムを書き直してみます。

答えが1つだけの算数のプログラムとは書き方が異なります。答えがふた通りある国語のプログラムは下のようになります。

国語のプログラムkokugo.jsのはじめの問題は次のようなものでした。

「芬蘭」のよみがなは?

「フィンランド」と答えても「ふいんらんど」と答えても正解になるようにしなければなりません。

そこで、答えが2つあってもいいようにmondai.jsに関数 mondai2

(question, answerl, answer2) を追加します。

mondai2 (question, answerl, answer2) で は、ifを使ってkotae が

answerl と answer2 のどちらかと同じなら”正解!”を表示するようにしています。

mondai.js

function mondai(question, answer) {

let kotae = prompt(question, “”);

if (kotae == answer) {

alert(“正解!”);

return 1;} else {

alert(“ざんねん!”);

return 0;}

}

rika2.js

let seikai = 0; 

seikai = seikai + mondai2(“昆虫の足は何本? “, 6, “6”);

seikai = seikai + mondai2(“光合成では、空気中の二酸化炭素を吸収し、〇〇を放出しています。〇〇とはなんですか? “, “酸素”, “さんそ”);

tensu[2]=seikai; 

shakai2.js

let seikai = 0; 

seikai = seikai + mondai2(“北海道の県庁所在地は?”, “札幌”, “さっぽろ”);

seikai = seikai + mondai(“日本で一番高い山は?”, “富士山”);

tensu[3] = seikai; 

呼び出すプログラムを書き直してnewquiz2.htmlをつくって完成です。

newquiz2.html

<html>

<script src=”hairetsu.js”></script>

<script src=”konichiwa.js”></script>

<script src=”mondai.js”></script>

<script src=”sansu2.js”></script>

<script src=”kokugo2.js”></script>

<script src=”rika2.js”></script>

<script src=”shakai2.js”></script>

<script src=”goukei.js”></script>

<script src=”zenmonseikai.js”></script>

</html>

このプログラムを見てもわかるように、プログラムは、ルールさえ守っていれば、どんな書き方をしてもいいのです。

読みにくいプログラムを書くのはたいへんよくないこととされていますが、コンピュータはそれがきれいに書かれていようと、きたなくて見づらかろうと気にしません。きれいに書かないといけないのは、人間のためです。

プログラムが大きくなると、ひとりでつくることはできません。みんなでつくる必要があります。みんなでつくるとなれば、「自分だけがわかっている」というわけにはいきません。

会社やチームのような仲間でコーディング規約と呼ばれるものがつくられ、みんなができるだけ同じような書き方をするのはそのためです。

さっきの見にくいプログラムも、改行やインデント (空白を行のあたまに入れる)を入れ、変数の名前をわかりやすいものに変えると、ずっと見やすいものに変わります。

kantan.js

let hachi =prompt(“おなまえは? “, “”);

while (true) {

let keisan=prompt(“3.14 * 2 = “, “”);

if (keisan != “6.28”) {

alert(“はずれ。”);

continue;

}

alert(“正解。”);

let kisetsu = prompt(“では、南半球でクリスマスのときの季節は? “, “”);

if (kisetsu != “夏”) {

alert(“はずれ。”);

continue;

}

alert(“正解。”);

let ongaku prompt(“楽譜で、音の一時的な休止を示す記号は? “, “”);

if (ongaku != “休符”) {

alert(“はずれ。”);

continue;

}

alert(“正解。”);

let seiza = prompt(“夏の大三角形といえば、ベガとデネブとなに?”,””);

if (seiza != “アルタイル”) {

alert(“はずれ。”);

continue;

}

alert(“正解。”)

let sports

=prompt(“2020年に予定されているオリンピック開催地は? ’’ “),

“”);

if (sports != “東京”) {

alert(“はずれ。”);

continue;

}

alert(“正解。”);

break;

}

alert(“全問正解おめでとう!! すごいね! ” + hachi + “さん”);

kantan.jsのkeisan != “6.28”

は、変数keisanの内容が6.28と同じでなかったら、ということを表しています。

このプログラムはwhile(true) をつかって、無限ループにしてあります。正解だと次へすすめるけど、不正解だと continue、永遠に終わりません。

関数を使ってもっとスッキリ短くしよう

関数を使うと、さきのプログラムをさらにスッキリすることができます。そのためにはどんなプログラムなのか、理解する必要があります。

sukkiri.js

/* 出題プログラム */

function mondai(mondaibun, kotae) {

let answer =prompt(mondaibun, “”);

if (answer != kotae) {

alert(“はずれ。”);

return false;

}

alert(“正解。”);

return true;

}

/* 問題全5問 */

let hachi=prompt(“おなまえは? “, “”);

while (true) {

if (mondai(“3.14 * 2 = “, “6.28”) == false ||

mondai(“では、南半球でクリスマスのときの季節は?”, “夏”)

false ||

mondai(“楽譜で、音の一時的な休止を示す記号は?”, “休符”)

== false ||

mondai(“夏の大三角形といえば、ベガとデネブとなに?”, “アルタイル”)

false ||

mondai(“2020年に予定されているオリンピック開催地は?”, “東京”)

= false) {

continue;

}

break;

}

alert(“全問正解おめでとう!! すごいね! ” + hachi + “さん”);

問題を出すプログラムを mondai(mondaibun,kotae) 関数にまとめてしまって、実際の問題と答えは、引数でわたしています

HTMLはこんな感じです。

sukkiri.html

<html>

<meta charset=”UTF-8″ >

<script src=”sukkiri.js”></script>

</html>

絵の大きさを変えてみよう

JavaScriptを使えば、すでに決まっているCSSを変更することができます。ここでは絵を大きくする方法を紹介していますが、スタイルを変更できるわけですから、色でも、文字のかたち(フォント)でも同じ方法で変えられます。

ページに画像を表示させよう

簡単にHTML/CSSの復習をしてみてください。

ページ内にはちくんの画像(hachi.png)を表示させます。別にこれははちくんでなければならないということではなく、あなたの好きな絵や写真でもいいのです。

hachi.html

<html>

<head>

<title>はちくんだ! </title>

<style>

h1, div {

text-align:center;

}

</style>

</head>

<body>

<h1>はちくんだ! </h1>

<div><img src=”hachi.png”></div>

</body>

</html>

<style> …. </style> というタグでかこまれた部分は、ページの見え方を変えるところ(CSS)です。ここでは、

h1, div {

text-align:center;

}

とすることで、hl と div というタグを、真ん中に表示するように指定しています。

ボタンをつくる

続いて、ここに表示されたはちくんを、大きくしてみてください。まず、ページ内に大きくするボタンをつくります。ボタンを表示するためのHTMLは下記のとおり。

<button>大きくする</button>

これでボタンがページの中にできるのですが、ボタンになんの役割も与えられていないので、押したからといって何も起こらないのです。

そこで、「ボタンを押すとはちくんが大きくなるしくみ」を書き入れようと思います。

説明を容易にするために、JavaScriptは<script>タグを使って書き入れることにしてください。

hachi.html

<html>

<head>

<title>大きくする</title>

<title>はちくんだ! </title>

<style>

body{ {

text-align:center;

}

</style>

<script>

function big() {

document.getElementById(“gazo”).style.width = “400px”;

}

</script>

</head>

<body>

<h1>はちくんだ! </h1>

<div><img id=”gazo” src=”hachi.png” style=”width:200px;”>

</div>

<br>

<button onclick=”big()”>大きくする</button>

</body>

</html>

きっかけを与える

まずはbuttonタグを見ていきてください。

<button onclick=”big()”>大きくする</button>

onClickは「クリックされたら」という意味です。buttonタグの中には、「ボタンがクリックされるとbig()が動き出す」と書いてあります。

onClickのようなものをイベントハンドラと呼びます。イベントを起こすきっかけを与えるもの、という意味です。この場合はボタンをクリックすることが「はちくんの絵を大きくする」というイベントのきっかけになっています。

イベントハンドラはほかに、「ドラッグ&ドロップされたら」とか、「キーボードのキーが押されたら」とか「マウスが動いたら」とか、たくさんあります。知りたい人は、「JavaScript イベントハンドラ」で検索してみてください。

イベントハンドラのいろいろ

onSelectテキストが選択されたら

onLoadページは読み込まれたら

onKeyPressキーが押されたら

onMouseOverマウスが上にきたら

onMousemoveマウスが動いたら

onDragドラッグしたら

もうひとつ新しく登場しているのが、scriptタグの中、document.

getElementByIdという命令です。

前項まで、alertという命令をよく使いました。これは、「アラート(警告)ウィンドウを出せ!」という命令です。document.getElementByIdは、ひらたくいうと「IDのついたタグをもってこい!」という意味になります。

こういうものは意味がわかったほうが理解しやすいので、ちょっと細かく説明してみてください。

document.getElementByIdのdocumentは、「ページ全体」を示します。

日本語だと「文書」と訳したりします。つまり「ページ全体に与えられている命令である」ことを示しているのです(これについては、次項で詳しく述べます)。

getは「とる」とか「手に入れる」という意味。じゃあ何を「とる」かといえば、Elementです。

Elementという言葉は、「要素」という意味。なんでそんな難しそうな言葉が、と思いますよね?じつは、Element ってHTMLのタグのことです。h1タグやタグを、「h1エレメント」「pエレメント」と呼んだりします。「h1タグ」と言っても「h1エレメント」と言っても意味はまったく同じです。そのときに使う「エレメント」という言葉が使われているのです。

tagとelementは同じ意味ですがget tagではダメなのです

さて、大きさを変化させるはちくんの絵ですが、imgタグの中に、ふたつ新しい記述が見られます。

<img_id=”gazo” src=”hachi.png”

style=”width:200px;”>

身分証明書のことをIDカードと呼んだりしますね。あれと同じですが、JavaScriptでは単に「名前」というだけの意味になっています。

ここでは、hachi.pngにgazoという名前が与えられています。むろん、idは自由につけられますから、gazoではなくてhachiでもinuでもdogでも、好きな言葉をつけてよいのです。

したがって、document.getElementById(‘gazo”)は、思いきりくだけて言えば「gazoという名前のついたタグをとってこい!」という意味になります。

もうひとつ、style=”width:200px;は、ページに表示されるはちくんの絵の大きさ(正確には横幅)を決めています。したがって、

document.getElementById(“gazo”).style.width =”400px”;

は、「gazoというIDのついた画像の横幅を400pxにせよ!」ということになります。つまり横幅を倍にしろと言っているわけです。とくに指定がないかぎり、横幅を倍にすれば縦幅も倍になります。これが、ボタンを押すと発動するわけですね。

注意しなければならないのは、HTMLのタグ内では

style=”width:200px;”

と表示されていたものが、JavaScriptでは

style.width = “200px”;

となること。JavaScriptのコードをHTMLふうに書くことはできないので注意してください。

ちなみに、このプログラムには「小さくする」ボタンがついていませんので、一度大きくした絵を元に戻すことはできません。hachi.htmlをもう一度ダブルクリックして開くか、[F5]ボタンを押してページを再読み込みするかしてください。

(練習のために、「小さくする」ボタンをつくってもいいかもしれません!)

プログラムを短くしよう

前項では、document.getElementById(“gazo”)と書きました。1回

ぐらいなら書いてもいいのですが、何度も書くとなるとさすがにおっくうですよね。JavaScriptには「ラクをするため」のしくみも備わっています。

変数bigをつくる

こんなプログラムをつくってみてください。

ボタンを押すとはちくんの絵の大きさがもっと大きくなるプログラムです。

200pxで表示されている絵を400pxになるようなプログラムを書き

ましたが、今回はボタンを押したら600pxになるようなプログラムを書けばよいですね。 .

hachi.html

<html>

<head>

<title>大きくする</title>

<style>

body {

text-align:center;

}

</style>

<script>

function big() {

let big;

big = document.getElementById(“gazo”);

big.style.width = “600px”;

}

</script>

</head>

<body>

<h1>はちくんだ! </h1>

<div><img id=”gazo”  src=”hachi.png”  style=”width:200px;”>

</div>

<br>

<button onclick=”big()”>大きくする</button>

</body>

</html>

ところがこのプログラム、前項と比べると書き方が少し変わっているのです。

変わっているのは以下の部分です。

let big; ;

big = document.getElementById(“gazo”);

big.style.width = “600px”;

bigという変数を用意して、これはdocument.getElementById(“gazo”)

であると指定しています。そのうえで、bigのスタイルを変更しているのです。

document.getElementById(“gazo”);のような表記は、この程度のプログラムなら一回書けば済みます。しかし、プログラムが長くなってくると、場合によってはdocument.getElementById(“gazo”);のような操作を、何度も何度もくりかえして行わなければならなくなることがあります。この際には、

document.getElementById(“gazo”);とくりかえしのあるぶんだけ書かなければなりません。

ここでは、document.getElementById(“gazo”);をbigという変数にし

て、以降bigと書けばよい、と設定しているのです。

画像を変えてみよう

JavaScriptを使って、画像の大きさを変化させることができるようになりました。JavaScriptにはより強力な、「表示されている絵を変える」「まったく別のことが書いてあるページにする」なんて機能も備わっています!

はちくんがしゃべる!

次のプログラムをつくってみてください。

はちくんの絵をマウスでクリックすると……(たたくと)

アラートが出て、「いてっ!」というものです。

jsファイル、HTMLファイルはそれぞれ次のようになります。

shaberu.js

let mouse;

window.onload = function() {

ite();

};

function ite() {

mouse = document.getElementById(“hachi”);

mouse.onclick = function() {

alert(“いてっ!”);

};

}

hachi.html

<html>

<head>

<title>たたけ ! </title>

<script src=”shaberu.js”></script>

<style>

body {

text-align:center;

}

</style>

</head>

<body>

<h1>たたけ! </h1>

<div><img id=”hachi” src=”hachi.png” ></div>

</body>

</html>

いくつか新しい項目があります。解説していきます。

jsファイル

window.onload = function() {

ite();

};

とあります。

onloadは「ページがロードされたとき」という意味です。

HTMLはふつう、項目を上から順に処理していきます。したがって、中盤に書かれたshaberu.jsを読めという指示は、HTMLがそこに至ったとき実行されてしまうのです。ただし、この場合はそれを防ぎたいので(はちくんの絵が出てからアラートを出したいので)window.onloadを使っています。

window.onload = function() {

処理

};

という形で覚えてしまってもいいでしょう。ここでは、すべてのHTMLの表示が終わったとき (ロードされたとき)

ite()という関数が使えるようになります。

ite()の内容は前項でやったとおりです。hachiというidがついた画像を持ってくる (getElementById(“hachi”))mouseという変数をつくっています。mouseをクリックすると(onclick)、「いてっ!」というアラートが出るわけです。

絵が変わるプログラム

続いて、まったく同じプログラムを使って、はちくんの表情を変えてみてください。はちくんの絵をマウスでクリックすると……

はちくんの表情が変わる、というものです。

shaberu.js

let mouse;

window.onload = function() {

ite();

};

function ite() {

mouse =document.getElementById(“hachi”);

mouse.onclick=function() {

mouse.src =”naki.png”;

};

}

hachi.html

<html>

<head>

<title>たたけ! </title>

<script src=”shaberu.js”></script>

<style>

body {

text-align:center;

}

</style>

</head>

<body>

<h1>たたけ ! </h1>

<div><img id=”hachi” src=”hachi.png” ></div>

</body>

</html>

泣き顔画像naki.pngを

同じフォルダに用意しておいてください。

文字を変える

これまで、ページに「たたけ!」と表示されていました。これを、「あんまりたたくなー!!」に変えてみたいと思います。

hachi.html

<html>

<head>

<title>たたけ! </title>

<script src=”moji.js”></script>

<style>

body {

text-align:center;

}

</style>

</head>

<body>

<h1 id=”moji”>たたけ! </h1>

<div><img id=”hachi” src=”hachi.png” ></div>

</body>

</html>

今度はHTMLの要素h1にidがついていますね。この文字を変えようという

わけです。

moji.js

let mouse;

window.onload = function() {

ite();

};

function ite() {

mouse=document.getElementById(“moji”);

mouse.onclick = function() {

mouse.innerHTML =”あんまりたたくなー!!”;

};

}

変えるのは文字ですから今度は画像ではなく文字の上でクリックするのです。

このように、HTMLの要素に変化を与えたいとき、innerHTMLと表記します。

また、文字の色や大きさなど、CSSに相当することも自由に変えることができます。

例えば「でも優しく頼むね」という文字を色をつけて大きさを変えてみます。

hachi.html

<html>

<head>

<title>たたけ! </title>

<script src=”hitokoto.js”></script>

<style>

body {

text-align:center;

}

</style>

</head>

<body>

<h1>たたけ! </h1>

<p id=”hitokoto”>でも優しく頼むね</p>

<div><img id=”hachi” src=”hachi.png” ></div>

</body>

</html>

hitokoto.js

let mouse;

window.onload =function() {

ite();

};

function ite() {

mouse = document.getElementById(“hitokoto”);

mouse.onclick = function() {

mouse.innerHTML = “<p style=‘color:red; font-size: 32px;’>でも優しく頼むね</p>”;

};

}

つまりHTML/CSSはすべてJavaScriptで変えられるのです

ゲームをつくろう!

イベントとタイマーを使ってゲームをつくる

「モグラたたきゲーム」をつくってみてください。モグラの役目をつとめるのは、われらがはちくん。はちくんをマウスでクリックすると、それが「モグラをたたいた」と見なされて点数が上がるしくみです。

ここで紹介したテクニックは、もちろん他のゲームでも応用するこ

とができます。自分なりのゲームを組み立ててみてください。

現れたり消えたり

ゲームを作成するにあたり、みなさんがしなければならないのは、まず設計図をつくることです。設計図には、どういうゲームにしたいか、そしてどういうしくみでそれを成り立たせるかを考えます。

設計図を書く

まずは「こんなゲームをつくりたい」という設計図を書いてみてください。なにかをつくるとき、設計図はかならず必要になります。家を建てるときにも、自動車をつくるときにも、設計図は必要です。ものが大きく複雑になり、関わる人の数が増えれば増えるほど、設計図は詳細なものが求められるようです。

モグラたたきゲーム

はちくんのモグラたたきゲームをつくってみます。こんな設計図を書いてみます。

もぐらたたき

ルールは、こんな感じです。

①はちくんが出たり消えたりする。

② マウスでクリックすると泣き顔になる。

③クリックするとモグラ(はちくん)をたたいたことになり、1点入る

④最高点を表示しておく。

⑤絵を表示するスピードはだんだん早くなる。

モグラたたきゲームは穴を出たり入ったりするモグラをトンカチでたたくゲームですが、ここでは現れたり消えたりするはちくんの絵を、マウスでクリックする形をとります。現れたはちくんをクリックできれば、ポイントになるわけです。

まず、ベースとなるHTMLプログラムをつくります。こんなページです。

mogura.html

<html>

<head>

<title>もぐらたたき</title>

<script src=”tataku.js”></script>

<style>

h1, div {

text-align:center;

}

</style>

</head>

<body>

<h1>もぐらたたき</h1>

<div><img src=”hachi.png” id=”gazo”></div>

</body>

</html>

h1とdivが真ん中に表示されるようにtext-align:centerとしています。

<script>に入っているtataku.jsをこれからつくっていって、モグラたたきゲームを完成させます。

現れたり消えたりする

さて、tataku.jsに次のようなプログラムを書き入れてみてください。

tataku.js

let hachikun;

window.onload = function() {

start();

};

function start() {

hachikun = document.getElementById(“gazo”);

hachikun.style.visibility = “hidden”;

}

うまくいったなら、画像が表示されないはずです。

ひとつひとつ振り返ってみます。

window.onload = function() {

start();

};

これは、「ウィンドウがロードされたとき」つまりすべてが表示されたあとでstart()という関数が発動することを示しています。

start()の内容は、そのあとに書かれています。まず、hachikunという変数をつくっています。これは、document.getElementByIdを使って、gazoというidがついたタグを持ってきています。imgタグですね。

次に、hachikunという変数のstyle(スタイル)を変更しています。変えるのは、Visibility。目に見える度合いという意味です。これが、hidden(隠れた。)になっているため、はちくんの絵が見えなくなってしまったのです。

隠れてるんなら見せる方法もあるはずですよね。

hachikun.style.visibility = “hidden”;

と書かれた部分を

hachi.style.visibility = “visible”;

とすればはちくんが見えるようになるはず。これはstyle(スタイル)のvisibility(目に見える度合い)を、Visible(目に見える)”に変えたため、見えるようになったのです。

タイマーを使ってみようセットタイムアウト

ゲームには時間制限がつきものです。今作成しているはちくんモグラたたきゲームにも、時間制限がつきます。setTimeoutという機能を使い、はちくんが現れたり消えたりするタイミングを決めてください。

タイマーを設定する

前項の方法を使えば、はちくんの絵は現れたり消えたりします。ただし、勝手に見えるようになったり隠れたりするのではなく、いちいち指定しなければなりません。自動的に現れたり消えたりしなくては、ゲームになりません。

そこで、時間を設定することにより、はちくんの明滅を自動化してみてください。「タイマー」と呼ばれる機能を使います。「タイマー」って、料理なんかに使う、時間をはかるアレのことです。

ほぼ同じ機能がJavaScriptにもあります

JavaScriptでタイマーを使うためには、setTimeoutを使います。

setTimeout(やりたいことが書いてある関数, タイマーの時間);

tataku.js を改良してみてください。

tataku.js

let hachikun;

window.onload = function() {

start();

};

function start() {

hachikun = document.getElementById(“gazo”);

setTimeout(kesu, 3000);

}

function kesu() {

hachikun.style.visibility = “hidden”;

}

このコードには、setTimeout(kesu, 3000);が加わっています。やりたいことははちくんの絵を消すこと。kesuという関数として書かれていますね。ここでいう3000というのは3秒のことです。

setTimeout、あるいはその他の時間を使ったプログラムでは、1 とは1ミリ秒、すなわち0.001秒という意味です。「1秒」と指定したいときには1000 と書き込みます。次のようなかたちになります。

「ミリ秒」と「秒」の関係

1ミリ秒=0.001 秒

10ミリ秒=0.01 秒

100ミリ秒=0.1 秒

1000ミリ秒=1秒

5000ミリ秒=5秒

10000ミリ秒=10秒

30000ミリ秒=30秒

60000ミリ秒=60秒(1分)

「1分」を指定したいときには「60000」と書く必要がある

ってことです。

前項のmogura.html を表示してみると、はじめははちくんが見えて、3秒たつと消えます。

setTimeout()には、「3秒たったら関数 kesu を呼び出す」と書かれています。

5秒後に消したければ、

setTimeout(kesu, 5000);

と書けばよいですし、10秒後に消したければ、数字を10000にします。

出したり消えたり

とはいえ、ここまでの作業をおこなっても、モグラたたきになりません。なぜかというと……。

消えたっきり元に戻らないからです。

これまで画像を消す方法は述べてきましたが、それを表示する

ためコードを書き加えなければなりません。

画像を消すために、以下のように記述していました。

hachikun.style.visibility = “hidden”;

これを

hachikun.style.visibility = “visible”;

に変えれば、画像を表示することができます。

visibleとはhiddenの反対の意味。「見える」ということです。ここで、隠れていたはちくんが見えるようになります。

tataku.js

let hachikun;

window.onload = function() {

start();

};

function start() {

hachikun = document.getElementById(“gazo”);

setTimeout(kesu, 3000);

}

function kesu() {

hachikun.style.visibility= “hidden”;

setTimeout(dasu, 3000);

}

function dasu() {

hachikun.style.visibility = “visible”;

setTimeout(kesu, 3000);

}

関数 kesu( ) の中では、まずはちくんの画像を消しています。

hachikun.style.visibility= “hidden”;

setTimeout(dasu, 3000);

3秒たつと消えます。

つづいて、3秒後に関数 dasu を呼び出すように、setTimeoutを使ってます。

setTimeout(dasu, 3000);

setTimeoutは基本的に、「次に何をするか」を記述するものだと考えていいでしょう。3000という数字は「それをいつするか」を指定したものです。

ここには、こう書いています。

hachikun.style.visibility = “visible”;

3秒たつと見えます。

さらにその次には、ふたたび関数kesuを呼び出すように指定しています。

すると、start() → kesu) dasu() → kesu() → … と、3秒ごとにくりかえされるようになるのです。

出たり消えたりします。

タイミングをランダムに変化させよう

一定時間ごとにモグラが出るようにすると、プレイヤーはモグラが出てくるタイミングがわかるようになります。そのタイミングに合わせてトンカチ(ここではマウス)を使えばいいので、面白くないのです。ではどうすれば……。

はちくんをランダムに出す

プレイしてみるとわかりますが、「モグラは3秒ごとに現れる」とわかっていれば、いくらでも対策が講じられます。それもこれも、はちくん(モグラ)が登場する時間が決まっているからです。

本格的なゲームで時間設定するときは、ふつう「3秒ごとに」というような、決められた数字は使いません。ランダム、つまり1秒だったり3秒だったり0.5秒だったり、予測できないような間隔で効果が表れるものです。

ランダムな時間表示をつくるために、JavaScriptにはランダムな数字をつくる方法があります。

Math.random();

を使います。ランダムに表れる数字を、乱数と呼びます。

変数ransuを使って、ランダムに数字を表してみてください。

こんなプログラムを書きます。

random.html

<html>

<script>

let ransu= Math.random();

alert(ransu);

</script>

</html>

これを実行すると、毎回ちがった数字が出てきます。

どうしたらゆっくりになる?

カンのいい人は、さきの例を何度か試して気づいたかと思うのですが、これ、全部1より小さい数です。0.05049….…という数字は、約0.05を表しています。

さて、もともとなんのためにランダムな数字をつくるか思い起

こしてみてください。はちくん(モグラ)が、3秒ごとという決められた時間で消えたり現れたりしてしまうと、ゲームは成立しなくなってしまう。予測できないようなタイミングではちくんが出てくるようにしたい、ということでした。つまり、「3秒ごと」ではなく、「乱数秒ごと」にすればいいわけです。

そこで、次のようなコードを書いてみます。

tataku.js

let hachikun;

window.onload = function() {

start();

};

function start() {

hachikun = document.getElementById(“gazo”);

let ransu = Math.random();

setTimeout(kesu, ransu);

}

function kesu() {

hachikun.style.visibility = “hidden”;

let ransu = Math.random();

setTimeout(kesu, ransu);

}

function dasu() {

hachikun.style.visibility = “visible”;

let ransu = Math.random();

setTimeout(kesu, ransu);

}

プログラムがどんなに正確に書けていても、このゲームは難しいと思います。なぜならモグラが表示される時間が短すぎます。

ランダムな数字を大きくする

じつは、Math.random() は、0~1の間の小数の数字をつくります。ただし、これをそのままタイマーとしたのでは、人には対応できないような間隔がつくられることになってしまいます。

そこで、乱数を、0~3にしてみてください。

どうすればいいかというと……。

let ransu3 = Math.random() * 3;

3をかければ3までの数字が表示されるのです。

random3.html

<html>

<script>

let ransu3 = Math.random() * 3;

alert(ransu3);

</script>

</html>

数字が大きくなりましたね。

時間設定しなおす

さきほどのtataku.jsを修正して、はちくん(モグラ)が表示される時間を変えてみてください。

mogura.js

let hachikun;

window.onload = function() {

start();

};

function start() {

hachikun = document.getElementById(“gazo”);

let ransu3 = Math.random()

* 3;

setTimeout(kesu, ransu3 * 1000);

}

function kesu() {

hachikun.style.visibility “hidden”;

let ransu3 = Math.random() * 3;

setTimeout(dasu, ransu3 * 1000);

}

function dasu() {

hachikun.style.visibility = “visible”;

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

}

setTimeout() でランダムの数字を 1000倍しているのは、単位を「秒」にするためです。

setTimeout(kesu, ransu3 * 1000);

なお、mogura.htmlも新しいjsファイルmogura.jsを読み込む必要がありますから、

<script src=”mogura.js”></script>を入れる必要があります。

モグラをたたく

モグラをたたいたとき、なにか効果があるとおもしろいですよね。うまくクリックすることができたら、何か言うとか、画像が変わるとか。そんなしくみをつくってみることにしてください。

クリックでダイアログを表示する

これまでは、単純にはちくんが現れたり消えたりするしくみをつくっていました。ゲームっぽくするためには、現れたはちくんをクリックしたら(モグラをたたいたら)消えるようにします。

さらに、たたくことが成功したらそれがわかるようなしくみを付け加えたいのです。

クリックされたとき、はちくんが何か言うとおもしろいですよね。

はちくんをクリックすると、「たたかれた!」というダイアログ(アラート)を表示するのです。

dialog.js

let hachikun;

window.onload = function() {

start();

};

function start() {

hachikun = document.getElementById(“gazo”);

hachikun.onclick = function() {

alert(“たたかれた! “);

};

}

mogura.html

<html>

<head>

<title>+<5t=t=</title>

<script src=”dialog.js”></script>

<style>

h1, div {

text-align:center;

}

</style>

</head>

<body>

<h1>もぐらたたき</h1>

<div><img src=”hachi.png” id=”gazo”></div>

</body>

</html>

mogura.html から読みこむ JavaScript のプログラムを、tataku.jsからdialog.js に変えてください。

<script src=”tataku.js”></script>

<script src=”dialog.js”></script>

ポイントはクリックしたらonclickが使われていることです。

クリックで画像を変える

続いて、クリックしたことではちくんの顔が変わるようにします。kaeru.jsというファイルをつくります。

kaeru.js

let hachikun; 

window.onload = function() {

start();

};

function start() {

hachikun = document.getElementById(“gazo”);

hachikun.onclick = function() {

hachikun.src =”naki.png”;

};

}

mogura.html から読みこむ JavaScript のプログラムを、dialog.jsからkaeru.js に変えてください。

<script src=”dialog.js”></script>

<script src=”kaeru.js”></script>

このしくみを、さきほど作成した「はちくんがランダムで出たり消えたりするプログラムに追加してみます。

tataku.js

let hachikun;

window.onload = function() {

start();

};

function start() {

hachikun = document.getElementById(“gazo”);

hachikun.onclick = function() {

hachikun.src =”naki.png”;

alert(“たたかれた!”);

};

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

}

function kesu() {

hachikun.style.visibility = “hidden”;

let ransu3 = Math.random()*3;

setTimeout(dasu, ransu3 * 1000);

}

function dasu() {

hachikun.style.visibility= “visible”;

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

}

関数 start() の中で、変数 hachikunにはちくんの画像のオブジェクトを取り出して入れたあとに、次の4行を追加しています。

hachikun.onclick = function() {

alert(“たたかれた!”);

hachikun.src =”naki.png”;

};

mogura.html から読みこむ JavaScript のプログラムを、kaeru.jsからtataku.js に変えるのを忘れないようにしてください。

<script src=”kaeru.js”></script>

<script src=”tataku.js”></script>

しばらくしたら元に戻す

さて、これでモグラたたきゲームっぽくなってきたぞ……と思ったあなた、まだちょっと早いです。というのは、はちくん(モグラ)をクリックして(たたいて)、泣き顔のはちくんを表示できたのはいいのですが、いつまでも泣いたままなのです。しばらくしたら元に戻るようなしくみを考えないといけません。

ここでは、はちくんが泣き顔になった1秒後に、元に戻るようにしましょ

う。

setTimeout()を使います。

tataku.js

let hachikun; ;

window.onload = function() {

start();

}

function start() {

hachikun = document.getElementById(“gazo”);

hachikun.onclick = function()

hachikun.src =”naki.png” ;

setTimeout(modosu, 1000);

};

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

}

function modosu() {

hachikun.src = “hachi.png”;

}

function kesu() {

hachikun.style.visibility = “hidden”;

let ransu3 = Math.random() * 3;

setTimeout(dasu, ransu3 * 1000);

}

function dasu() {

hachikun.style.visibility = “visible”;

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

};

hachikun.onclick = function() { … ) の中で、画像を泣き顔(naki.png)に変えたあと、タイマーをセットしておきます。

hachikun.onclick = function() {

hachikun.src = “aita.png”;

setTimeout(modosu, 1000);

};

1秒、つまり 1000 ミリ秒 たつと、modosu という関数を呼び出すと書かれています。modosuはここで用意した新しい関数です。

function modosu() {

hachikun.src = “hachi.png”;

}

点数を表示しよう

ゲームをつくるなら、点数表示するようにしたいですね。たとえば10点だったなら、次は15点にしようとか思います。点数が表示される場所をつくっていきます。

モグラをたたくたびに1点、2点、3点……と点数が1点ずつ加算されるといいですよね。

まずははちくんの下に「0点」というポイントが表示されるようにします。

見た目を変えるのですから、改訂が必要なのはmogura.htmlの方です。

mogura.html

<html>

<head>

<title>もぐらたたき</title>

<script src=”tataku.js”></script>

<style>

h1, div {

text-align:center;

}

</style>

</head>

<body>

<h1>もぐらたたき</h1>

<div><img src=”hachi.png” id=”gazo”></div>

<div>0点</div>

</body>

</html>

<div>は<h1>と異なり、それ自体に意味があるタグではありません。<h1>は「見出し1」というほどの意味であり、<h1>……</h1>で囲まれた部分を見出しっぽく、大きなフォントで表示してくれますが、<div>は意味を持ちませんから、書き入れたところで変化はありません。

<div>0点</div>

と書き入れて、点数を表示しました。

クリックで点数をふやす

「0点」と表示されたものの、この点数、いくらゲームが進行しても増えません。点数を増やすしくみが必要です。これで必要になるのがJavaScriptファイルの改訂です。

まずは、点数をおぼえておく変数 tensu を用意して、その中に0を入れておきてください。

let tensu = 0;

次に、はちくんの画像をクリックするたびに1点ずつ増えるようなしくみをつくります。

はちくんの画像がクリックされたときには、すでにいくつか変化が現れるようになっていました。クリックすると泣き顔になるのもそのひとつですよね。

tataku.jsの次の部分です。

hachikun.onclick= 3D function() {

hachikun.src =”naki.png”;

setTimeout(modosu, 1000);

};

ここでは、hachi.src =”naki.png” で画像を泣き顔のはちくんに変えて、setTimeout(modosu, 1000) で1秒後 (1000ミリ秒後)に元に戻るようにしています。ここの部分で、ついでに1点増えるようにしてください。

tentkun.onclick = function() {

hachikun.src =”naki.png”;

setTimeout(modosu, 1000);

tensu = tensu + 1;

};

この点数計算のプログラムをtataku.jsに加えます。

tataku.js

let hachikun;

let kieru;

let tensu = 0;  

window.onload = function() {

start();

}

function start() {

hachikun = document.getElementById(“gazo”);

hachikun.onclick = function() {

hachikun.src =”aita.png”;

setTimeout(modosu, 1000);

tensu = tensu + 1;

};

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

}

function kesu() {

hachikun.style.visibility = “hidden”;

let ransu3 = Math.random() * 3;

setTimeout(dasu, ransu3 * 1000);

}

function dasu() {

hachikun.style.visibility= “visible”;

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

}

function modosu() {

hachikun.src = “hachi.png”;

}

これで点数表示のしくみはできました。できましたが……あれ?

いくらやっても点数があがりません。

じつは、変数 tensu の中身は増えてるんだけど、mogura.html の中に、書きこんでいないのです。今はしくみをつくっただけの状態です。表示を変えてみてください。

HTMLを書きかえる

まず、mogura.html の中の点数の数字の部分を書きかえるために、「0点」となっているところを、<span> という HTML タグで囲みます。spanタグは、JavaScriptなどで読みこんでおいて、見た目を変えたり動きに変化をつけたいときに使います。

具体的には、mogura.htmlの<div>の部分を、次のように変えて、tenというidをつけます。

<div><span id=”ten”>0</span>点</div>

つづいて、tataku.jsに変数 hyoji を用意して、

let hyoji;

getElementById(“ten”) で読みこんで保存しておきます。

hyoji= document.getElementById(“ten”);

そして、innerHTMLをもちいて、加算された点数を表示するようにしてください。変数tensuが表示されるようにします。

tataku.jsとmogura.htmlは次のようになります。

tataku.js

let hachikun;

let kieru;

let hyoji;

let tensu = 0;

window.onload = function() {

start();

}

function start() {

hachikun = document.getElementById(“gazo”);

hyoji=document.getElementById(“ten”); 

hachikun.onclick = function() {

hachikun.src=”naki.png”;

setTimeout(modosu, 1000);

tensu = tensu + 1;

hyoji.innerHTML = tensu; 

};

let ransu3 =Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

}

function kesu() {

hachikun.style.visibility = “hidden”;

let ransu3 = Math.random() * 3;

setTimeout(dasu, ransu3 * 1000);

}

function dasu() {

hachikun.style.visibility = “visible”;

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

}

function modosu() {

hachikun.src = “hachi.png”;

}

mogura.html

<html>

<head>

<title>もぐらたたき</title>

<script src=”tataku.js”></script>

<style>

h1, div {

text-align:center;

}

</style>

</head>

<body>

<h1>もぐらたたき</h1>

<div><img src=”hachi.png” id=”gazo”></div>

<div><span id=”ten”>0</span>点</div>

</body>

</html>

これで点数が表示されるようになります。

ゲームオーバー!

じつはこのゲーム、重大な欠陥があります。終わりがないので、いつまでも続いてしまうのです。ゲームに終わりをつくるとともに、終わりの前に難易度があがるちょっとイジワルもつくります。

ゲームを終わらせよう

はちくんは現れたり消えたりするようになった。たたくと、顔もかわるしセリフも言ってくれる。現れる時間はランダムで、予測不能。そして、たたくのに成功するとポイントになる。

ゲームとしては、完成したような気がします。必要な機能はすべて備えたような、そんな気がします。ところが……。

このゲーム、終わりがないのです。クリックすれば点数はあがっていきますが、「ここで終わり」という区切りがありません。

モグラたたきゲームですから、時間制限をつけてください。ある程度時間が経過したらゲームは終わり、という形です。setTimeout() を使えばできそうです。1分たったらゲームは終わりとします。

関数stopをつくり、次のように記述します。60000とは60000ミリ秒、つまり60秒、1分です。

setTimeout(stop, 60000);

これをふくめ、tataku.jsを次のように改訂します。

tataku.js

let hachikun;

let kieru;

let hyoji;

let tensu = 0;

window.onload = function() {

start();

}

function start() {

hachikun = document.getElementById(“gazo”);

hyoji = document.getElementById(“ten”);

hachikun.onclick = function() {

hachikun.src =”naki.png”;

setTimeout(modosu, 1000);

tensu = tensu + 1;

hyoji.innerHTML = tensu;

};

let ransu3 = Math.random() *3;

setTimeout(kesu, ransu3 * 1000);

setTimeout(stop, 60000);

}

function kesu() {

hachikun.style.visibility = “hidden”;

let ransu3 = Math.random() * 3;

setTimeout(dasu, ransu3 * 1000);

}

function dasu() {

hachikun.style.visibility=”visible”;

let ransu3 = Math.random()* 3;

setTimeout(kesu, ransu3 * 1000);

}

function modosu() {

hachikun.src = “hachi.png”;

}

function stop() {

alert(“ゲームオーバー!”);

}

ゲームオーパー!が出たはずです。

ところが、これでゲームが終わったわけではありません。

出てきた「ゲームオーバー!」というアラートの[OK]ボタンを押すと、またはちくんが現れたり消えたりしはじめます。はちくんをクリックすれば、点数を増やすことも可能です!

つまりぜんぜん終わっちゃいないってことです。

trueとfalseで問題解決!

今起きている問題を整理してみてください。

①「ゲームオーバー!」というアラートの[OK]を押しても、はちくんが出たり消えたりし続ける。

②「ゲームオーバー!」というアラートの[OK]を押しても、点数が増え続ける。

2つとも、[OK]ボタンを押したあとの問題であることがわかります。つまり、関数 stop() の中だけが問題なのです。

stop()を書きかえてみてください。

変数gameoverを用意して、trueとfalseでゲームの状態を表します。trueは真とか本当とかいう意味です。反対語はfalse。偽、ないしは嘘を表します。

let gameover = false;

これだと、ゲームオーバーが偽、つまりまだゲームが終わってないということになります。はじめはもちろんこの状態です。

点数があがるのは、はちくんが見えていて、クリックできるからです。

「ゲームオーバー!」というアラートが出たら、はちくんが見えなくなるようにしてください。このとき、gameoverが真(true)になります。

tataku.js

let hachikun;

let kieru;

let hyoji;

let tensu = 0;

let gameover = false; 

window.onload = function() {

start();

}

function start() {

hachikun = document.getElementById(“gazo”);

hyoji = document.getElementById(“ten”);

hachikun.onclick = function() {

hachikun.src=”naki.png”;

setTimeout(modosu, 1000);

tensu = tensu + 1;

hyoji.innerHTML = tensu;

};

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

setTimeout(stop, 60000);

}

function kesu() {

hachikun.style.visibility = “hidden”;

let ransu3 = Math.random()*3;

setTimeout(dasu, ransu3 * 1000);

}

function dasu() {

if (gameover == false) {

hachikun.style.visibility = “visible”;

}

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

}

function modosu() {

hachikun.src = “hachi.png”;

}

function stop() {

alert(“ゲームオーバー!”);

gameover = true; 

hachikun.style.visibility = “hidden”;

}

ラストスパート!

たいがいのゲームは、ゴール近くなると難易度が高くなるものです。このモグラただきゲームも、そういうしくみを取り入れてください。ゲームの終わりが近くなったら、はちくんの表示のスピードを早くします。消えるのも同じように早いです。

時間を操作するわけですから、setTimeoutを使います。今のところ、絵を、出したり消したりしているタイマーは、1~3秒の間でランダムになるように設定されていました。これを、残り10秒になったところから、0~1秒にします。

setTimeout(nokori10, 50000);

50000というのは、「スタートしてから50秒たったとき」という意味です。

1分間(60秒)のゲームですから、「残り10秒」とは50秒たったときですよね。

つまり、50秒たつと、関数nokori10()が実行されるようにします。

関数nokori10は、まず、「もう、おこったぞ!」とダイアログを出します。

let lastspurt = false;

function nokori10() {

alert(“もう、おこったぞ!”);

lastspurt = true;

}

変数lastspurtは、はじめは偽(false)です。関数 nokori10が呼ばれたら、まずは「もう、おこったぞ!」というアラートを出し、[OK]ボタンが押されると、真(true)になります。

それまで、関数 kesu()の中で関数 dasu() を呼び出して、はちくんの絵を出すタイミングを決めていました。残り10秒になると、dasu()がdasu10()

になります。

function kesu() {

hachikun.style.visibility = “hidden”;

let ransu3 = Math.random() * 3;

if (lastspurt == true) {

setTimeout(dasu10, ransu3 * 1000);

} else {

setTimeout(dasu, ransu3 * 1000);

}

}

関数 dasu() と関数 dasu10() の違いは、変数 ransu3 と変数 ransu の違いだけです。dasu() の中では、0~3 秒になるように、Math.random() に

3をかけていましたが、dasu10() の中では、Math.random() をそのまま使っています。

function dasu 10 {

if (gameover == false) {

hachi.style.visibility = “visible”;

}

let ransu = Math.random();

setTimeout(kesu, ransu * 1000);

}

ではtatamiの.js全体を見てみます。

tataku.js

let hachikun;

let kieru;

let hyoji;

let tensu = 0;

let gameover = false;

let lastspurt=false; 

window.onload = function() {

start();

}

function start() {

hachikun = document.getElementById(“gazo”);

hyoji = document.getElementById(“ten”);

hachikun.onclick = function() {

hachikun.src =”naki.png”;

setTimeout(modosu, 1000);

tensu = tensu + 1;

hyoji.innerHTML = tensu;

};

let ransu3 = Math.random()* 3;

setTimeout(kesu, ransu3 * 1000);

setTimeout(stop, 60000);

setTimeout(nokori10, 50000);

}

function nokori10() {

alert(“もう、おこったぞ!”);

lastspurt = true; 

}

function kesu() {

hachikun.style.visibility=”hidden”;

let ransu3 = Math.random() * 3;

if (lastspurt == true) { 

setTimeout(dasu10, ransu3 * 1000);

} else {

setTimeout(dasu, ransu3 * 1000);

}

}

function dasu() {

if (gameover == false) {

hachikun.style.visibility = “visible”;

}

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

}

function dasu10() {

if (gameover==false) {

hachikun.style.visibility = “visible”;

}

let ransu =Math.random(); 

setTimeout(kesu, ransu * 1000);

}

function modosu() {

hachikun.src = “hachi.png”;

}

function stop() {

alert(“ゲームオーバー!”);

gameover =true;

hachikun.style.visibility = “hidden”;

}

最高点を表示しよう

ゲームを作るなら、最高点の表示機能は絶対に欲しいところ。さらに、ゲームを何度もやるためのしくみをつくってみます。

最高点を記録する

せっかくゲームをするのですから、自分がどの程度の点数をとったのか知っておきたいですよね。誰でも経験あると思いますが、こちらの調子やゲームの出題によって、点数がとれなかったりするものです。

まず、HTMLを書き換えて、最高点を表示する欄をつくりてください。次のようにします。

コードは次のようになります。

mogura.html

<html>

<head>

<title>もぐらたたき</title>

<script src=”tataku.js”></script>

<style>

h1, div {

text-align:center;

}

</style>

</head>

<body>

<h1>もぐらたたき</h1>

<div><img src=”hachi.png” id=”gazo”></div>

<div><span id=”ten”>0</span>点</div>

<div>(最高<span id=”saiko”>0</span>点)</div>

</body>

</html>

tataku.js

let hachikun;

let kieru;

let hyoji;

let tensu =0;

let saiko = 0; 

let gameover = false;

let lastspurt=false;

window.onload = function() {

start();

}

function start() {

hachikun=document.getElementById(“gazo”);

hyoji=document.getElementById(“ten”);

hachikun.onclick=function() {

hachikun.src =”naki.png”;

setTimeout(modosu, 1000);

tensu = tensu + 1;

hyoji.innerHTML = tensu;

};

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

setTimeout(stop, 60000);

setTimeout(nokori10, 50000);

}

function nokori10() {

alert(“もう、おこったぞ!”);

lastspurt=true;

}

function kesu() {

hachikun.style.visibility=”hidden”;

let ransu3 = Math.random() * 3;

if (lastspurt == true) {

setTimeout(dasulo, ransu3 * 1000);

} else {

setTimeout(dasu, ransu3 * 1000);

}

}

function dasu() {

if (gameover == false) {

hachikun.style.visibility = “visible”;

}

let ransu3 = Math.random()* 3;

setTimeout(kesu, ransu3 * 1000);

}

function dasu10() {

if (gameover == false) {

hachikun.style.visibility = “visible”;

}

let ransu = Math.random();

setTimeout(kesu, ransu * 1000);

}

function modosu() {

hachikun.src = “hachi.png”;

}

function stop() {

alert(“ゲームオーバー! “);

gameover = true;

hachikun.style.visibility = “hidden”;

if (tensu > saiko) { 

saiko = tensu;

kiroku = document.getElementById(“saiko”); 

kiroku.innerHTML =saiko;

}

}

スタートボタンをつける

これでひととおり機能はつくった……と思いきや、このゲーム、重大な欠陥があるのです。

スタートボタンがありません。

再スタートできないのです。

1度のみプレイするならmogura.htmlにアクセスすればはじ

まりますが、二度目にやろうとすると同じことをくりかえさなければなりません。記録していた最高点も0になってしまいます。スタートボタンがないためです。

Mogura.htmlに以下を書き入れます。

<button id=”start”>スタート!</button>

ボタンには「スタート!」と表示されます。これは見た目のみの改造でしくみはjsファイルにJavaScriptで書き込む必要がありますから、startというid をつけておきます。

mogura.html

<html>

<head>

<title>もぐらたたき</title>

<script src=”tataku.js”></script>

<style>

h1, div {

text-align:center;

}

</style>

</head>

<body>

<h1>もぐらたたき</h1>

<div><img src=”hachi.png” id=”gazo”></div>

<div><span id=”ten”>0</span>点</div>

<div><span id=”saiko”>0</span></div>

<div><button id=”start” >スタート!</button></div>

</body>

</html>

tataku.js

let hachikun;

let kieru;

let hyoji;

let botan;

let tensu = 0;

let saiko = 0;

let gameover = false;

let lastspurt = false;

window.onload=function() {

start();

}

function start() {

hachikun = document.getElementById(“gazo”);

hyoji = document.getElementById(“ten”);

botan=document.getElementById(“start”); 

hachikun.onclick = function() {

hachikun.src =”naki.png”;

setTimeout(modosu, 1000);

tensu = tensu + 1;

hyoji.innerHTML = tensu;

};

botan.onclick = function() { 

gameover = false; 

lastspurt = false; 

tensu = 0; 

hyoji.innerHTML = tensu; 

start();

}

let ransu3=Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

setTimeout(stop, 60000);

setTimeout(nokori10, 50000);

}

function nokori10() {

alert(“もう、おこったぞ!”);

lastspurt = true;

}

function kesu() {

hachikun.style.visibility =”hidden”;

let ransu3 = Math.random()* 3;

if (lastspurt == true) {

setTimeout(dasu10, ransu3 * 1000);

} else {

setTimeout(dasu, ransu3 * 1000);

}

}

function dasu() {

if (gameover == false) {

hachikun.style.visibility = “visible”;

}

let ransu3 = Math.random() * 3;

setTimeout(kesu, ransu3 * 1000);

}

function dasu10() {

if (gameover == false) {

hachikun.style.visibility = “visible”;

}

let ransu = Math.random();

setTimeout(kesu, ransu * 1000);

}

function modosu() {

hachikun.src = “hachi.png”;

}

function stop() {

alert(“ゲームオーバー!”);

gameover = true;

hachikun.style.visibility = “hidden”;

if (tensu > saiko) {

saiko = tensu;

kiroku =document.getElementById(“saiko”);

kiroku.innerHTML = saiko;

}

}

モグラを増やそう

モグラの数を増やせば、ゲームの難易度は飛躍的にあがり、よりゲームらしくなります。ただし、モグラが3人なら3人ぶんのプログラムをつくらなくてはなりません。何と何が必要なのか。ゲーム制作のラストスパートです!

はちくんを増やす

これでゲームに必要な機能はすべて盛り込んだことになります。ただ、ちょっとさみしい気がします。今のところ、はちくんは1人だけ。

見た目上、はちくんを3人にするのは、そんなに難しいことではありませ

ん。

<img src=”hachi.png” id=”gazo”>

としてはちくんの画像を表示しているのですから、これを3回くりかえせばいいのです。

mogura.html

<html>

<head>

<title>もぐらたたき</title>

<script src=”tataku.js”></script>

<style>

hi, div {

text-align:center;

}

</style>

</head>

<body>

<h1>もぐらたたき</h1>

<div>

<img src=”hachi.png” id=”gazo”>

<img src=”hachi.png” id=”gazo”>

<img src=”hachi.png” id=”gazo”>

</div>

<div><span id=”ten”>0</span></div>

<div>(最高<span id=”saiko”>0</span>点)</div>

<div><input id=”start” type=”button” value=”スタート!”></div>

</body>

</html>

絵の表示を3回くりかえしています。これで目的のページができました。

ただし、このページは見た目上は3人のはちくんが表示され、それっぽく

なっているものの、「スタート!」ボタンを押しても、2人目、3人目のテントくんは動く気配がありません。なぜなら、3人のはちくんが、全部同じ”gazo” というID だからです。なにかうまい方法を考えないと、このままではゲームになりません。そこで、ID を “gazo1″、”gazo2″、”gazo3″とそれぞれ

別のものにします。

<img src=”hachi.png” id=”gazo1″>

<img src=”hachi.png” id=”gazo2″>

<img src=”hachi.png” id=”gazo3″>

次に、3人それぞれにプログラムをつくる必要があります。

つまり3人ぶんのプログラムを書くってことです

3人ぶんのプログラムを書き加えたtataku.jsは以下のような形になります。

tataku.js

let hachi1; 

let hachi2; 

let hachi3;

let hyoji;

let botan;

let tensu = 0;

let saiko = 0;

let gameover =false;

let lastspurt = false;

window.onload = function() {

start();

}

function start() {

hachi1 = document.getElementById(“gazol”); 

hachi2 = document.getElementById(“gazo2”); 

hachi3 = document.getElementById(“gazo3”); 

hyoji = document.getElementById(“ten”);

botan = document.getElementById(“start”);

hachii.onclick = function() { 

this.src =”naki.png”;

setTimeout(modosu1, 1000);

tensu = tensu + 1;

hyoji.innerHTML = tensu;

};

hachi2.onclick = function() {

hachi2.src =”naki.png”;

setTimeout(modosu2, 1000);

tensu = tensu + 1;

hyoji.innerHTML = tensu;

};

hachi3.onclick = function() {

hachi3.src =”naki.png”;

setTimeout(modosu3, 1000);

tensu = tensu + 1;

hyoji.innerHTML = tensu;

};

botan.onclick = function() {

gameover = false;

lastspurt = false;

tensu = 0;

hyoji.innerHTML = tensu;

start();

}

let ransu3 = Math.random() * 3;

setTimeout(kesui, ransu3 * 1000); 

setTimeout(kesu2, ransu3 * 1000);  

setTimeout(kesu3, ransu3 * 1000); 

setTimeout(stop, 60000);

setTimeout(nokori10, 50000);

}

function nokori10() {

alert(“もう、おこったぞ!”);

lastspurt=true;

}

function kesu1() {

hachi1.style.visibility = “hidden”; let ransu3 = Math.random( )* 3;

if (lastspurt == true) {

setTimeout(dasu101, ransu3 * 1000);

} else {

setTimeout(dasul, ransu3 * 1000);

}

}

function kesu2() {

hachi2.style.visibility = “hidden”;

let ransu3 = Math.random()* 3;

if (lastspurt == true) {

setTimeout(dasu102, ransu2 * 1000);

} else {

setTimeout(dasu2, ransu3 * 1000);

}

}

function kesu3() {

hachi3.style.visibility = “hidden”;

let ransu3 = Math.random()* 3;

if (lastspurt == true) {

setTimeout(dasu103, ransu3 * 1000);

} else {

setTimeout(dasu3, ransu3 * 1000);

}

}

function dasu1() {

if (gameover == false) {

hachi1.style.visibility = “visible”;

}

let ransu3 = Math.random() * 3;

setTimeout(kesul, ransu3 * 1000);

}

function dasu2() {

if (gameover == false) {

hachi2.style.visibility = “visible”; 

}

let ransu3 = Math.random() * 3;

setTimeout(kesu2, ransu3 * 1000);

}

function dasu3() {

if (gameover == false) {

hachi3.style.visibility = “visible”;

}

let ransu3 = Math.random()* 3;

setTimeout(kesu3, ransu3 * 1000);

}

function dasu101() {

if (gameover == false) {

hachi1.style.visibility = “visible”;

}

let ransu =Math.random();

setTimeout(kesu1, ransu * 1000); 

}

function dasu102() {

if (gameover == false) {

hachi2.style.visibility=”visible”;

}

let ransu = Math.random();

setTimeout(kesu2, ransu * 1000);

}

function dasu103() {

if (gameover == false) {

hachi3.style.visibility = “visible”;

}

let ransu = Math.random();

setTimeout(kesu3, ransu * 1000);

}

function modosu1() {

hachi1.src = “hachi.png”;

}

function modosu2() {

hachi2.src = “hachi.png”; 

}

function modosu3() {

hachi3.src = “hachi.png”; 

}

function stop() {

alert(“ゲームオーバー”);

gameover = true;

hachi1.style.visibility = “hidden”;

hachi2.style.visibility = “hidden”;

hachi3.style.visibility = “hidden”;

if (tensu > saiko) {

saiko = tensu;

kiroku = document.getElementById(“saiko”);

kiroku.innerHTML = saiko;

}

}

プログラムを簡単にする

プログラムが長くなって、複雑になりすぎました関数の引数をつかって、短くしてみます。

mogura.js

let hachi1;

let hachi2;

let hachi3;

let hyoji;

let botan;

let tensu = 0;

let saiko = 0;

let gameover = false;

let lastspurt = false;

window.onload = function() {

start();

}

function start() {

hachi1 =document.getElementById(“gazo1”);

hachi2 =document.getElementById(“gazo2”);

hachi3 =document.getElementById(“gazo3”);

hyoji = document.getElementById(“ten”);

botan = document.getElementById(“start”);

hachi1.onclick = function() {

click(hachi1); 

}

hachi2.onclick=function() {

click(hachi2);

};

hachi3.onclick=function() {

click(hachi3);

};

botan.onclick = function() {

gameover = false;

lastspurt = false;

tensu = 0;

hyoji.innerHTML=tensu;

start();

}

let ransu3 =Math.random() * 3;

setTimeout(kesui, ransu3 * 1000);

setTimeout(kesu2, ransu3 * 1000);

setTimeout(kesu3, ransu3 * 1000);

setTimeout(stop, 60000);

setTimeout(nokori10, 50000);

}

function click(gazou) { 

gazou.src =”naki.png”;

setTimeout(function() {

modosu(gazou);

}, 1000); 

tensu = tensu + 1;

hyoji.innerHTML=tensu;

}

function nokori10() {

alert(“もう、おこったぞ!”);

lastspurt = true;

}

function kesu(gazou) {

gazou.style.visibility = “hidden”;

let ransu3 = Math.random()* 3;

if (lastspurt==true) {

setTimeout(function() {

dasu(gazou, 1);

}, 

ransu3 * 1000);

} else {

setTimeout(function() {

dasu(gazou, 3);

}, ransu3 * 1000);

}

}

function kesu1() {

kesu(hachi1);

}

function kesu2() {

kesu(hachi2);

}

function kesu3() {

kesu(hachi3);

}

function dasu(gazou, timer) {

if (gameover == false) {

gazou.style.visibility=”visible”; 

}

let ransu =Math.random() * timer; 

setTimeout(function() {

kesu(gazou);

}, ransu * 1000);

}

function modosu(gazou) {

gazou.src= “hachi.png”;

}

function stop() {

alert(“ゲームオーバー! “);

gameover = true;

hachi1.style.visibility= “hidden”;

hachi2.style.visibility = “hidden”;

hachi3.style.visibility= “hidden”;

if (tensu > saiko) {

saiko=tensu;

kiroku =document.getElementById(“saiko”);

kiroku.innerHTML = saiko;

}

}

プログラムを短くすっきり書く方法はほかにもあります。考えてみてください。

配列などのテクニックを使えば最高得点を出したプレイヤーの名前を表示するなんてこともできるよ

このゲームにはもっといろいろつけられます!!