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 lang="ja">
<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 lang="ja">
<head>
    <meta charset="UTF-8">
    <title>おみくじゲーム</title>
</head>
<body>
    <script>
    </script>
</body>
</html>

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

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

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

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

index.html

<!DOCTYPE html>
<html lang="ja">
<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 lang="ja">
<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 lang="ja">
<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 lang="ja">
<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 lang="ja">
<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 lang="ja">
<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. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  15. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  17. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  18. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  19. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  21. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

GitHubのアカウントを作成する方法

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。まず今回はG

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

キー入力で文字を切り替えるべ

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。 今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう。

これまでのプログラム全体をクラスを使って作るべ!

【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかもしれません

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュータへ

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

リセットCSS は何を使う? おすすめ8選(コピペも可能!)

Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあります。 しかし、何を使っていいのかと感じている人もいると思います。 今回はこの リセットCSS につい

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

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