JavaScript入門講座|タイピングゲームを作ろう

JavaScript
うさタブ
うさタブ

今回はJavaScriptタイピングゲームを作るッピよ~

ユウキ
ユウキ

タイピングゲーム??

うさタブ
うさタブ

Flashゲームで有名な寿司】のようなPCのキーボードで遊ぶゲームッピ!

今回はアルファベットタイピングゲームを作るッピよ~!

ユウキ
ユウキ

お~! こーいうのが作れるのか!

楽しみだな~

この記事で学べること
  • キー入力を受け付ける / キー入力によって結果を変化させる
  • 押されたアルファベットのキーを判別する
  • 文字が何文字かを取得する
  • 文字の順番を指定して、文字の中身を取り出す
  • 指定した場所をJavaScriptによって書き換える
  • 問題文をランダムで表示
  • 正解した文字を入力済にする判定(if文/else文)
  • 音声読み上げ(chromeのみ)

サンプルゲーム

↓に問題文が出るよ! 出てきた文字を打ってみてね。

 

何かアルファベットのキーを押して下さい

 

※音が出ます

タイピングゲームの全体コード

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

	let Q = ["apple","banana","melon","mango","starwberry","blueberry","orange"];//問題文
	let Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する

	let Q_i = 0;//回答初期値・現在単語どこまで合っているか判定している文字番号
	let Q_l = Q[Q_No].length;//計算用の文字の長さ


window.addEventListener("keydown", push_Keydown);

function push_Keydown(event){

	let keyCode = event.key;
	if (Q_l == Q_l-Q_i){

		document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //問題を書き出す

		}


	if (Q[Q_No].charAt(Q_i) == keyCode) { //押したキーが合っていたら

		Q_i++; //判定する文章に1足す
		document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //問題を書き出す

		if (Q_l-Q_i === 0){ //全部正解したら
	
	
			Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する
			Q_i = 0;//回答初期値・現在どこまで合っているか判定している文字番号
			Q_l = Q[Q_No].length;//計算用の文字の長さ


			document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //新たな問題を書き出す

		}
	}
}

</script>

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

<center>
<h1 id="start" class="text">何かキーを押して下さい</h1>
</center>

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

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

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

タイピングゲームを作ってみよう

うさタブ
うさタブ

まずはキーボードの入力を受け付けるプログラムを書くッピよ~

下のサンプルコードをコピーして、それを元に学習していくッピ!

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


</head>

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



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

【 event.key 】 を使ってキー入力判定の準備をしよう

うさタブ
うさタブ

今回作るのはキーボードで入力して遊ぶタイピングゲーム。

キーボード入力の判定【event.key】を使うッピネ~

ユウキ
ユウキ

event.key 】って何??

初めて聞くんだけど・・・

うさタブ
うさタブ

event.key は押したキーを判別するjavascriptのプログラムッピ!

<script>
document.addEventListener('keydown',
    event => {
  let keys = event.key;
           alert(`${keys}`+'が押されました');
    });
</script>

EventListenerという

ページの特定の要素が表示されたとき動くプログラムと組み合わせることで、

ページに訪れた人がやった行動に応じて

ゲームの結果を変えることができるッピ!

ユウキ
ユウキ

へ~ そんな便利なものがあるんだな~

何のキーが押されたか調べる装置を設定しよう

うさタブ
うさタブ

準備できたらさっそくコーディングをはじめるッピ!

うさタブ
うさタブ

<head></head>の中に

<script>
window.addEventListener("keydown", push_Keydown);
function push_Keydown(event){
	let keyCode = event.key;

document.getElementById("start").innerHTML = keyCode + "を押しました"; 
}
</script>

と入力するッピ!

うさタブ
うさタブ

<body></body>には

<h1 id="start">何かキーを押して下さい</h1>

と書くッピね~

ユウキ
ユウキ

おおおおっ!!!

何の【キー】を押したか、ページに書かれてる!!!

うさタブ
うさタブ

ふふふ、これがプログラミングの魔法ッピ!

これはJavaScriptの中でもHTMLを書き換えるプログラム・・・【DOM操作】といわれるものッピネ!

ユウキ
ユウキ

他にも色んなことができるかと思うとワクワクするな~!

はやく先を勉強したいよ!

ここまでのコード
<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね!↓ -->
<script>
window.addEventListener("keydown", push_Keydown);
function push_Keydown(event){
	let keyCode = event.key;
	document.getElementById("push").innerHTML = keyCode + "を押しました"; 
}
</script>
</head>

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

<h1 id="push">何かキーを押して下さい</h1>

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

ここまでの命令文の解説するッピよ~!

キーボードの入力を受付るようにする

うさタブ
うさタブ

キーボードの入力を受付るようにする命令文

window.この画面を開いているときaddEventプログラムをListener実行してください(keydown【キー】が押されているとき, push_Keydown関数 push_Keydown を実行して下さい);

ッピ!

キー入力したあと動かすFunction設定

うさタブ
うさタブ

さらに、キーボードが入力されたあと、

どんな動作をするかを書いたプログラムがこれッピ!

functionプログラムのセットを作ります push_Keydown名前はpush_keydownです (event 押したキーで変化します) {
let keyCode変数keyCodeを作ります = event.key;keyCode = event.key(押したキー)です

document.プログラムを動かしてgetElementBy
Id(“push”).id=”pushという場所で”innerHTML HTMLを以下のように書き換えて下さい = keyCode押したキーの変数名 + “を押しました”;}

ユウキ
ユウキ

たしか function プログラムのセットだっけ?

合ってる??

うさタブ
うさタブ

正解ッピ! Function関数はプログラムセットのことッピ!
ユウキくん立派なプログラマーになっていくッピネ。

次はゲームの問題文を作って表示してみるッピよ~!

問題文を作ってランダムで表示してみよう

うさタブ
うさタブ

それでは問題文を作るッピよ~!

変数リスト配列を利用するッピ!

ユウキ
ユウキ

リスト配列もバッチリ知ってるぜ!

変数の中に、たくさん単語数字を入れることだよな?

うさタブ
うさタブ

そのとおりッピ!

let 変数名 = [ データ1, データ2, データ3,] ;

これでひとつの箱の中に、たくさんのデータを入れることができるッピよ~

うさタブ
うさタブ

それではさっそく問題文を作ってみるッピネ!

ランダムで問題を出題する命令文も入れといたッピヨ~

let Q = ["apple","banana","melon","mango","strawberry","blueberry","orange"];//問題文
let Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する
うさタブ
うさタブ

さらに

function push_keydown(event){ 命令文;}に、

document.getElementById("start").innerHTML = Q[Q_No]; 

も追加して、問題文を表示みるッピ!

ここまでのコード
<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね!↓ -->
<script>

let Q = ["apple","banana","melon","mango","strawberry","blueberry","orange"];//問題文
let Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する

window.addEventListener("keydown", push_Keydown);
function push_Keydown(event){
	let keyCode = event.key;
	document.getElementById("push").innerHTML = keyCode + "を押しました"; 
	document.getElementById("start").innerHTML = Q[Q_No]; 
}
</script>
</head>

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

<h1 id="push">何かキーを押して下さい</h1>
<h1 id="start">問題をここに出題します</h1>

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

なんか英語が出てきた! ちゃんと動作してるってことかな?

うさタブ
うさタブ

ばっちりッピ!

次は押したキーが、問題文と合っているか判定して【文字を消す】プログラムを作るッピネ~

押したキーと問題文が合っているか判定機を作ろう

文字列を扱う命令文について学ぼう

うさタブ
うさタブ

まずはタイピングゲームを作るのに必要な

文字列を扱う命令文を、あらかじめ予習して、ひとつひとつ学んでいくッピヨ~

変数リストの配列データを呼び出す

うさタブ
うさタブ

まずは今までのおさらい

リストのデータを呼び出すッピ!

うさタブ
うさタブ

試しに、今回の問題文 【Q】の中身を取り出すッピ!

let Q = ["apple","banana","melon","mango","strawberry","blueberry","orange"];
document.write(Q);

こんな感じッピかね?

うさタブ
うさタブ

しかーし、ここで問題があるッピ!

そのまま変数【Q】を呼び出すと、全部のデータを呼び出してしまうッピネ~

[“apple”,”banana”,”melon”,”mango”,”strawberry”,”blueberry”,”orange”]

とすべて表示されてしまうッピ!

ユウキ
ユウキ

えー

なんだよそれ不便だな~~

うさタブ
うさタブ

そうッピネ・・・

では単語を1つだけ取り出すにはどうしたらいいか?

その問題を解決しなければいけないッピ!

うさタブ
うさタブ

リストにはあらかじめコンピュータが番号を振ってあるッピよ~!

変数名 [ データ番号 ]

で呼んであげる必要があるッピネ~

うさタブ
うさタブ

今回は問題文【Q】変数リストだから、

Q[ 0 ] , Q[ 1 ] ,Q[ 2 ] ,Q [ 3 ] , みたいな感じで呼び出しッピ!

Q[0]=”apple”;
Q[1]=”banana”;
Q[2]=”melon”;
Q[3]=”mango”;

みたいな感じッピ!

ユウキ
ユウキ

そんなふうになってるんだな~

リストの中身の個数/文字列の長さ(ケタ)を調べる .length

うさタブ
うさタブ

次は、文字列ケタを調べる命令文を勉強するッピよ~

うさタブ
うさタブ

まずはランダムで問題を出すときにも使った

変数.length

これは変数の長さ(ケタ)を取得するものッピネ

ユウキ
ユウキ

変数長さ(ケタ)?

うさタブ
うさタブ

例えば、さきほどの問題文を作る命令文でいうと

let Q変数 Q を作成します = [“apple中身は りんご“,”bananaバナナ“,”melonメロン“,”mangoマンゴー“,”strawberryいちご“,”blueberryブルーベリー“,”orangeオレンジ です“];


let Q_No変数 Q_No を作ります = Math.floor小数点を切り捨てます( Math.random乱数を作成します() * Q.lengthQの 長さ ぶん作ります);

という意味ッピが・・・

うさタブ
うさタブ

この Q.length は、 【Q】の単語の個数を取り出すものッピ・・・

  1. apple
  2. banana
  3. melon
  4. mango
  5. strawberry
  6. blueberry
  7. orange

ッピゆえ、

Q.length 】は・・・【になるッピヨ!

ユウキ
ユウキ

リストの中単語いくつあるかわかる・・・ ってこと??

うさタブ
うさタブ

ところが、それだけとは言えないッピ!

例えば

let 変数name 名前を作成 = 中身は “ユウキ”;です
documentホームページに.write書き出して(name名前の.length長さを);

すると、

name.length は、name = “ユウキ” の文字数・・・

】になってしまうッピノヨ~!

ユウキ
ユウキ

ううう・・・どゆこと??

全くわかんねー・・・

うさタブ
うさタブ

まあ、つまり .length は、

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

数字の場合はケタ数を、

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

ユウキ
ユウキ

わかりやすく統一してくれればいいのに・・・

プログラミングは複雑だなぁ~

数字の順番を指定して 1文字を取り出す .charAt

うさタブ
うさタブ

次は、数字の順番を指定して 1文字を取り出す命令文ッピ!

変数.charAt( 呼び出す数字の番号 ) 

で取得できるッピよ~~

うさタブ
うさタブ

例えば、

let A変数A =中身はa0p1p2l3e4;です

documentホームページへ.write書き出して(AAの中の.charAt指定した番号を( 4 ) );

とすると、変数 A の中身【 apple 】の0から4番目文字を取得するので、結果は【 e 】になるッピ!

ユウキ
ユウキ

これを使って、入力したキーと問題文が合っているか判定するんだな?

うさタブ
うさタブ

そのとおりッピ!

だけど、今回は正解した前の文字を消しすタイプのタイピングゲームを作るゆえ、これは正解の判定のみに使うッピ!

次は 1 ~ 4 までと数字を指定して複数の文字を取り出す命令文を紹介するッピよ~~

数字の順番を指定して【複数】の文字を 取り出す .substring

うさタブ
うさタブ

では、数字の順番を指定して、

~から ~までの文字を取り出す命令文を勉強するッピ!

うさタブ
うさタブ

使う命令文.substring ッピ!

変数.substring( 最初数字, 最後の数字 )

で使えるッピよ~~

うさタブ
うさタブ

例えば

let B = “b0a1n2a3n4a5” ;

document.write( B.substring ( 3, 5 ) );

なら、banana の 0から 3文字~5文字目 を書き出すゆえ

答えは【 ana 】になるッピ!

ユウキ
ユウキ

バナナから穴になっちゃったな~

うさタブ
うさタブ

次から本番!

問題文がどこまで正解しているか、

問題文と押したキーが合っているかを判定するプログラムを書いていくでッピよ~

打ったキーが問題文とどこまで合っているか判定しよう

うさタブ
うさタブ

それでは、新しいプログラムも覚えたところで本番に入るッピネ!!

うさタブ
うさタブ

ここがタイピングゲームのキモ、

押したキー問題文合っているか判定する判定機を作るッピヨ!

ここは一気にコードを公開するッピネ~!!

全体のコードの確認

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

	let Q = ["apple","banana","melon","mango","starwberry","blueberry","orange"];//問題文
	let Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する

	let Q_i = 0;//回答初期値・現在単語どこまで合っているか判定している文字番号
	let Q_l = Q[Q_No].length;//計算用の文字の長さ


window.addEventListener("keydown", push_Keydown);

function push_Keydown(event){

	let keyCode = event.key;
	if (Q_l == Q_l-Q_i){

		document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //問題を書き出す

		}


	if (Q[Q_No].charAt(Q_i) == keyCode) { //押したキーが合っていたら

		Q_i++; //判定する文章に1足す
		document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //問題を書き出す

		if (Q_l-Q_i === 0){ //全部正解したら
	
	
			Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する
			Q_i = 0;//回答初期値・現在どこまで合っているか判定している文字番号
			Q_l = Q[Q_No].length;//計算用の文字の長さ


			document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //新たな問題を書き出す

		}
	}
}

</script>

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

<center>
<h1 id="start" class="text">何かキーを押して下さい</h1>
</center>

</body>
</html>
ユウキ
ユウキ

すげえええ! 押したら文字が消えてる!!

うさタブ
うさタブ

ふふふふ、これがプログラミングの魔法ッピ!

次からこのコードについて詳しく解説するッピよ~~

文字を取得する命令文を使って、if文で判定する

うさタブ
うさタブ

それでは、タイピングゲームのキモ!

問題が今どこまで正解しているかを判定するプログラムを書くッピよ~

うさタブ
うさタブ

その前に新しく作った変数を説明しなければならないッピネ・・・

問題が正解したか確認するために、

Q_i 】と Q_lの2つの変数を作ったッピ!

うさタブ
うさタブ

let Q_i変数 Q_i を作ります = 0;中身は 0 です

これは、Q_i どこまで正解して文字を打ったか・・・

let Q_l 変数 Q_l を作ります= Q[Q_No][Qのランダムなリストデータ] で .length;  単語の文字数を取得します

これは、Q_l 問題文の長さを調べるための変数ッピね~

ユウキ
ユウキ

Q_l問題の文字数マイナスQ_i正解した文字数 で、

どこまで問題が合っているか調べるってこと??

うさタブ
うさタブ

そのとおりッピ!

まずは、最初にボタンを押したあとの処理を書いていくッピよ~

うさタブ
うさタブ

let keyCode変数 keyCode を作ります = event.key;中身は 【押したキー】 です

ifもしも (Q_l 問題文の文字の長さが== Q_lQ_i問題文から 正解した数を引いた数と 等しいなら){

document.プログラムを動かしてgetElementById(“start”) .id=”start”という場所でinnerHTMLHTMLファイルを以下のように書き換えて下さい = Q[Q_No]問題文.substring(Q_i, Q_l)正解した数から問題文の最後まで;

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

ユウキ
ユウキ

Q[Q_No] = 今選んでいる問題文のリストデータだから、

Q[Q_No].substring問題文を~から~まで書き出す (Q_i正解した文字数, Q_l 問題文の最後まで);

って意味だな!?

ユウキ
ユウキ

で、 Q_l問題文の文字数 === Q_l 問題文の文字数  Q_i正解した文字数 っていうのは、

Q_l と (Q_l – Q_i) が等しくなるのは、

問題文がまだでてない、何も正解してない最初の状態・・・

最初の状態のときはこの命令文を実行してくれ! って意味??

うさタブ
うさタブ

そのとおりッピ!!

もう言うことなしッピね~~~!

ユウキくんの成長をヒシヒシと感じるッピよ~~

打ったキーが問題文の最初の文字と合っているか判定しよう

うさタブ
うさタブ

打ったキーが問題文の最初の文字と合っているか判定するif文を作るッピ!

うさタブ
うさタブ

if (Q[Q_No].charAt押すべきキーと(Q_i) == keyCode押した キー が等しいとき) {

Q_i ++;正解数に +1 して下さい

document.プログラムを動かしてgetElementById(“start”).id=”start”という場所でinnerHTML 書き換えて = Q[Q_No]問題文の.substring(Q_i, Q_l)Q_i から Q_l まで書き出して下さい;

上の文はという意味になるッピね~

問題文が全部正解しているか判定しよう

うさタブ
うさタブ

もうこのプログラム解説も最後になるッピな・・・

うさタブ
うさタブ

最後は全部正解したら発動するプログラムを作るッピネ!

あともう少しッピ! 頑張るがッピ!!

ユウキ
ユウキ

おう!!

うさタブ
うさタブ

全部正解したら動かすプログラムを作るには、

Q_l 問題文の文字数 引く  Q_i正解した文字数 === 0

にしなけれいけないッピ!

ユウキ
ユウキ

問題の文字数から、正解した文字を引いて、

】になれば、その問題のタイピングは全部正解したってこと

うさタブ
うさタブ

そのとおりッピよ~~!

うさタブ
うさタブ

つまりそのあとの文章は、全部初期化の文章ッピ!

ifもしも  (Q_l問題の文字数Q_i 正解した文字数 === 00 だった場合 ){

Q_NoQ_Noは = Math.floor小数点を切り捨てた( Math.random()ランダムで選んだ * Q.length変数 Q の単語ぶんのものです);

Q_i正解した文字数は = 0;

Q_l = Q[Q_No].length;ランダムで選んだ単語の文字数は

document.プログラムを動作してgetElementById(“start”)id=”start”という場所で.innerHTML 書き換えてください= Q[Q_No]問題文の .substring(Q_i, Q_l)Q_i から Q_l まで;

という意味ッピネ~~~!

ユウキ
ユウキ

なるほどなー!

これだけすごいもの作れると、自信が持ててきたよ!

うさタブ
うさタブ

ユウキくんもかなりプログラマーとして成長してきたッピネ!

さらなる成長が楽しみッピよ!

学習のまとめ
  • JQueryによって、JavaScriptの機能を拡張できる
  • window.addEventListener(“keydown”, 関数名);によって、キー入力を受け付ける
  • keyCode打った文字が何か判別できる
  • .length文字列の長さ(ケタ)を取得できる
  • .charAt(番号)で、指定した番号の文字を取得できる
  • .substring(番号a, 番号b)で、指定した番号 【a~b】までの文字列を取得できる
  • if (変数.charAt(番号) == keyCode) { 命令文;}で打った文字が合っているか判別する
  • if (問題文の長さ – 正解した文字数 === 0) { 命令文;}で、全部文字が正解したあとのプログラムを書くことができる

うさタブ
うさタブ

次はオマケのページッピ!

画像をつけたり、効果音をつけたり、問題文を読み上げたりするッピよ~

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
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をコピーしました