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

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


※2021/12/7 もっと分かりやすくなるように、内容を追加ついか修正しゅうせいしました。


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

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

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

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

山田

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

りこ

わーい!

アル

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

この記事では、「ホームページ」という言葉を、「Webページ」の意味で使っています。

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

登場人物

山田先生

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

りこちゃん

りこ

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

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

アル君

アル

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

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

山田

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

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

アル

わぁ、おみくじだぁ!

りこ

大吉、でますように……

おみくじゲームのフォルダを作ろう!

山田

まずはおみくじゲーム用のフォルダを作るべよ!

アル

フォルダって?

山田

つくったものを入れておくためのものだべよ

アル

なるほどー

山田

フォルダの作り方なんだべけど、WindowsウィンドウズMacマックでやり方がちがうんだべ

りこ

そうなんだー

山田

今回はフォルダをデスクトップに作るべ

Windowsの場合は、デスクトップを右クリックして、「新規作成」を選択、「フォルダー」をクリックするべ

Macの場合は、デスクトップを右クリックして、「新規フォルダ」をクリックするべ

山田

フォルダの名前は、「omikuji」としておくべよ

山田

これでomikujiフォルダを作ることができたべ!

index.htmlファイルを作ろう

山田

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

りこ

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

山田

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

アル

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

山田

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

JavaScriptジャバスクリプトホームページで使われる、コンピュータに対しての言葉です。
つまり、JavaScriptを動かすには、ホームページをつくる必要ひつようがあります。(例外もあります)

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

ホームページを作るには、「HTMLエイチティーエムエル」というものを使います。
HTMLは、ホームページを作るときに使う、コンピュータに対しての言葉です。
では、HTMLを使ってホームページを作ってみましょう。

まずは、「Visual Studio Codeビジュアルスタジオコード」というテキストエディタを開くのですが、もしVisual Studio Codeのインストールがまだの人は、こちらを見て、インストールしてみてください。

ただ、Visual Studio Codeをインストールしたばかりのときは、設定せってい英語えいごになっていますので、こちらをみて、日本語に設定してあげてください。

Visual Studio Codeを開いたら、「ファイル」→「新規ファイル」の順番でクリックします。

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

りこ

なんか注意書ちゅういがきみたいなのが表示されてるよ

アル

ほんとだ。「言語の選択を選択します……」ってなんだろう

山田

これはそんなに気にしなくても大丈夫だべよ
そのまま文字を入力すれば、この注意書きも消えてしまうべ

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

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

テキストエディタに入力すると、このようになります。

つづいて、これを「index.html」というファイル名で保存ほぞんします。
まず、「ファイル」→「名前を付けて保存」の順にクリックしましょう。

するとつぎのようなウィンドウが開きます。
さきほど作った「PC」→「デスクトップ」のなかの、omikujiフォルダ選択せんたくします。

ファイル名はindex.htmlにしましょう。
最後さいごに「保存」をクリックします。

山田

ファイル名の最後の.htmlの部分を、拡張子かくちょうしというから、覚えておいてほしいんだべ

りこ

かくちょうし!

山田

これは、このファイルがHTMLファイルだべ、ということを表しているんだべ!

りこ

HTMLは、ホームページを作るときに使う言葉、なんだよね!

山田

そうだべ! このHTMLファイルに、HTMLという言葉で、コンピュータにお願いをするんだべ!

また、Visual Studio Codeでは、保存ほぞんのとき、WindowsウィンドウズならばCtrl + sMacマックならば⌘command + sで、かんたんに保存することもできます。これをショートカットキーといいます。

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

上の画像はWindowsウィンドウズのものですが、Macマックでも同じように色がつきます。

すると、omikujiフォルダには、index.htmlというファイルが作られます。
WindowsMacの設定によっては、拡張子かくちょうし(.htmlの部分)が表示されないことがありますが、ちゃんと保存されていれば気にすることはありません。

山田

これでindex.htmlファイルを作ることができたべ!

index.htmlファイルをブラウザで開く

このindex.htmlファイルをブラウザで開きます。

山田

つぎは、このindex.htmlファイルを、ブラウザで開くべよ

アル

ブラウザって?

山田

Edgeエッジとか、Chromeクロームとか、Firefoxファイヤーフォックスとか、ホームページを見るときに使うソフトのことだべよ

アル

あぁ、いつも使ってるやつだ!

index.htmlファイルをダブルクリックすることで、設定されているブラウザが開きます。(パソコンの設定によっては、クリックで開くかもしれません)

もしかすると、次のような画面が開くかもしれません。
そのときは、「OK」をクリックします。

ただ、パソコンの設定によっては、ブラウザではなくべつアプリが開いたり、なにも開かなかったりするかもしれません。

そんなときは、index.htmlファイルを右クリックして、「プログラムから開く」を選択せんたく、さらに使つかいたいブラウザ(ここではGoogle Chromeグーグルクローム)をクリックします。

Macの場合は、index.htmlファイルを右クリックして、「このアプリケーションで開く」を選択して、さらに使いたいブラウザ(ここではGoogle Chrome)をクリックします。

ブラウザが開かれると、Windowsの場合はこんなふうに表示されます。

Macの場合もほとんど同じです。

山田

ホームページは基本的にこのような形で作られているんだべ。<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

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

保存したあと、ブラウザで開いて確認かくにんしてみます。
ブラウザ再読さいよみボタンをクリックしましょう。

こんなふうに表示されます。(ここから先の画像は、Macの画面になっていますが、Windowsでも同じです)

アル

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

りこ

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

山田

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

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>

変更したindex.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>

変更したindex.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);

ですので、このようになります。

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>

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

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

山田

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

アル

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

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

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

まず、おみくじゲームで表示したものは、「大吉」「吉」「中吉」「小吉」「末吉」「凶」の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プログラミングでゲームが作れた!

まとめ

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

アル

中吉かぁ。うーん

りこ

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

アル

ちぇっ、またそれかよ

山田

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

りこ

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

山田

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

りこ

うん!

アル

うん!

このシリーズの一覧はこちら

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

スポンサードリンク

関連コンテンツ

オススメ記事

PythonでUSBメモリのパスワードを解析。総当たりでロック解除してみよう!

みなさんこんにちは。@It_is_Rです。今回はPythonを使って、総当たりでUSBメモリのパスワードを解析する方法を紹介します。(※このストーリーはフィクションです) Rりこ師匠、

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を読み込む

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

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

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

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。 前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrew

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい Gr

キャラを決まった間隔ずつ動かすよ!

【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門

小学生からのプログラミング入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、キャラクターの画像《がぞう》をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔

java

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

Javaを使っていると継承という言葉をよく耳にしますが、どういうものなのか、いまいちピンとこない人も多いと思います。 今回はJavaの、スーパークラス、サブクラス、そして継承について、詳しく解

webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

みなさんこんにちは。今回もたのしくプログラミングを学んでいきましょう! 前回の「JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方」では、JavaScriptでゲームエンジ

【初心者向け】cdコマンドの使い方を分かりやすく解説!(Windows)

「cd」は、いま作業《さぎょう》しているディレクトリを移動《いどう》するためのコマンドです。 Windows《ウィンドウズ》でも、Mac《マック》(Unix)でも、使うことができますが、その使

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

  1. 息子がゲームを作りたいと長い間うるさく、おもーい腰をあげて、やっと私でもわかるかも?と思うサイトに巡り合えました。ありがとうございます。息子はJava scriptの本を読んだのですが、そもそも何ができるのか、どこに書くのかがわからなかったようです。ここでも突然テキストエディタがでてきて、Windowsのメモ帳に書くのだろうかとやってみましたが、htmlで保存ができませんでした。検索しても、もうわかっているものという前提のものが多く、なんのことかさっぱりわからず、こちらのフリーテキストエディタ徹底比較でこういうものがあるのかとわかった次第です。あまりの初心者に驚かれてしまうかもと思いますが、そのへんの説明があれば嬉しいです。

    1. >Keikoさん
      はじめまして。貴重なご意見ありがとうございます。

      テキストエディタは、Windowsのメモ帳でも、一応JavaScriptのプログラミングはできます。
      ただ、文字がすべて同じ色(白背景に黒い文字)で表示されてしまうので、プログラミングには向いていません。
      プログラミング用のテキストエディタを使うと、コマンド(パソコンに対してのお願いごと)に色がつくので、入力ミスなどを発見しやすくなります。
      テキストエディタについては、ご覧いただいた「フリーテキストエディタ徹底比較。一番自分に合ったものを探そう!」を参考にしていただき、Windowsに対応したものをご使用ください。
      よく分からなければ「Visual Studio Code」がおすすめです。

      htmlでの保存についてですが、これは保存するときにファイルの拡張子(ファイル名の最後の部分。メモ帳だとデフォルトで.txtとなっています)を.htmlに書き換えてあげればhtmlの形式、.jsにすればJavaScriptの形式になります。
      もし拡張子が表示されていない場合は、もしかするとWindowsの設定で拡張子が非表示になっている可能性もあります。そのときはエクスプローラーを開き、「表示」の「ファイル名拡張子」にチェックを入れてあげれば、拡張子を表示することができます。(画像はWindows10のものです)

      記事についてですが、少々お時間をいただくことになってしまいますが、少しずつ分かりやすく改善していければと思っております。
      もし他に分かりにくいと感じる部分があれば、ご指摘いただけると幸いです。

      1. ありがとうございます! 感謝感激です! 超初心者のなにもわからないものでもわかるように、こんなにきちんと解説してくださって、本当にありがたいです。まだやっていませんが、少しずつ息子とやっていきます。取り急ぎお礼まで。ありがとうございます!

        1. > Keikoさん
          返信ありがとうございます。
          初心者の方にも分かりやすい記事を書きたいという思いはあるのですが、プログラミングは専門用語や専門知識を使う部分が多く、初心者の方に伝わっていないことに気がつかないまま、執筆してしまっていることがあるかもしれません。
          もし、分からない部分があれば、またお気軽にご質問ください。

コメントを残す(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。




オリジナルゲーム.com