JavaScript入門講座｜星座占いプログラムの作り方 | 学んで遊んでジャンケンポン！

うさタブ

今回は星座占いをつくるッピよ～

ユウキ

星座占い？？

うさタブ

今日の星座ランキング～

というアレっぴ！

うさタブ

何気に毎日の占いは楽しみだったりするッピよ～

ユウキ

機械なのにヘンなの

うさタブ

信じる信じないも確率論ッピ！

占いは科学ッピ！

今日の星座ランキング・サンプル

全体のコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
//事前の設定プログラム
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];//４グループに分けて、ちょっと悪いとちょっと良いの間にふつうを作る
let un1 = [
"今日のアナタは絶好調！何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも！",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも！",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも？",
"今日はなんだか気分が良くない日。忘れ物には気をつけて！",
"今日は何もせずゆっくりしているのが良いかも・・・",
]

let i = 0;//繰り返し用プログラム
let n = 0;//繰り返し用プログラム

let rank= [];//ランキングのための変数
let un = 0;//運勢を判別するための変数
let color_r = Math.floor( Math.random() * color.length);//ラッキーカラー
let un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングづけ

document.write("<p>今日の星座ランキング</p>");

 for (i=0 ;i < seiza.length;){

	n = 0;//変数をリセットします
	un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングづけ
	color_r = Math.floor( Math.random() * color.length);//ラッキーカラー

	while(n < seiza.length){
	  if (seiza[un_r] != rank[n]){n++;}
	  else {break;}
	}



	if (n >= seiza.length){

	  i++;//iにプラス１を追加する

		if (i >= 0 && i <= 2) {un = 0;}
		else if (i >= 3 && i <= 5) {un = 1;}
		else if (i >= 6 && i <= 8) {un = 2;}
		else if (i >= 9 && i <= 10) {un = 3;}
		else if (i >= 11 && i <= 12) {un = 4;} 

	//書き出しのプログラム
		document.write("<ul>");
		document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
		document.write("<li>今日のアナタの運勢は"+ un0[un] + "です</li>");
		document.write("<li>"+ un1[un] +"</li>");
		document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
		document.write("</ul>");

	  rank.push(seiza[un_r]);//リストに記憶

	 }
	}

</script>
</body>
</html>

うさタブ

今回はこのコードを１からじっくり解説するッピよ～！

全体のコード

１２星座占いの作り方

１２星座占いの作り方

必要なもの

うさタブ

メモ帳
ブラウザ

が必要ッピ！

元になるコード

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

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






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

</body>
</html>

うさタブ

このコードをもとに作って行くッピ！

リストで１２星座とラッキーカラーをつくる

うさタブ

まずはリストで星座と色を登録するッピ！

let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];

と入力するッピ！

うさタブ

リストは

let リスト名 = [“中身１”,”中身２”];

で作ることができるッピ！

JavaScript入門講座｜リストを作ろう　～変数の配列を使ってみよう～

JavaScript入門｜リストを作ってみよう｜会話形式で楽しく学べる｜リスト・配列の作り方｜リスト・配列からの内容の取り出し（引数）

うさタブ

確認として

document.write( seiza );
document.write("<br/>"); 
document.write( color );

と入力し、ブラウザで見てみるッピ！

document.書き出してくださいwrite　HTMLに( seiza星座リストを );
document.write(“<br/>改行してください“);
document.write書き出して( colorカラーリストを );

という意味ッピ！

ユウキ

お、星座と色が出てきた！

うさタブ

さらに運勢リストを追加するッピ！

let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];

let un1 = [
"今日のアナタは絶好調！何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも！",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも！",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも？",
"今日はなんだか気分が良くない日。忘れ物には気をつけて！",
"今日は何もせずゆっくりしているのが良いかも・・・",
];

と入力して見るッピ～！

うさタブ

確認として、

document.write("<br/>"); 
document.write( un0 );
document.write("<br/>"); 
document.write( un1[2] );

と入力して見るッピよ～

ユウキ

できた～！

ここまでのコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
//事前の設定プログラム
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];

let un1 = [
"今日のアナタは絶好調！何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも！",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも！",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも？",
"今日はなんだか気分が良くない日。忘れ物には気をつけて！",
"今日は何もせずゆっくりしているのが良いかも・・・",
];

document.write( seiza );
document.write("<br/>"); 
document.write( color );
document.write("<br/>"); 
document.write( un0 );
document.write("<br/>"); 
document.write( un1[2] );  

</script>
</body>
</html>

 for (i=0 ;i < seiza.length;){
      //ランキング付けのための変数

	un_r = Math.floor( Math.random() * seiza.length);
	color_r = Math.floor( Math.random() * color.length);

	//書き出しのプログラム
		document.write("<ul>");
		document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
		document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
		document.write("</ul>");
		i++;
	 }

うさタブ

これは、

for繰り返します (i=0繰り返し初期値; i現在の繰り返し数 < seiza.length星座の数;)
{ 繰り返したいプログラムとi++;現在の書き出し数に１を追加 }

という意味で、１２回分書き出すことができているッピ！

ユウキ

おおお！　なんかたくさん出た！

これまでのコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
//事前の設定プログラム
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];//４グループに分けて、ちょっと悪いとちょっと良いの間にふつうを作る
let un1 = [
"今日のアナタは絶好調！何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも！",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも！",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも？",
"今日はなんだか気分が良くない日。忘れ物には気をつけて！",
"今日は何もせずゆっくりしているのが良いかも・・・",
]
;

let un = 0;//運勢を判別するための変数
let color_r = Math.floor( Math.random() * color.length);//ラッキーカラー
let un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングを選ぶ

document.write("<p>今日の星座ランキング</p>");

for (i=0 ;i < seiza.length;){
      //ランキング付けのための変数

	un_r = Math.floor( Math.random() * seiza.length);
	color_r = Math.floor( Math.random() * color.length);

	//書き出しのプログラム
		document.write("<ul>");
		document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
		document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
		document.write("</ul>");
		i++;
	 }

</script>
</body>
</html>

JavaScript入門講座｜プログラムを繰り返してみよう　～while文・for文を勉強しよう～

JavaScript入門｜プログラムを繰り返してみよう　～while文・for文を勉強しよう～｜会話形式で楽しく学べる｜for文を学ぼう｜while文を学ぼう

すでにランキング入りした星座をはじく

ユウキ

だけどさ、うさタブ。

これランキングの中に同じ星座が２～３回入ってない？

ユウキ

ラッキーカラーはともかく、同じ星座が２回も３回もあるのはダメじゃないか？

うさタブ

任せるッピ！

すでに登録した星座をはじくプログラムをつくるッピよ～

if分岐.pushで判定ポイントをつくり、while文で１２回ぶんの判定を繰り返す

うさタブ

登録した星座をはじくには、

新しくリストをつくって、登録したものを記録しないプログラムが必要になるッピ！

うさタブ

一気にコードを公開するッピよ～！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
//事前の設定プログラム
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];//４グループに分けて、ちょっと悪いとちょっと良いの間にふつうを作る
let un1 = [
"今日のアナタは絶好調！何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも！",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも！",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも？",
"今日はなんだか気分が良くない日。忘れ物には気をつけて！",
"今日は何もせずゆっくりしているのが良いかも・・・",
];

let i = 0;//繰り返し用プログラム
let n = 0;//繰り返し用プログラム

let rank= [];//ランキングのための変数
let un = 0;//運勢を判別するための変数
let color_r = Math.floor( Math.random() * color.length);//ラッキーカラー
let un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングづけ

document.write("<p>今日の星座ランキング</p>");

 for (i=0 ;i < seiza.length;){

	n = 0;//変数をリセットします
	un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングづけ
	color_r = Math.floor( Math.random() * color.length);//ラッキーカラー

	while(n < seiza.length){
	  if (seiza[un_r] != rank[n]){n++;}
	  else {break;}
	}

	if (n >= seiza.length){

	  i++;//iにプラス１を追加する

	//書き出しのプログラム
		document.write("<ul>");
		document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
		document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
		document.write("</ul>");

	  rank.push(seiza[un_r]);//リストに記憶

	 }
	}

</script>
</body>
</html>

ユウキ

おお！　ぜんぜんかぶらない！
どうやったんだよ！　うさタブ！？

うさタブ

ふふふ、どうやったかこれから説明するッピ！

新しくリストをつくり .push で追加する

うさタブ

まずは新しいリストと変数づくりッピ！

let rank= [];//ランキングのためのリスト変数
rank.push(seiza[un_r]);//リストに記憶

で最初にリストをつくり、

ランキング１位・２位などの<ul><li></li></ul>グループを書き出したあと

rank.pushリストrankに追加してください(seiza　星座の中の[un_rランダムで選んだ星座]);

で rank= [] ;にランキング入りした星座を記録するッピ！

whileとif文で登録しているか判別する

うさタブ

さらにif文ですでにこの星座がランキングに登録しているかを判別するッピ！

うさタブ

まずは i に代わる繰り返し用の変数 n を用意するッピ！

n = 0;//変数をリセットします

さらに↓のプログラムで登録するか判別するッピよ～

while(n < seiza.length){
	  if (seiza[un_r] != rank[n]){n++;}
	  else {break;}
	}

うさタブ

これは

while繰り返してください(n < seiza.length星座の数ぶん){
ifもしも (seiza[un_r]ランダムで選んだ星座が != rank[n]登録されていないなら){n++;　nに１を繰り返してください}
else登録しているものなら {break;プログラムを中断してください}
}

という意味ッピ！

うさタブ

さらに

if (n >= seiza.length){
	  i++;//iにプラス１を追加する

	//書き出しのプログラム
		document.write("<ul>");
		document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
		document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
		document.write("</ul>");

	  rank.push(seiza[un_r]);//リストに記憶
	 }

と書き出しのコードを変更することで、今まで登録していない星座を記録することができるッピ！

うさタブ

これは

ifもしも ( n登録判別が >= seiza.length終了しているなら ) {
i++i に１を追加して;
rank.rankリストにpush　追加してください　(seiza星座の中から[un_rランダムで選んだものを]);
}

という意味ッピ！

ユウキ

なんだか複雑だなぁ

うさタブ

いくつものプログラムの応用ッピ！

混乱するのも意味ないッピよ～

うさタブ

流れとしては

 for (i=0 ;i < seiza.length;){//12星座ぶんのランキング

	while(n < seiza.length){//すでに登録しているかを判別
	  if (seiza[un_r] != rank[n]){n++;}
	  else {break;}//登録しているなら中断
	}

	if (n >= seiza.length){//登録していないなら動作
	  i++;//ランキングの順位を増やす
	  rank.push(seiza[un_r]);//リストに登録する
	 }
}

という感じッピ！

ユウキ

うーん

わかったような・・・わからないよ～な？

JavaScript入門講座｜プログラムの分かれ道　～if文・条件分岐について学ぼう～

JavaScript入門｜if文・条件分岐について学ぼう｜会話形式で楽しく学べる｜if文（プログラムの分かれ道）｜else文（条件外の設定）

全体のコードの確認

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
//事前の設定プログラム
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];//４グループに分けて、ちょっと悪いとちょっと良いの間にふつうを作る
let un1 = [
"今日のアナタは絶好調！何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも！",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも！",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも？",
"今日はなんだか気分が良くない日。忘れ物には気をつけて！",
"今日は何もせずゆっくりしているのが良いかも・・・",
];

let i = 0;//繰り返し用プログラム
let n = 0;//繰り返し用プログラム

let rank= [];//ランキングのための変数
let un = 0;//運勢を判別するための変数
let color_r = Math.floor( Math.random() * color.length);//ラッキーカラー
let un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングづけ

document.write("<p>今日の星座ランキング</p>");

 for (i=0 ;i < seiza.length;){

	n = 0;//変数をリセットします
	un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングづけ
	color_r = Math.floor( Math.random() * color.length);//ラッキーカラー

	while(n < seiza.length){
	  if (seiza[un_r] != rank[n]){n++;}
	  else {break;}
	}

	if (n >= seiza.length){

	  i++;//iにプラス１を追加する

		if (i >= 0 && i <= 2) {un = 0;}
		else if (i >= 3 && i <= 5) {un = 1;}
		else if (i >= 6 && i <= 8) {un = 2;}
		else if (i >= 9 && i <= 10) {un = 3;}
		else if (i >= 11 && i <= 12) {un = 4;} 

	//書き出しのプログラム
		document.write("<ul>");
		document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
		document.write("<li>今日のアナタの運勢は"+ un0[un] + "です</li>");
		document.write("<li>"+ un1[un] +"</li>");
		document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
		document.write("</ul>");

	  rank.push(seiza[un_r]);//リストに記憶

	 }
	}

</script>
</body>
</html>

学習のまとめ