JavaScript入門講座|ハイ&ロー ゲームを作ろう

JavaScript
うさタブ
うさタブ

今回は ハイ&ロー ゲームを作るッピ!

ユウキ
ユウキ

ハイ&ロー?? なにそれ

うさタブ
うさタブ

・・・・!?

ユウキくんはハイ&ローを知らないッピか・・・純粋な子ッピね・・・。

ハイ&ローは、ゲームセンターのメダルゲーム等で、

場にあるトランプカードが次にめくるカードより大きいか小さいかを当てるゲームッピ!

ユウキ
ユウキ

へ~ 面白そうじゃん! さっそくやっていこうぜ

サンプルゲーム

場にあるカードは1

次のカードは場にあるカードより高いか低いか考えてみよう!

うさタブ
うさタブ

サンプルゲームを置いとくッピ!

どんなものか試して遊んでみるッピよ~!!

この記事で学べること
  • 変数の配列(リスト)の作り方
  • プログラムのセットの作り方(関数)
  • プログラムを動かすボタンの設置
  • 数字の高低差 / 勝ち負けの判定(条件分岐)
  • JavaScriptによる画像の差し替え

ハイ&ロー ゲームの全体コード

<!-- 見えない部分 -->
<html>
<head>
<script>

	let card = 1;// 場にあるトランプのカード番号

	let Hi_L = 0;// Low(0) と High(1) どっちを選んだか仮の数字(実際にはクリックで決める)
	let Result = "●●を選んで、あなたの●●";//勝ち負けの結果


function High_Low(Hi_L) {

        document.getElementById("Card_img_Before").src="s_" + card + ".jpg";

	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,]; // ハイアンドローをするカード番号
	let trump_n = Math.floor( Math.random() * 13) +1 ;// ランダムで数字を決める


	if (card < trump[trump_n]) {//賭けカードが、伏せカードより大きい場合
		if (Hi_L === 0){ Result = " LOWを選んで、あなたの<span style='background:blue;'>『 負け 』</span>";}
		if (Hi_L === 1){ Result = " HIGHを選んで、あなたの<span style='background:red;'>【 勝ち 】</span>";}
	}

	else if (card > trump[trump_n]) {//賭けカードが、伏せカードより小さい場合
		if (Hi_L === 0){ Result = " LOWを選んで、あなたの<span style='background:red;'>【 勝ち 】</span>";}
		if (Hi_L === 1){ Result = " HIGHを選んで、あなたの<span style='background:blue;'>『 負け 』</span>";}
	}

	else {Result = "引き分け!!";}

        document.getElementById("Card_img_After").src="s_" + trump_n + ".jpg";

	document.getElementById("After").innerHTML ="伏せカードは" + trump[trump_n] + Result + "<br />次のカードが今の数字より高いか低いか考えてみよう!";
	document.getElementById("Before").innerHTML ="場にあるカードは" + card ;

	card = trump[trump_n];//場にあるカードを新しく引いたカードに変える

}

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

	<img id="Card_img_Before" src="s_1.jpg" width="100" height="150" align="left">
	*
	<img id="Card_img_After" src="s_0.jpg" width="100" height="150">

	<p id="Before">場にあるカードは1</p>
	<p id="After">次のカードは場にあるカードより高いか低いか考えてみよう!</p>

	<input type="button" value="High" onclick="High_Low(1);"/>
	<input type="button" value="Low" onclick="High_Low(0);"/>


<!-- ここまで! -->

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

このプログラムをひとつひとつ、わかりやすく解説しながら作っていくッピ!

楽しみにしてるッピヨ~!

HIGH & LOW ゲームを作ろう

ユウキ
ユウキ

どんなゲームかだいたいわかったよ!

あれが作れるなんてワクワクするな~

うさタブ
うさタブ

むふふふ、ユウキくんも2時間もあればアレを作れるッピよ~!

今までの経験や知識をフル活用してチャレンジするッピ!

うさタブ
うさタブ

下のサンプルコードをベースに学んでいくッピ!

今日も一緒に頑張るッピよ~

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下に入力してね!↓ -->

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


<!-- ここまで! -->
</body>
</html>

トランプに必要な数字と乱数を作ろう

うさタブ
うさタブ

それではまず、トランプに必要な数字のリストを作るッピ!

これを<head></head>の中に入れるッピよ~

<script>
	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,];
	let trump_n = Math.floor( Math.random() * 13) +1 ;
</script>
うさタブ
うさタブ

これは

let trumpトランプという名前の変数リストに = [0,1,2,3,4,5,….13,0~13までの数字を入れています];

let trump_ntrump_nという変数を作ります = Math.floor 小数点を切り捨て( Math.random() *13 0~12のランダムな数字を作って下さい) +1 それに+1をして下さい ;

という意味ッピ!

ユウキ
ユウキ

コンピュータの数字は、 [ 1 ] はじまりじゃなく、[ 0 ] はじまりなんだよな!

うさタブ
うさタブ

そうッピ!

だから 『Math.random() *13 』(13個の乱数を作って)という命令文なのに、0~12 の数字ができてしまうッピ!

それをわかりやすくするために、 最後に【 +1 】をするッピよ~!

プログラムのセット【関数】を作ろう

うさタブ
うさタブ

次はプログラムの命令文セット、【関数】を作るッピ!

ユウキ
ユウキ

もう何回もやってるからバッチリだぜ!

ユウキ
ユウキ

Function 関数名 ( ) {命令文;} で、

好きなときにプログラムのセットを呼び出せるんだよな!

うさタブ
うさタブ

そのとおりッピ!

ユウキくん、だんだんプログラマーに近づいてきたでッピヨ~

うさタブ
うさタブ

一気に作るのではなく、少しずつ動作を確認しながら積み上げていくッピ!

まずは、さっき作ったランダム数字のトランプカードを文字表示してみるッピよ~

<head>
<script>
function High_Low(Hi_L) {
	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,];
	let trump_n = Math.floor( Math.random() * 13) +1 ;
	document.getElementById("Before").innerHTML ="場にあるカードは" + trump[trump_n] ;
}
</script>
</head>
うさタブ
うさタブ

上のスプリクトを、<head></head>に、

下のスプリクトを<body></body>内に入れるッピ!

<body>
<p id="Before">場にあるカードは1</p>
</body>
ユウキ
ユウキ

これで合ってる?

うさタブ
うさタブ

いい感じッピネ!

次はこのプログラムを呼び出すボタンを作ってテストしてみるッピ!

プログラムを呼び出すボタンを設置しよう

<input type="button" value="プログラムを呼び出す" onClick="High_Low();">
うさタブ
うさタブ

上のHTMLコード(タグ)を<body></body>に入れるッピ!

<input type=”button”ボタンを設置します value ボタンの名前は=”プログラムを呼び出す” onClick呼び出すプログラムは=”High_Low();”> 

という意味になるッピね~

うさタブ
うさタブ

ちなみに

<button onClick=”High_Low();”> プログラムを呼び出す </button>

でもOKっピ! コチラのほうが新しい記述方式ッピね~!

プログラミングも日々やり方が進化してるッピよ~

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下に入力してね!↓ -->
<script>
function High_Low(Hi_L) {
	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,]; // ハイアンドローをするカード番号
	let trump_n = Math.floor( Math.random() * 13) +1 ;// ランダムで数字を決める
	document.getElementById("Before").innerHTML ="場にあるカードは" + trump[trump_n] ;
}
</script>
</head>

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

<p id="Before">場にあるカードは1</p>
<input type="button" value="プログラムを呼び出す" onClick="High_Low();">

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

ボタンをクリックして、数字が変わるか試してみるッピよ~

ユウキ
ユウキ

できてるできてる!

賭けのカードと伏せカード、2枚のカードを作ろう

うさタブ
うさタブ

HIGH & LOW は

賭けカードが、次にめくる伏せカードより、数字が大きいか小さいかを当てるゲームッピ!

つまりは賭けカードと伏せカード2枚のカードを作らなきゃいけないッピネ~~!

	let card = 1;
うさタブ
うさタブ

2枚めのカードのプログラムはこんな感じッピ!

let cardcard という変数を使います = 1; 中身は 1 です

という意味ッピネ。

これを<script></script>の中の、最初に記述するッピ!

ユウキ
ユウキ

ずいぶん短いコードだな~

2枚めのカードは【 1~13 】まで作らないのか??

うさタブ
うさタブ

HIGH & LOW は、

今伏せているカードが、次の賭けカードにもなるゆえ・・・

勝敗が決まったあと、賭けカードの数字をコピーすれば良いッピよ~

ユウキ
ユウキ

うーん、よくわからん・・・

うさタブ
うさタブ

考えるな・感じろッピ!!!!!!!

難しいことは考えなくて良いッピヨ~

プログラミングなんてやってればカラダが自然に覚えるッピネ!!

ユウキ
ユウキ

なんか雑だなあ・・・

うさタブ
うさタブ

ついでにバグ防止に、他の変数も初期化しておくッピ!

記述するコードはこんな感じッピよ~

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下に入力してね!↓ -->
<script>

	let card = 1;// 場にあるトランプのカード初期化番号

	let Hi_L = 0;// Low(0) と High(1) どっちを選んだか仮の数字(実際にはクリックで決める)
	let Result = "●●を選んで、あなたの●●";//勝ち負けの結果の初期値

function High_Low(Hi_L) {
	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,]; // ハイアンドローをするカード番号
	let trump_n = Math.floor( Math.random() * 13) +1 ;// ランダムで数字を決める
	document.getElementById("Before").innerHTML ="場にあるカードは" + trump[trump_n] ;
}

</script>
</head>

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

<p id="Before">場にあるカードは1</p>
<input type="button" value="プログラムを呼び出す" onClick="High_Low();">

<!-- ここまで! -->
</body>
</html>

HIGH & LOW の 勝敗の判定機を作ろう

うさタブ
うさタブ

次は勝ち負けの判定機を作るッピ!

if文とelse文を駆使して、場のカードが伏せカードより数字が高いか低いか判別し、さらに予想が合っているか外れているかを判定するッピネ!

うさタブ
うさタブ

ついでに HIGH ボタン と LOW ボタンも設置するッピよ~~!

<head>
<script>

	let card = 1;// 場にあるトランプのカード番号

	let Hi_L = 0;// Low(0) と High(1) どっちを選んだか仮の数字(実際にはクリックで決める)
	let Result = "●●を選んで、あなたの●●";//勝ち負けの結果


function High_Low(Hi_L) {

	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,]; // ハイアンドローをするカード番号
	let trump_n = Math.floor( Math.random() * 13) +1 ;// ランダムで数字を決める

/* 追加した判定のプログラム */
	if (card < trump[trump_n]) {//賭けカードが、伏せカードより大きい場合
		if (Hi_L === 0){ Result = " LOWを選んで、あなたの『 負け 』";}
		if (Hi_L === 1){ Result = " HIGHを選んで、あなたの【 勝ち 】";}
	}

	else if (card > trump[trump_n]) {//賭けカードが、伏せカードより小さい場合
		if (Hi_L === 0){ Result = " LOWを選んで、あなたの【 勝ち 】";}
		if (Hi_L === 1){ Result = " HIGHを選んで、あなたの『 負け 』";}
	}

	else {Result = "引き分け!!";}

	document.getElementById("After").innerHTML ="伏せカードは" + trump[trump_n] + Result + "<br />次のカードが今の数字より高いか低いか考えてみよう!";
	document.getElementById("Before").innerHTML ="場にあるカードは" + card ;

	card = trump[trump_n];//場にあるカードを新しく引いたカードに変える

}

</script>
</head>
<body>
	<p id="Before">場にあるカードは1</p>
	<p id="After">次のカードは場にあるカードより高いか低いか考えてみよう!</p>

	<input type="button" value="High" onclick="High_Low(1);"/>
	<input type="button" value="Low" onclick="High_Low(0);"/>
</body>
ユウキ
ユウキ

おおおおおっ! できてるじゃーん!!

うさタブ
うさタブ

今回追加したしたプログラムについて解説していくッピネ!

2つのカードの説明

うさタブ
うさタブ

まずは今の場にどんなカードが置いているかを表示する命令文ッピ!

document.プログラムを動かしてgetElement場所はById(“Before“)id=”Before”.innerHTMLの中のHTMLを書き換えて = “場にあるカードは” + card;

うさタブ
うさタブ

次は、伏せカードを表示するプログラムッピよ~!

document.プログラムを動かしてgetElementByIdid=”After” という場所で以下のように(After“).innerHTMLHTMLを書き換えて下さい = “伏せカードは” + trumptrump という変数の[trump_n 1~13 のランダムな数字を表示] + Result 勝負の結果を表示+ “<br改行 />次のカードが今の数字より高いか低いか考えてみよう!;

うさタブ
うさタブ

card賭けカード(場のカード)を = trump[trump_n] 伏せカードの数字にコピーする;

という感じッピ!

ユウキ
ユウキ

プログラミングって本当にイロイロあってややこしいなあ~

うさタブ
うさタブ

まだまだ終わらないッピよ~

次は判定機の解説ッピ!

判定機の解説

うさタブ
うさタブ

ifもしも (card < trump[trump_m]伏せカード(trump)が 賭けカード(card)よりも大きい場合) {

if  (Hi_L === 0プレイヤーは 伏せカードが 【小さい】 と答えたので) {Result結果を表示する変数 Result は = “ LOWを選んで、あなたの負け” ;}

if (Hi_L === 1)プレイヤーは 伏せカードが 【大きい】 と答えたので {Result 結果を表示する変数 Result は= “ HIGHを選んで、あなたの勝ち” ;}

}

うさタブ
うさタブ

else ifもしも上の条件以外で  (card > trump[trump_n伏せカード(trump)が 賭けカード(card)よりも小さい場合 ]) {

if ( Hi_L === 0プレイヤーは 伏せカードが 【小さい】 と答えたので ) { Result = “ LOWを選んで、あなたの【 勝ち 】”;}

if ( Hi_L === 1プレイヤーは 伏せカードが 【大きい】 と答えたので){ Result = “ HIGHを選んで、あなたの『 負け 』”;}

}

うさタブ
うさタブ

elseそれ以外はすべて { Result = “引き分け!!”;}}

という意味ッピ!

ユウキ
ユウキ

前回のジャンケンより簡単だな!

ボタンと呼び出すプログラムの解説

うさタブ
うさタブ

ボタンについては、さっきも説明したッピが・・・

<input type="button" value="High" onclick="High_Low(1);"/>
<input type="button" value="Low" onclick="High_Low(0);"/>

先程と違うのは onClick = “High_Low( 0 );” と onClick = “High_Low( 1 );” の部分ッピ!

0 = LOW 1 = HIGH として、どっちのボタンを選んだかで関数Function High_Low() の動作、Result の結果を変えたッピ!

ユウキ
ユウキ

この High_Low( 0 1 ) のことを【引数】って言うんだよな~!

引数で結果を変えられるって便利だよな~

ハイ&ロー ゲームに画像をつけてみよう!

うさタブ
うさタブ

次はゲームにイラストをつけてみるッピ!

まずは画像を用意するッピヨ~!

画像を用意しよう

うさタブ
うさタブ

保存した画像ファイルを、下の画像のように、作ったゲームHTMLファイルと同じ場所に置くッピ!

うさタブ
うさタブ

準備ができたら、

画像を追加するコードを書いていくッピ!

<head>
<script>


	let card = 1;// 場にあるトランプのカード番号

	let Hi_L = 0;// Low(0) と High(1) どっちを選んだか仮の数字(実際にはクリックで決める)
	let Result = "●●を選んで、あなたの●●";//勝ち負けの結果


function High_Low(Hi_L) {

        document.getElementById("Card_img_Before").src="s_" + card + ".jpg";

	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,]; // ハイアンドローをするカード番号
	let trump_n = Math.floor( Math.random() * 13) +1 ;// ランダムで数字を決める


	if (card < trump[trump_n]) {//賭けカードが、伏せカードより大きい場合
		if (Hi_L === 0){ Result = " LOWを選んで、あなたの『 負け 』";}
		if (Hi_L === 1){ Result = " HIGHを選んで、あなたの【 勝ち 】";}
	}

	else if (card > trump[trump_n]) {//賭けカードが、伏せカードより小さい場合
		if (Hi_L === 0){ Result = " LOWを選んで、あなたの【 勝ち 】";}
		if (Hi_L === 1){ Result = " HIGHを選んで、あなたの『 負け 』";}
	}

	else {Result = "引き分け!!";}

        document.getElementById("Card_img_After").src="s_" + trump_n + ".jpg";

	document.getElementById("After").innerHTML ="伏せカードは" + trump[trump_n] + Result + "<br />次のカードが今の数字より高いか低いか考えてみよう!";
	document.getElementById("Before").innerHTML ="場にあるカードは" + card ;

	card = trump[trump_n];//場にあるカードを新しく引いたカードに変える

}

</script>
</head>
<body>

	<img id="Card_img_Before" src="s_1.jpg" width="100" height="150" align="left">
	*
	<img id="Card_img_After" src="s_0.jpg" width="100" height="150">

	<p id="Before">場にあるカードは1</p>
	<p id="After">次のカードは場にあるカードより高いか低いか考えてみよう!</p>

	<input type="button" value="High" onclick="High_Low(1);"/>
	<input type="button" value="Low" onclick="High_Low(0);"/>

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

<head></head><body></body> に、上のコードを書くがッピ!

これでゲームの完成ッピヨ~

ユウキ
ユウキ

できた~~!!

画像を差し替えるプログラムの解説

うさタブ
うさタブ

関数の最初にあるものは

document.プログラムを動かしてgetElementById場所は(“Card_img_Before“).src=画像を入れ替えて“s_”+card変数card の中身の数字+”.jpg”; という意味ッピネ

うさタブ
うさタブ

else の後にあるものは

documentプログラムを動作して.getElementById(“Card_img_After“).id = “Card_img_After” という場所src=”s_”+の画像を差し替えてくださいtrump_n変数trump_nの中身の数字+”.jpg”; という意味ッピヨ~

ユウキ
ユウキ

<body></body>内の画像表示タグはオレにもわかるよ!

<img画像を表示 src表示するファイル名は=”s_1.jpg” idid (HTMLの住所)は=”Card_img_Before />

<img画像を表示 src表示するファイル名は=”s_0.jpg” idid (HTMLの住所)は=”Card_img_After />

って意味だな!?

うさタブ
うさタブ

そのとおりッピ! ユウキくんの成長を感じるッピ!

うさタブ
うさタブ

あとは<span>タグで【勝ち】『負け』にわかりやすく背景色をつけるッピ!

判定機のプログラムを

	if (card < trump[trump_n]) {//賭けカードが、伏せカードより大きい場合
		if (Hi_L === 0){ Result = " LOWを選んで、あなたの<span style='background:blue;'>『 負け 』</span>";}
		if (Hi_L === 1){ Result = " HIGHを選んで、あなたの<span style='background:red;'>【 勝ち 】</span>";}
	}

	else if (card > trump[trump_n]) {//賭けカードが、伏せカードより小さい場合
		if (Hi_L === 0){ Result = " LOWを選んで、あなたの<span style='background:red;'>【 勝ち 】</span>";}
		if (Hi_L === 1){ Result = " HIGHを選んで、あなたの<span style='background:blue;'>『 負け 』</span>";}
	}

	else {Result = "引き分け!!";}

に書き換えるッピよ~

うさタブ
うさタブ

変更した部分は勝ち負けの部分ッピ!

<spanここの文字を装飾します style=”background:red;背景を【赤】にしてください“>【 勝ち 】</span>装飾を終わります
<
spanここの文字を装飾します style=“background:blue;”背景を『青』にしてください>『 負け 』</span> 装飾を終わります

っていう意味ッピよ~!

全体のコードの確認

<!-- 見えない部分 -->
<html>
<head>
<script>

	let card = 1;// 場にあるトランプのカード番号

	let Hi_L = 0;// Low(0) と High(1) どっちを選んだか仮の数字(実際にはクリックで決める)
	let Result = "●●を選んで、あなたの●●";//勝ち負けの結果


function High_Low(Hi_L) {

        document.getElementById("Card_img_Before").src="s_" + card + ".jpg";

	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,]; // ハイアンドローをするカード番号
	let trump_n = Math.floor( Math.random() * 13) +1 ;// ランダムで数字を決める


	if (card < trump[trump_n]) {//賭けカードが、伏せカードより大きい場合
		if (Hi_L === 0){ Result = " LOWを選んで、あなたの<span style='background:blue;'>『 負け 』</span>";}
		if (Hi_L === 1){ Result = " HIGHを選んで、あなたの<span style='background:red;'>【 勝ち 】</span>";}
	}

	else if (card > trump[trump_n]) {//賭けカードが、伏せカードより小さい場合
		if (Hi_L === 0){ Result = " LOWを選んで、あなたの<span style='background:red;'>【 勝ち 】</span>";}
		if (Hi_L === 1){ Result = " HIGHを選んで、あなたの<span style='background:blue;'>『 負け 』</span>";}
	}

	else {Result = "引き分け!!";}

        document.getElementById("Card_img_After").src="s_" + trump_n + ".jpg";

	document.getElementById("After").innerHTML ="伏せカードは" + trump[trump_n] + Result + "<br />次のカードが今の数字より高いか低いか考えてみよう!";
	document.getElementById("Before").innerHTML ="場にあるカードは" + card ;

	card = trump[trump_n];//場にあるカードを新しく引いたカードに変える

}

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

	<img id="Card_img_Before" src="s_1.jpg" width="100" height="150" align="left">
	*
	<img id="Card_img_After" src="s_0.jpg" width="100" height="150">

	<p id="Before">場にあるカードは1</p>
	<p id="After">次のカードは場にあるカードより高いか低いか考えてみよう!</p>

	<input type="button" value="High" onclick="High_Low(1);"/>
	<input type="button" value="Low" onclick="High_Low(0);"/>


<!-- ここまで! -->

</body>
</html>
学習のまとめ
  • let 変数 = [配列A,配列B,配列C,..]; で変数のリストが作れる
  • if ( 条件 ) { 命令文 ;} / else { 命令文 ;} で、数字の高い・低い / 勝ち負けを判定できる
  • Function 関数名 ( ) { 命令文 ;} で、命令文のセットを作る【関数】が作れる
  • <input =”button” onClick=”関数( );”>で、プログラムを動かすボタンを設置できる
  • <img id = “ID名(HTML内の住所)” >を使用し、document.getElementById(“ID名”)で画像を差し替えることができる

うさタブ
うさタブ

上手くつくれたッピか?

これからも色んなゲームを作っていくッピ!

次回も楽しみにしてるッピよ~

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

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

うさタブ
うさタブ

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

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

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

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

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

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

Tech Kids Online Coaching

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

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

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

うさタブ
うさタブ

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

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

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

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

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

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

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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