1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門

JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門

さて、今日も楽しく、プログラミングを学んでいきましょう!
今回はなんと、プログラミングでおみくじゲームを作ってみます。

そして今回から、Scratchスクラッチより、少しレベルアップして、JavaScriptジャバスクリプトを使ったプログラミングをしていきます。

Scratchはブロックを移動させることによって、分かりやすくプログラミングを学べるのですが、実際のプログラミングではブロックではなく、コマンドとよばれる、おねがいするための文字を使って作っていきます。

コマンドは一見いっけんむずかしそうに思えますが、基本きほんはScratchと同じです。

山田

今回はちょっと本格的ほんかくてきなプログラミングに挑戦ちょうせんしてみようだべ。おみくじゲームを作ってみるべよ

りこ

わーい!

アル

本格的なプログラムって、どんなんだろう?

目次
  1. 登場人物
  2. どんなおみくじゲームを作るの?
  3. index.htmlファイルを作ろう
  4. HTMLでボタンを作ってみよう
  5. JavaScriptで、ボタンが押された時にアラートが表示されるようにしてみよう
  6. ランダムの値を表示してみよう!
  7. おみくじゲームを完成させよう
  8. まとめ

登場人物

山田先生

ねこの先生。
プログラミングが大得意で、JavaScriptジャバスクリプトJavaジャバC言語シーげんごPythonパイソンいたるまで様々なプログラミングの知識があり、ねこパンチのごとく1秒で10文字のキー入力が可能。
「てやんでぇ、べらぼうめ!」が口癖くちぐせ。しかし実は江戸っ子ではない。
ディズニーランドに行くことを夢見ている。

りこちゃん

りこ

プログラミングが大好きで、少しだけプログラムを書くことができる。得意な言語はJavaScript
ジャバスクリプト

錦戸にしきど君が好きで好きでたまらない。関ジャニを抜けても、いまも好き。はやく大人になって錦戸君のおよめさんになることを夢見ている。
元気が良く、活発な女の子。ちょっとお節介せっかい

アル君

アル

ゲームが好きで、特にポケモンが大好き。
プログラミングははじめてで、まだよく分からない。それでも、ゲームを一度は作ってみたい。
授業中はいつも、居眠りか、ポケモンのことを考えている。よくりこちゃんに注意される。
プログラミングに興味きょうみはあるのだが、全く分からないので集中できず、ついポケモンのことを考え始めてしまう。
山田先生という名前は聞いたことがあったが、ねこだということをつい先日まで知らなかった。

どんなおみくじゲームを作るの?

山田

さて、今回作りたいおみくじゲームは、こういうものだべ

下のボタンを大吉がでるまで、クリックしてみてね!

アル

わぁ、おみくじだぁ!

りこ

大吉、でますように……

index.htmlファイルを作ろう

山田

さて、JavaScriptジャバスクリプトでプログラミングを始めたいんだべけど、実はこのJavaScriptはホームページ上で動くものなんだべ

りこ

そう! まずホームページを作る必要ひつようがあるのよ

山田

りこちゃんはよく知ってるべな……

アル

ホームページって……そんなのぼく、作れないよ

山田

ホームページのベースを作るだけで、とても簡単かんたんだから安心していいだべよ

JavaScriptジャバスクリプトはホームページで使われる言語げんごです。
つまり、JavaScriptを動かすには、ホームページをつくる必要ひつようがあります。(例外もあります)

ホームページと言っても、みなさんが普段ふだん見ているような立派りっぱなものじゃなくて、真っ白に近いものを作ります。
つまり、ホームページのベースを作るということです。

ホームページを作るには、「HTMLエイチティーエムエル」というものを使います。
では、HTMLを使ってホームページを作ってみましょう。

まずはテキストエディタを開き、以下を入力してみてください。
コピペでも大丈夫です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>おみくじゲーム</title>
</head>
<body>
    これがホームページだよ!
</body>
</html>

テキストエディタに入力し、「index.html」というファイル名で保存ほぞんします。保存の方法はテキストエディタによっても違いますが、ほとんどの場合、WindowsウィンドウズではCtrl + sMacマックでは⌘command + s、で保存ができます。

すると入力したタグに色がつきます。

このindex.htmlファイルをブラウザで開くと、こんなふうになります。

山田

ホームページは基本的にこのような形で作られているんだべ。<title></title>で挟はさまれた部分はホームページのタイトルとして、<body></body>に挟まれた部分はホームページの内容として表示されるんだべ

アル

こうやってホームページって作られてたんだね

山田

HTMLで使われている<>で挟まれた一つ一つをタグというから、それも合わせて覚えておくといいだべさよ

りこ

いろんなタグがあって、このタグを組み合わせてホームページが作られてるんだよね!

山田

そうだべ、本当によく知ってるべな。ちなみに、ホームページといっても、インターネット上にアップロードしないかぎ公開こうかいはされないべ。逆にアップロードすれば、だれでも遊べるようになるべよ

アル

そうなの! すごい

りこ

ねぇ、これ、まだJavaScriptが使われてないよ

山田

実はそうなんだべよ。じゃあ今から使っていくべよ

ここまでではまだ、JavaScriptジャバスクリプトは使われていません。
JavaScriptを使う一番簡単な方法は、index.htmlファイル内にJavaScriptを書いてしまうものです。

では、bodyタグのなかの「これがホームページだよ!」を消して、下のようにscriptタグを書いてみましょう。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>おみくじゲーム</title>
</head>
<body>
    <script>
    </script>
</body>
</html>

このscriptタグの中に、JavaScriptを書いていきます。
では、scriptタグの中に、こんなふうに入力してみてください。

alert("JavaScriptでプログラミングするよ!");

このコマンドは、ブラウザ上にアラートを表示するものです。

全体ではこんな感じになります。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>おみくじゲーム</title>
</head>
<body>
    <script>
        alert("JavaScriptでプログラミングするよ!");
    </script>
</body>
</html>

ブラウザで開いて確認かくにんしてみると、こんなふうに表示されます。

アル

わぁ、なんか表示されてる!

りこ

これがアラートっていうのよ

山田

そうだべ。アラート、つまりホームページでの警告けいこくを表示したいときなどにつかわれるんだべさ

HTMLでボタンを作ってみよう

山田

アラートが表示されるようになった訳だべが、ページを読み込んだだけでいきなり表示されてしまっては、おみくじのドキドキ感がないだべよ

りこ

確かにね。やっぱりねがいをこめて、ボタンを押したいよね

上の方法ではブラウザを読み込んだときにアラートが表示されますが、今度はボタンを押したときにアラートが表示されようにしてみましょう。

山田

ボタンはHTMLエイチティーエムエルで表示してしまった方が簡単だべ。そしてボタンを押した時にどうしたいのかをJavaScriptジャバスクリプトで作っていくべ

アル

HTMLと合わせて作っていくんだね

まず、HTMLでボタンを作ります。
今回はinputタグを使ったボタン作成の方法を紹介します。

こんなふうに入力すると、ボタンを作ることができます。

<input id="omikuji_btn" type="button" value="おみくじを引く">

idに「omikuji_btn」というIDを指定しています。
IDというのは、そのタグに与えられた名前です。
同じページの中で、inputタグをいくつも使う場合もあり、そんな時にIDを指定しておくと、どのinputタグだったのかを区別くべつすることができます。

typeには「button」を指定しています。buttonは「ボタン」と読みます。
これはどのようなタイプのものを使うかというもので、今回はボタンを作りたかったので、「button」にしています。

valueにはボタンに表示させる文字を指定します。
今回はおみくじを引くと表示させたかったので、「おみくじを引く」と入力しています。

では、index.htmlファイルに、入力してみましょう。
8行目に、こんなふうに入力します。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>おみくじゲーム</title>
</head>
<body>
    <input id="omikuji_btn" type="button" value="おみくじを引く">
    <script>
        alert("JavaScriptでプログラミングするよ!");
    </script>
</body>
</html>

アラートの「OK」をクリックすると、このように、ブラウザ上にボタンが表示されます。

りこ

このボタンが押された時にどうしたいかをJavaScriptで作っていくんだよね

JavaScriptで、ボタンが押された時にアラートが表示されるようにしてみよう

山田

いまはページを読み込むとアラートが表示されるべけど、これをボタンが押されたときに表示するようにしてみるべよ

では、JavaScriptジャバスクリプトを使って、上で作ったボタンが押された時にアラートを表示するようしてみましょう。
まずはそのプログラムを見てください。

document.getElementById("omikuji_btn").onclick = function() {
}

投げ出さないでください! むずかしいけど、大丈夫です。すぐに分かります。

これらのコマンドを3つに分けて考えてみましょう。
まず、document.getElementById("omikuji_btn")は、omikuji_btnというIDを持ったタグを表しています。
そうです。先ほど作ったinputタグですね。

さらにonclickは、そのinputタグがクリックされたとき、という意味です。

最後に残ったfunction() {}ですが、この{}の中に、クリックされた時にどのようにしたいかを入力していきます。

なので、アラートを表示したい場合はこの{}の中にアラートを表示させるコマンドを書いていけばいいんですね。
こんなふうになります。

document.getElementById("omikuji_btn").onclick = function() {
    alert("JavaScriptでプログラミングするよ!");
}

ですので、これの意味は、「omikuji_btnというIDを持ったHTMLタグをクリックしたとき、アラートを表示する」となります。
そしてこれを、scriptタグのなかに入力してあげればいいんです。

全体ではこのようになります。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>おみくじゲーム</title>
</head>
<body>
    <input id="omikuji_btn" type="button" value="おみくじを引く">
    <script>
        document.getElementById("omikuji_btn").onclick = function() {
            alert("JavaScriptでプログラミングするよ!");
        }
    </script>
</body>
</html>

ブラウザで見てみると、こんなふうになります。

アル

わぁ、ボタンに反応して表示されたよ! でもまだまだおみくじになってないよね

山田

ふっふっふ。ここからがJavaScriptの本当の実力の見せどころだべ

ランダムの値を表示してみよう!

続いて、ランダムな値を作ってみましょう。

山田

まず、おみくじを作るには、ランダムな数字を作る必要があるべ

アル

ランダムって?

山田

なにが出るか分からない、ということだべ

アル

へぇ、これができればおみくじゲームに役立ちそうだ

では、JavaScriptジャバスクリプトを使って、ランダムの値を表示してみましょう。
Scratchスクラッチの時に、「変数へんすう」を使ったのを覚えていますか?
そうです。値を覚えさせておくことができるものです。得点の表示の時に使いましたね。

ランダムな数を表示したい時、この変数が役に立ちます。

JavaScriptでの変数の使い方

山田

まずはJavaScriptでの変数の使い方を紹介しておくべよ

りこ

ランダムな値を変数に覚えさせておくために必要なのね

Scatchでの学習のとき、得点という変数を作り、ゲームの得点を覚えさせておきました。
JavaScriptでも同じように変数が使えます。

変数を使いたい時、「こういう変数を使います」というふうに宣言せんげんすることができます。

変数の宣言にはvarというコマンドを使います。
例えば、tokutenという変数を使いたい時は、こんなふうにします。

var tokuten;

こうすることで、「tokutenという変数を使いますよ」と宣言することができるのです。

変数は数や文字を覚えさせておくものですが、JavaScriptではどのようにすればいいのでしょうか。
JavaScriptで変数に数や言葉を覚えさせるには、「=」を使います。
以下の例はtokutenという変数を宣言し、100と覚えさせておくものです。

var tokuten;
tokuten = 100;

このように覚えさせることを代入だいにゅうといいます。
宣言と代入を同時に行うこともできます。こっちの方が、短くてかっこいいです。

var tokuten = 100;

今回は得点ではなく、ランダムな数字を入力しておく変数を作りますので、ランダムを英語で「random」。短くして「rnd」という変数を使うことにします。
変数名はなんでもいいのですが、ローマ字よりも英語を使った方がかっこよく見えます。
英語の変数名の省略しょうりゃく形は決まっているものも多いので、くわしく知りたい人は調べてみるのもいいかもしれません。

ランダムな数を作る

山田

ランダムに数字を表示する方法を教えるべよ!

アル

数字かぁ、でもおみくじを作るのになんで数字が役立つんだろう

JavaScriptでランダムな数を作る時、Math.random()を使います。
これは「ランダムな数を作って」とおねがいするものになります。

すると0以上1未満のランダムな小数点の値を作ってくれます。
例えばこんなふうにすると、ボタンをクリックしたときに、0以上で1よりも小さい、ランダムな小数が表示されます。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>おみくじゲーム</title>
</head>
<body>
    <input id="omikuji_btn" type="button" value="おみくじを引く">
    <script>
        document.getElementById( "omikuji_btn" ).onclick = function() {
            var rnd = Math.random();
            alert(rnd);
        }
    </script>
</body>
</html>

このプログラムは、11行目で、Math.random()を使い、ランダムな数字を作っています。さらにその数字を「rnd」という変数に代入しています。
このrndというのは、「randomランダム」を短くしたものです。

小数はなく、整数が欲しい場合はもう一手間ひとてま加える必要があります。
小数点を整数に変換へんかんするのです。それにはMath.floor()を使います。

これは小数点以下を切り捨ててくれるものです。
しかし、Math.random()で作られた数は1よりも小さいので、小数点を切り捨てるとすべて0になってしまいます。
どうすればいいのでしょうか。

答えは、作りたい一番大きな数を、Math.random()で作った値に、掛け算すればいいんです。
掛け算には「*」を使います。

例えば、0〜9までのランダムな数を作りたいならば、10を掛け算します。

var rnd = Math.floor( Math.random() * 10 );
alert(rnd);

ここで注意したいのは、1〜10までではないということです。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>おみくじゲーム</title>
</head>
<body>
    <input id="omikuji_btn" type="button" value="おみくじを引く">
    <script>
        document.getElementById( "omikuji_btn" ).onclick = function() {
            var rnd = Math.floor( Math.random() * 10 );
            alert(rnd);
        }
    </script>
</body>
</html>

おみくじゲームを完成させよう

山田

お待ちかね、もうすぐおみくじゲームになるべよ

アル

わーい。ついにできるんだね!

では、おみくじゲームを完成させていきましょう。

今回作りたいおみくじゲームは、ボタンが押されたとき、「大吉」「吉」「中吉」「小吉」「末吉」「凶」のどれかをアラートに表示するというものです。

まず、おみくじゲームで表示したものは、「大吉」「吉」「中吉」「小吉」「末吉」「凶」の6つなので、0〜5までのランダムな数字を作るプログラムにします。

山田

さっき、0〜9までのランダムの数字を表示するプログラムを作ったべな。それを0〜5までにすればいいべ

りこ

「大吉」〜「凶」まで、全部で6つあるからね

さきほど作った、ランダムな数字を作る部分を、このように変更します。

var rnd = Math.floor( Math.random() * 6 );

これで、rnd変数に0〜5までの数字のうちのどれかが代入される、ということになります。

条件分岐を使ってみよう!

Scratchの時に、条件分岐じょうけんぶんきがどのようなものなのか紹介しましたが、おぼえていますか?
そうです。「もし〜ならば〜」ってやつです。

JavaScriptではif()というものを使います。
これは、分かりやすくいうと、「こんなときに、こうして欲しい!」という意味です。
この()の中に、「こんなとき」という条件じょうけんを書きます。

例えば、xに入っている数字が3だったときに、xに4を代入したい場合は以下のようにします。

if(x === 3) x = 4;

このif(x === 3)というのが「xが3ならば」 という意味になります。

山田

===で、左右が「同じ」という意味になるんだべ

りこ

つまり、xには3が代入されているから「同じ」なのね

ではこれをおみくじゲームに当てはめてみましょう。
rndに覚えさせている数が、0の時は大吉、1の時は吉、というふうに作ってみます。

すると、こんなふうになります。

var rnd = Math.floor( Math.random() * 6 );
var omikuji;
if (rnd === 0) omikuji = "大吉";
if (rnd === 1) omikuji = "吉";
if (rnd === 2) omikuji = "中吉";
if (rnd === 3) omikuji = "小吉";
if (rnd === 4) omikuji = "末吉";
if (rnd === 5) omikuji = "凶";

あとはアラートにomikuji変数に覚えさせている文字を表示すれば、おみくじゲームの完成です。
では、後ろに alert(omikuji);を付け足して、文字を表示してみましょう。

var rnd = Math.floor( Math.random()*6 );
var omikuji;
if (rnd === 0) omikuji = "大吉";
if (rnd === 1) omikuji = "吉";
if (rnd === 2) omikuji = "中吉";
if (rnd === 3) omikuji = "小吉";
if (rnd === 4) omikuji = "末吉";
if (rnd === 5) omikuji = "凶";
alert(omikuji);

index.html全体は、このようになります。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>おみくじゲーム</title>
</head>
<body>
    <input id="omikuji_btn" type="button" value="おみくじを引く">
    <script>
        document.getElementById( "omikuji_btn" ).onclick = function() {
            var rnd = Math.floor( Math.random() * 6 );
            var omikuji;
            if (rnd === 0) omikuji = "大吉";
            if (rnd === 1) omikuji = "吉";
            if (rnd === 2) omikuji = "中吉";
            if (rnd === 3) omikuji = "小吉";
            if (rnd === 4) omikuji = "末吉";
            if (rnd === 5) omikuji = "凶";
            alert(omikuji);
        }
    </script>
</body>
</html>

これをブラウザで開くと、下のようなボタンが表示され、押すとおみくじが引けるというふうになります。
下のボタンを大吉がでるまで、クリックしてみてね!

アル

わーい、完成だ。そうか、こうやって数字にくじの結果を条件分岐で割り当てて作るんだね

山田

そうだべ。基本的な考え方はScratchと同じだべ。それを文字で書いていくだけなんだべよ

まとめ

今回はJavaScriptでのおみくじゲームの作り方を紹介しました。

アル

中吉かぁ。うーん

りこ

きゃー、大吉! いいことあるかも。錦戸くんと……

アル

ちぇっ、またそれかよ

山田

よっぽど好きなんだべな
……でも、なにがあろうと一途いちずに想い続ける気持ちは大切だべ。プログラミングでも同じことがいえるべよ

りこ

私、プログラミングも錦戸くんもずっと好きでいる!

山田

その心がけだべ。もっともっとプログラミングを覚えて、本格的ほんかくてきなゲームを作れるように頑張るべよ!

りこ

うん!

アル

うん!

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  8. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  9. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  10. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  11. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  14. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  15. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  18. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  19. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  21. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  22. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

JavaScriptを使ってゲームを作成するのが好きです。@It_is_Rです。 JavaScriptはWebページに動きを出すのによく使われ、ブラウザゲームなども作ることができます。今回は

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です