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) { 命令文;}で、全部文字が正解したあとのプログラムを書くことができる

うさタブ
うさタブ

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

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

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

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

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

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

アイカ
アイカ

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

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