JavaScript入門講座|おみくじを作ってみよう

JavaScript
この記事で学べること
  • おみくじリストを作る
  • 乱数を作り、おみくじの目を出す結果を毎回変化させる
  • ボタンを設置する
  • 関数(プログラムのセット)を使って呼び出す

JavaScriptでおみくじを作ってみよう

うさタブ
うさタブ

今回は簡単な【おみくじ】を作ってみるッピよ~

ユウキ
ユウキ

おみくじ

うさタブ
うさタブ

神社で引く吉凶きっきょうをうらなうゲームッピ!

それをJavaScriptで作るッピ~

うさタブ
うさタブ

今回は、JavaScript乱数

関数ボタンの配置を学ぶッピよ!

楽しみにしているッピ!

おみくじのプログラムコードと解説

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>
<script>

function Omikuji() {

	let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
	let r = Math.floor( Math.random() * omikuji.length) ;//おみくじぶんの数字を作ります
	document.getElementById("kekka").innerHTML = omikuji[r];//結果をid="kekka"に表示します
}

</script>

<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>

</body>
</html>
うさタブ
うさタブ

今回はこのコードを解説していくッピよ~

サンプルコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>



</script>
<!-- ここまで! -->

</body>
</html>
うさタブ
うさタブ

今回はこのコードを元にプログラムをつくってみるッピ!

おみくじリストをつくる

うさタブ
うさタブ

まずはおみくじリストをつくってみるッピ!

うさタブ
うさタブ

リスト配列は

let リスト名 = [“なかみ1”,”なかみ2”,];

でつくることができるッピ!

うさタブ
うさタブ
let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];

今回はこんな風におみくじリストをつくってみるッピよ~

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>

let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];

</script>
<!-- ここまで! -->

</body>
</html>

乱数を作ってみよう

うさタブ
うさタブ

次はプログラムのための【乱数】を作ってみるッピ

サンプルコードを用意するから、それを元に作っていくッピよ~

ユウキ
ユウキ

乱数~? ってなんだっけ・・・

うさタブ
うさタブ

乱数ランダムというのは、行動を起こすごとに結果が変わることッピネ!

おみくじやサイコロ、いろいろなゲームに使われてるものッピ!

ユウキ
ユウキ

へ~面白そう! さっそくやってみようぜ

うさタブ
うさタブ

<sprict></script>の間に

	let r = Math.floor( Math.random() * omikuji.length) ;
	document.write(omikuji[r]);

と記述するッピネ!

できたらファイルをダブルクリックして、ブラウザで確認するッピよ~

うさタブ
うさタブ

ページを起動したら、赤枠の中にある更新ボタンをクリックしてみるッピ。

ユウキ
ユウキ

赤枠の

更新ボタン

かな?

うさタブ
うさタブ

そうっピ!
何回も更新してみるッピよ~!

ユウキ
ユウキ

スゲエエ 全部違う結果になった~!

確認コード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>
	let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
	let r = Math.floor( Math.random() * omikuji.length);
	document.write(omikuji[r]);
</script>
<!-- ここまで! -->

</body>
</html>
うさタブ
うさタブ

解説すると

let変数 omikuji omikujiを作ります= [ 中身は“大吉”,”吉”,”中吉”,”小吉”,”末吉”,”凶”,”大凶”];
です

let r変数rをつくって = Math.floor小数点を切り捨て整数へ ( Math.random()ランダムで数字をつくってください * omikuji.length);0からおみくじ分の数字を

document.write書き出してください(omikuji[r]おみくじをランダムで選んだものを);

という意味ッピ!

ユウキ
ユウキ

なんで Math.Floor小数点を切り捨てる 命令文をするんだよ?

うさタブ
うさタブ

それはッピネ~

この【Math.Floor小数点を切り捨てて】で小数点切り捨てないと、ランダムで作った数字に小数点が加わってしまうッピ。

例えば、3.14159265358979…..みたいな感じッピ!

ユウキ
ユウキ

じゃあこの

Math.random() 乱数で選んだ* omikuji.lengthおみくじ分の数字の中の1つ

は? なんで omikuji.おみくじの中の数字のlengthひとつ なの?

うさタブ
うさタブ

この .length は、

文字列だったら文字数を、

数字の場合はケタ数を、

リストだったらリストの中身の個数調べる命令文ってことッピ!

うさタブ
うさタブ

だから omikuji.length

おみくじの中の単語数・・・

let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];

つまりリストの中身の個数・・・7つの数分を表しているッピ!

omikuji.length = 7 という意味ッピよ~

うさタブ
うさタブ

だから

<script>
	let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
	let r = Math.floor( Math.random() * 7);
	document.write(omikuji[r]);
</script>

直接数字を入れることでもプログラムを動かすことができるッピ~!

ユウキ
ユウキ

なるほどなぁ~!

ボタンを設置してみよう

うさタブ
うさタブ

毎回更新ボタンを押すのは、分かりにくいし面倒ッピネ~

ここはボタンを設置するッピ!

ユウキ
ユウキ

ボタン?

うさタブ
うさタブ

WEBサイトで見かけるこういうモノッピよ~

↑ 押してみてね

ユウキ
ユウキ

あ~ これがボタンか~。よく見たことある!

うさタブ
うさタブ

ボタンを設置するのはHTMLタグッピネ!

まずは最初のサンプル文をコピーするッピヨ~!

サンプルコード
<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->




<!-- ここまで! -->
</body>
</html>
うさタブ
うさタブ

ボタンを設置するにはこのタグを使うッピよ~。

<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>

今回は<script></script>ではなく、その下・・・<body></body>の中にタグを書いていくッピネ!

うさタブ
うさタブ

これは

< button ボタンを設置してね  onclickクリックしたら=”Omikuji ();このプログラムを実行してね” />   おみくじを引く </button>ボタンを終了してください!

<p段落をつくってください id=”kekka” この段落のID は kekka です> </p段落を終了してください>

という意味ッピ! Saikoro(); の部分はまだ内緒ッピヨ~

ユウキ
ユウキ

この id = “kekka” って?

うさタブ
うさタブ

id 】・・・

これはHTMLタグにつける、住所のようなモノッピね~

詳しくは、HTMLCSSの解説ページで説明するッピ!

確認コード
<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->

<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>

<!-- ここまで! -->
</body>
</html>
ユウキ
ユウキ

なんか・・・押しても何も変わらないんだけど・・・??

うさタブ
うさタブ

ふふふふ! これからがプログラミングの真骨頂しんこっちょうッピ!

関数命令文のグループ)を使って、ボタンを押したあとプログラムを実行させることができるッピよ~!

今はまだ、ボタンを押したあとに呼び出すプログラムをセットしてないから動かないッピネ~

ユウキ
ユウキ

へ~! なんかすごそうじゃん!

やってみようぜ!

うさタブ
うさタブ

それではさっそく

【関数】を使って、プログラムのセットを作ってみるッピよ~

うさタブ
うさタブ

<head></head>の中に、ボタンを押したとき作動するプログラムを書いていくッピ!

<head>
<script>

function Omikuji() {

	let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
	let r = Math.floor( Math.random() * omikuji.length) ;
	document.getElementById("kekka").innerHTML = omikuji[r];//結果をid="kekka"に表示します
}

</script>
</head>

と記述していくッピ!

うさタブ
うさタブ

これは

functionプログラムセット  OmikujiOmikuji を作ります { 命令文をここに書く ;}

という意味で、これこそがズバリ【関数というッピネ!

うさタブ
うさタブ

次のコードはHTMLの書き換え…

document.書き出してください getElement指定する場所はById(“kekka”id=”kekka”です)

.innerHTML HTMLに書いてください = omikuji[r]omikuji を乱数で選んだ結果を;

という感じッピネ!

ユウキ
ユウキ

なるほどなー

ユウキ
ユウキ

スゲエエエ! できたああ!

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>
<script>

function Omikuji() {

	let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
	let r = Math.floor( Math.random() * omikuji.length) ;//おみくじぶんの数字を作ります
	document.getElementById("kekka").innerHTML = omikuji[r];//結果をid="kekka"に表示します
}

</script>

<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>

</body>
</html>

完成品のおみくじサンプル

うさタブ
うさタブ

完成品はこんな感じッピ! みんな上手くできたッピか?

全体のコードの確認

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>
<script>

function Omikuji() {

	let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
	let r = Math.floor( Math.random() * omikuji.length) ;//おみくじぶんの数字を作ります
	document.getElementById("kekka").innerHTML = omikuji[r];//結果をid="kekka"に表示します
}

</script>

<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>

</body>
</html>
学習のまとめ
  • Math.random( )乱数をつくり、Math.floor( )小数点を切り捨てる
  • <input type=”button”>タグでボタンを設置できる
  • 関数を作り、ボタンの onclick を使うことで、ボタンを押してJavaScriptプログラムを動作させることができる
  • document.getElementById( “id名” ).innerHTML =で、 id で指定した場所の、文字を書き換えたりタグを書き換えたりできる
  • document.getElementById( “id名” ).src =で、 id で指定した場所の、画像を差し替えることができる


スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

じっくりマンツーマンで勉強するならTech Teacherが良いッピ~!
とっても珍しいプログラミングの家庭教師サービスッピよ~

社会人の人でも使えるサービスッピ♪

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Tech Teacher

小学生~社会人
プログラミングの家庭教師が欲しい方
Python
Java
C言語
オンライン教室
生徒様のご自宅・カフェなど
1度のみ
無料体験◯
うさタブ
うさタブ

スクールだと、

自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

今ならお問い合わせでAmazonギフト券が当たる!プログラミング教室数2,500以上の「QUREOプログラミング教室」


スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

うさタブ
うさタブ

じっくりマンツーマンで勉強するならTech Teacherが良いッピ~!
とっても珍しいプログラミングの家庭教師サービスッピよ~

社会人の人でも使えるサービスッピ♪

教室名 対象 学習言語 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
 

Tech Teacher

小学生~社会人
プログラミングの家庭教師が欲しい方
Python
Java
C言語
1度のみ無料体験◯

うさタブ
うさタブ

スクールだと

自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

今ならお問い合わせでAmazonギフト券が当たる!プログラミング教室数2,500以上の「QUREOプログラミング教室」


JavaScriptJSゲームプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました